0

I was using Magento 1.9 and now I'm migrating to Magento 2.

I ready Magento devdocs for frontend and tried a lot of things but none works for me. Probably I forgot some details but I'm completely stuck since 3 days ago.

I would like my header to have this structure:

<header class="custom-header">
  <div class="custom-header__top-content">
     // inline: reviews - phone and working hours - links: contact, login and register
  </div>
  <div class="custom-header__main-content">
     // inline: Logo - Search - MiniCart
  </div>
</header>

See the image of final header

I'm using inheritance theme from blank and I already tried:

<move element="top.links" destination="custom_header_top_content"/>
<move element="logo" destination="custom_header_main_content" before="-"/>
<move element="top.search" destination="custom_header_main_content"/>
<move element="minicart" destination="custom_header_main_content" after="-"/>
<referenceContainer name="header.container" htmlClass="custom-header">
    <block class="Magento\Framework\View\Element\Template" name="custom_header_top_content" as="custom_header_top_content" template="Magento_Theme::html/headerTopContent.phtml" before="-">
         <block class="Magento\Framework\View\Element\Template" name="custom_header_feefo_reviews" before="-" template="TheTrade_FeefoReviews::widget/service_simple.phtml">
              <arguments>
                  <argument name="style" xsi:type="string">Service Simple</argument>
              </arguments>
          </block>
          <block class="Magento\Customer\Block\Account\Navigation" name="top.links">
              <arguments>
                 <argument name="css_class" xsi:type="string">header links</argument>
              </arguments>
          </block>
    </block>
    <block class="Magento\Framework\View\Element\Template" name="custom_header_main_content" as="custom_header_main_content" template="Magento_Theme::html/headerMainContent.phtml" after="-">
        <block class="Magento\Theme\Block\Html\Header\Logo" name="logo">
            <arguments>
                  <argument name="logo_img_width" xsi:type="number">200</argument>
                  <argument name="logo_img_height" xsi:type="number">52</argument>
            </arguments>
        </block>
    </block>
</referenceContainer>
<referenceContainer name="header.panel.wrapper" display="false"/>
<referenceContainer name="header-wrapper" display="false"/>

And this just retun this:

<header class="custom-header">
  <div class="custom-header__top-content">
     // empty
  </div>
  <div class="custom-header__main-content">
     // empty
  </div>
</header>

I also tried this:

<referenceContainer name="header.container" htmlClass="custom-header">
    <container name="custom_header_top_content" htmlTag="div" htmlClass="custom-header_top-content" before="-">
        <block class="Magento\Framework\View\Element\Template" name="custom_header_feefo_reviews" before="-" template="TheTrade_FeefoReviews::widget/service_simple.phtml">
            <arguments>
                <argument name="style" xsi:type="string">Service Simple</argument>
            </arguments>
        </block>
        <block class="Magento\Customer\Block\Account\Navigation" name="top.links">
            <arguments>
                <argument name="css_class" xsi:type="string">header links</argument>
            </arguments>
        </block>
    </container>
    <container name="custom_header_main_content" htmlTag="div" htmlClass="custom-header_main-content" after="-">
        <block class="Magento\Theme\Block\Html\Header\Logo" name="logo">
            <arguments>
                <argument name="logo_img_width" xsi:type="number">200</argument>
                <argument name="logo_img_height" xsi:type="number">52</argument>
            </arguments>
        </block>
    </container>
</referenceContainer>
<referenceContainer name="header.panel.wrapper" display="false"/>
<referenceContainer name="header-wrapper" display="false"/>

And this retuns a messy of blocks like:

<header class="custom-header">
  <div class="custom-header__top-content">
    <[review block]>
      <[review image wrapper element]>
         // review image
         // top links
      </[review image wrapper element]>
      <div class="custom-header__main-content">
        // toggle-nav
        // logo
      </div>
    </[review block]>
  </div>
</header>

I already tried to add block inside of default header.panel container and worked but the header.pannel.wrapper is not full width then if I try to move it before the header.container returns another mess os code.

How is the best way to do it?

Your Answer

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

Browse other questions tagged or ask your own question.