How to move existing links and add new custom links in top header?
-
24-03-2021 - |
题
I already check many answers regarding the move header.links
to header-wrapper
its working but the problem is that it also move my custom links to header content.
I am trying to create a new container which has a parent header.links
, but
its not working.
here is my default.xml
<referenceContainer name="header.links">
<container name="custom-content" as="custom-content" label="Page Custom Content" htmlTag="div" htmlClass="custom-content" />
</referenceContainer>
<container name="custom-content" >
<block class="Magento\Framework\View\Element\Html\Link" name="contactus.link" after="register-link">
<arguments>
<argument name="label" xsi:type="string" translate="false">Contact Us</argument>
<argument name="path" xsi:type="string" translate="false">contact-us</argument>
</arguments>
</block>
<block class="Magento\Framework\View\Element\Html\Link" name="aboutus.link" after="contactus.link">
<arguments>
<argument name="label" xsi:type="string" translate="false">About Us</argument>
<argument name="path" xsi:type="string" translate="false">about-us</argument>
</arguments>
</block>
<block class="Magento\Framework\View\Element\Html\Link" name="customerservice.link" after="customerservice.link">
<arguments>
<argument name="label" xsi:type="string" translate="false">Customer Service</argument>
<argument name="path" xsi:type="string" translate="false">customer-service</argument>
</arguments>
</block>
</container >
<move element="header.links" destination="header-wrapper" />
First I create new container custom-content
then I move existing links like Sign in
, Create an account
link & Greeting message
to header-wrapper
and then define my custom link into my custom container, but its not working.
if I remove custom container then move
is working fine.
解决方案 3
Without creating a custom container, it can be done
add code into default.xml
<head>
<css src="SimpleMagento_HeaderChange::css/custom.css" />
</head>
<body>
<referenceBlock name="header.container" >
<container name="header.panel" htmlClass="panel wrapper" htmlTag="div" >
<block class="Magento\Framework\View\Element\Html\Link" name="contactus.link" >
<arguments>
<argument name="label" xsi:type="string" translate="false">Contact Us</argument>
<argument name="path" xsi:type="string" translate="false">contact-us</argument>
<argument name="class" xsi:type="string" translate="false">custom-link</argument>
</arguments>
</block>
<block class="Magento\Framework\View\Element\Html\Link" name="aboutus.link" >
<arguments>
<argument name="label" xsi:type="string" translate="false">About Us</argument>
<argument name="path" xsi:type="string" translate="false">about-us</argument>
<argument name="class" xsi:type="string" translate="false">custom-link</argument>
</arguments>
</block>
<block class="Magento\Framework\View\Element\Html\Link" name="customerservice.link" >
<arguments>
<argument name="label" xsi:type="string" translate="false">Customer Service</argument>
<argument name="path" xsi:type="string" translate="false">customer-service</argument>
<argument name="class" xsi:type="string" translate="false">custom-link</argument>
</arguments>
</block>
</container>
</referenceBlock >
<move element="header.links" destination="header-wrapper" before="-" />
</body>
Add CSS for improving UI.
其他提示
You have defined "custom-content" as Container and you are trying to add links via <referenceBlock name="custom-content">
which is wrong .
Use
<referenceContainer name="custom-content">
Could you please try following code.
<container name="custom-content" as="custom-content" label="Page Custom Content" htmlTag="div" htmlClass="custom-content">
<!-- Contact us Link -->
<block class="Magento\Framework\View\Element\Html\Link" name="contactus.link" after="register-link">
<arguments>
<argument name="label" xsi:type="string" translate="false">Contact Us</argument>
<argument name="path" xsi:type="string" translate="false">contact-us</argument>
</arguments>
</block>
<!-- CMS Page Link Link -->
<block class="Magento\Framework\View\Element\Html\Link" name="aboutus.link" after="contactus.link">
<arguments>
<argument name="label" xsi:type="string" translate="false">About Us</argument>
<argument name="path" xsi:type="string" translate="false">about-us</argument>
</arguments>
</block>
<!-- CMS Page Link Link -->
<block class="Magento\Framework\View\Element\Html\Link" name="customerservice.link" after="customerservice.link">
<arguments>
<argument name="label" xsi:type="string" translate="false">Customer Service</argument>
<argument name="path" xsi:type="string" translate="false">customer-service</argument>
</arguments>
</block>
</container>
<move element="custom-content" destination="header.links" />
And don't forgot to clear cache.