2

So I wanna add a Link with Icon and the text that says "Contact Us" beside "Mina sidor" in the header. So when u click on Contact Us u are directed to a different page with all contact information.

enter image description here

I have been adding this line of code to my Magento_Theme/layout/default.xml file and after that clearing the cache but nothing happens. I've been looking around but I doesn't seem to find where "Mina sidor" and "Varukorg" are made.

Am I looking in the wrong place?

<referenceBlock name="header.links">
    <block class="Magento\Framework\View\Element\Html\Link" name="new.link" after="register-link">
        <arguments>
            <argument name="label" xsi:type="string" translate="false">New Link</argument>
            <argument name="path" xsi:type="string" translate="false">newlink</argument>
        </arguments>
    </block>
</referenceBlock>
Improve this question

2 Answers 2

Reset to default
0

Create a layout file

<?xml version="1.0"?><page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
    <referenceBlock name="header.panel">
        <block name="customblock" template="Vendor_Module::custom_file.phtml" after="-" />
    </referenceBlock>
</body>

Now create a template file for this as mentioned in layout and write your code for Text, Link or Icon whatever you wish in the template file.

Improve this answer
0

To add a Toplink in your website header, create a custom module and then follow this:

Method#1 Basic link using layout XML

// app/code/Namespace/Modulename/view/frontend/layout/default.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="top.links">
            <block class="Magento\Framework\View\Element\Html\Link\Current" name="whatsapp-link" before="my-account-link">
                <arguments>
                    <argument name="label" xsi:type="string" translate="true">Contact us on Whatsapp</argument>
                    <argument name="path" xsi:type="string">some-path-url-string</argument>
                    <argument name="class" xsi:type="string" translate="false">contact-whatsapp</argument>
                    <argument name="sortOrder" xsi:type="number">100</argument>
                    <argument name="target" xsi:type="string">_blank</argument>
                </arguments>
            </block>       
        </referenceBlock>
    </body>
</page>

By just using this file, you will be able to create a custom top link, and with the added class you can style it in you css/less files.

Method#2 Using Template phtml file Sometimes there are requirements when you need more control over newly added toplinks, or add image or write your own html. For adding a custom toplink using a template, follow this way.

// app/code/Namespace/Modulename/view/frontend/layout/default.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="top.links">
            <block class="Magento\Framework\View\Element\Html\Link\Current" name="whatsapp-link" template="Namespace_Modulename::whatsappLink.phtml">
            </block>       
        </referenceBlock>
    </body>
</page>

And then add the template phtml file defined in xml above in your code as follow.

// app/code/Namespace/Modulename/view/frontend/templates/whatsappLink.phtml
<li class="link whatsapp-link">
    <a href="some-path-url-string" title="Connect via Whatsapp" target="_blank">
        <img class="whatsapp-img" src='<?php echo $this->getViewFileUrl('Namespace_Modulename::images/WhatsApp_logo.png'); ?>' alt="Whatsapp Image">
        <span class="whatsapp-label">Connect via Whatsapp</span>
    </a>
</li>

Using this way, I added my icon with toplink and I can play with it as per requirement.

Improve this answer

Your Answer

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

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