Magento 2.1 – How to Display a Search Bar in Website Header

catalogsearchmagento-2.1search

I am working on a Magento 2.1.7 shop. To achieve this, I have created a child-theme of Magento Blank.

I have moved the top links at the right of the logo:

<move element="top.links" destination="header-wrapper" after="logo" />

I want to display the search bar (it does not display anywhere) above the top links (like the screenshot indicates).

For this purpose, I wrote the line below, in my default.xml file:

<move element="top.search" destination="header-wrapper" before="links" />

The result is that the search bar not only does not display above the top links but it does not display at all.

There is alse a app/design/frontend/Company_Name/Theme_Name/Magento_Search/layout/default.xml file with this code:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <move element="top.search" destination="navbar-collapse" after="navigation.sections" />
        <referenceBlock name="advanced-search-link" remove="true" />
    </body>
</page>

As you can see, on the website's homepage, the search box does not appear anywhere.

What am I doing wrong?
Could the search feature be disabled from admin?
Can I display the search bar inside the top links <ul> element?

Best Answer

I added the following code sequence in my custom theme's default.xml file:

<container name="header.main.search" htmlTag="div" htmlClass="header-search" after="-">
<block class="Magento\Framework\View\Element\Template" template="Magento_Search::form.mini.phtml" />
</container>
<move element="header.main.search" destination="header-wrapper" after="logo" />
<move element="top.links" destination="header-wrapper" after="header.main.search" />

The code above renders the following HTML in the page source:

<div class="header content">
  <strong class="logo">
   <img src="https://dev3.pro-detailing.ro/pub/static/version1516374892/frontend/ProDetailing/v1/en_US/images/logo.png" alt="Magento Commerce" width="263" height="85">
  </strong>
  <div class="header-search">
    <form class="navbar-form navbar-right" role="search" id="search_mini_form" action="https://dev3.pro-detailing.ro/catalogsearch/result/" method="get">
      <div class="form-group">
        <input type="text" name="q" value="" placeholder="Search entire store here..." class="form-control" maxlength="128" role="combobox" aria-haspopup="false" aria-autocomplete="both" autocomplete="off">
      </div>
      <button type="submit" class="btn btn-default" disabled="">Search</button>
      <div id="search_autocomplete" class="search-autocomplete" style="display: none;"></div>
    </form>
  </div>
  <ul class="list-inline clearfix header links">
    <li><a href="https://dev3.pro-detailing.ro/customer/account/">My Account</a></li>
    <li class="authorization-link" data-label="or">
      <a href="https://dev3.pro-detailing.ro/customer/account/login/">
      Sign In</a>
    </li>
  </ul>
</div>

This is what I was looking for.

Related Solutions

Magento 2.1 – How to Add/Remove Top Links for Logged-in/Logged-out Users

I found the solution! :-D The simple and clean way to do it. Creating custom modules, editing controllers, using $objectManager directly (not recommended due to full page caching issues) seemed like an overkill for achieving such a simple task. So, after numerous trials and testing different solutions, I found an easy one that did the job. I'm not sure if there is an element of "bad developer practice" in it though, but I think it's elegant.

Using Magento Helper class to check isLoggedIn() to add/remove top link:

In your app/design/Custom/theme/Magento_Customer/layout/default.xml add your desired link with template for it, example:

<referenceBlock name="header.links">
<block class="Magento\Framework\View\Element\Html\Link" name="my-link" template="my-link.phtml">
        <arguments>
            <argument name="label" xsi:type="string" translate="true">My Link Label</argument>
            <argument name="path" xsi:type="string" translate="true">my/link/path</argument>
        </arguments>
    </block>
</referenceBlock>

Inside your my-link.phtml template file add:

<?php $_loggedin = $this->helper('Magento\Checkout\Helper\Cart')->getCart()->getCustomerSession()->isLoggedIn(); ?>
<?php if( $_loggedin ) : ?>
 <li>
<a <?php /* @escapeNotVerified */ echo $block->getLinkAttributes(); ?>>
    <?php echo $block->escapeHtml($block->getLabel()); ?>
</a>
</li>
<?php endif; ?>

And there you go. Your custom link shows up when user is logged in and does not show for guest users.

Magento 2 – How to Add a Search Box in a CMS Static Block

Try below code to achieve your functionality using default.xml file inside theme

<!-- Main Header -->
  <container name="header.main" htmlTag="header" htmlClass="header-main">
    <container name="header.main.container" htmlTag="div" htmlClass="container">
      <container name="header.main.row" htmlTag="div" htmlClass="row vcenter">
        <container name="header.main.logo" htmlTag="div" htmlClass="col-md-6 col-sm-6 col-xs-10 header-logo">
          <block class="Magento\Theme\Block\Html\Header\Logo" name="logo">
            <arguments>
              <argument name="logo_img_width" xsi:type="number">499</argument>
              <argument name="logo_img_height" xsi:type="number">57</argument>
            </arguments>
          </block>
        </container>
        <container name="header.main.search" htmlTag="div" htmlClass="col-md-3 col-sm-3 header-search hidden-xs" after="-">
          <block class="Magento\Framework\View\Element\Template" template="Magento_Search::form.mini.phtml" />
        </container>
        <container name="header.toplinks" htmlClass="col-md-3 col-sm-3 header-links hidden-xs" after="-"></container>
      </container>
    </container>
  </container>
<!-- End Main Header -->
<move element="top.links" destination="header.toplinks"/>

Note: Change your container classes and logo size according to your requirement.

Best Answer

Related Solutions

Magento 2.1 – How to Add/Remove Top Links for Logged-in/Logged-out Users

Magento 2 – How to Add a Search Box in a CMS Static Block

Related Topic