0

example

What is the correct way to add block with some links and few css classes to header content? This is correct?

    <referenceContainer name="header-wrapper">
        <container name="header.decor" as="headerDecor" label="Header Decor" htmlTag="div" htmlClass="header-decor">
            <block class="Magento\Framework\View\Element\Html\Link" htmlClass="link-1" name="link-1">
                <arguments>
                    <argument name="css_class" xsi:type="string">link-1</argument>
                    <argument name="path" xsi:type="string">link-1</argument>
                </arguments>
            </block>
            <block class="Magento\Framework\View\Element\Html\Link" htmlClass="link-2" name="link-2">
                <arguments>
                    <argument name="css_class" xsi:type="string">link-2</argument>
                    <argument name="path" xsi:type="string">link-2</argument>
                </arguments>
            </block>
        </container>
    </referenceContainer>

But no class...

2 Answers 2

3

In you "own theme" under Magento_Theme/layout/default.xml, add the following content.

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="header-wrapper">
            <block class="Magento\Framework\View\Element\Template" name="top.custom.links" as="topCustomLinks" template="Magento_Theme::topCustomLinks.phtml" />
        </referenceContainer>
    </body>
</page>

And add the HTML content inside your_theme/Magento_Theme/templates/topCustomLinks.phtml

<ul>
  <li id="link1">Link 1</li>
  <li id="link2">Link 2</li>
  <li id="link3">Link 3</li>
</ul>
2
  • Thank you! I change question because need new block without phtml.
    – Sylon
    Apr 18, 2017 at 11:29
  • How can we add a signup , wishlist , login with respective links in that phtml file...
    – aravind
    Nov 24, 2017 at 11:10
1

Add code to your default.xml ,

<referenceContainer name="header-wrapper">
   <container name="header-custom-link" as="header-custom-link" label="Page header-link" htmlTag="div" htmlClass="header-link content">  
     <referenceBlock name="header.links">
      <block class="Magento\Customer\Block\Account\RegisterLink" htmlClass="register" before="-" name="register-link">
        <arguments>
            <argument name="label" xsi:type="string" translate="true">Create an Account</argument>
        </arguments>
      </block>

      <block class="Magento\Framework\View\Element\Html\Link" name="wish-link" htmlClass="wishlist" after="register-link">
        <arguments>
          <argument name="label" xsi:type="string" translate="false">My WishList</argument> 
          <argument name="path"  xsi:type="string" translate="false">wishlist/</argument>
        </arguments>
      </block>
     </referenceBlock>
   </container>
 </referenceContainer>

Thanks

11
  • Thank you! I change question because need new block without phtml.
    – Sylon
    Apr 18, 2017 at 11:33
  • @syrgey Please check updated answer.
    – Yogesh
    Apr 18, 2017 at 11:35
  • This is only one link, but before need creat block or container for custome links...
    – Sylon
    Apr 18, 2017 at 11:44
  • You can repeat that same things for as per my answer.
    – Yogesh
    Apr 18, 2017 at 11:46
  • I mean need same on example foto. You use <referenceBlock name="header.links">. But need creat new div block in header-wrapper. Check please my question.
    – Sylon
    Apr 18, 2017 at 11:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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