0

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

I want to display the search bar above the top links, at the right of the logo:

enter image description here

Not being able to do that by editing the theme's default.xml file, I have created a CMS Static Block ("Search") and placed it within a widget in the website's header.

How do I add the search box in this block?

1

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.

  • This piece of code renders the search, but in the website's footer: <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>. How do I move it above the top links? – Razvan Zamfir Jan 19 '18 at 15:03
  • can you please add your default.xml file code in Question? – Abhishek Panchal Jan 19 '18 at 15:08
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.