Magento 𝟮

Magento2 | PWA | GraphQL

» » » How to add custom link in header links and top links in Magento 2?

How to add custom link in header links and top links in Magento 2?

By

In this post, you will learn how to add custom url link at header links and top links area in Magento2.

Header link will be displayed for both guest and logged in customer.

But top links will only display if the customer is logged in.

To add custom link in the header and top links, you have to create default.xml file in app/code/Magelearn/customlink/view/frontend/layout directory.

<?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.links">
        	<block class="Magento\Framework\View\Element\Html\Link" ifconfig="section/group/field" name="custom-header-link" template="custom_header_link.phtml">
            	<arguments>
                	<argument name="label" xsi:type="string" translate="true">Custom Header Link</argument>
                	<argument name="path" xsi:type="string">*/*/*</argument>
			<argument name="rel" xsi:type="string">nofollow</argument>
            	</arguments>
        	</block>
    	</referenceBlock>
    	<referenceBlock name="top.links">
        	<block class="Magento\Framework\View\Element\Html\Link" ifconfig="section/group/field" name="custom-top-link" template="custom_top_link.phtml">
            	<arguments>
                	<argument name="label" xsi:type="string" translate="true">Custom Top Link</argument>
                	<argument name="path" xsi:type="string">*/*/*</argument>
			<argument name="rel" xsi:type="string">nofollow</argument>
            	</arguments>
        	</block>
    	</referenceBlock>
    </body>
</page>

In this default.xml file, there is two referenceBlock we have defined

Header.links: To add custom link in header links

Top.links: To add custom link in Top links.

Here, we have passed three arguments:

  • label: The label for anchor link that will display in frontend
  • path: The path of the anchor link. Here you can define the path of your page i.e: route/controller/index
  • rel: Used to pass rel="nofollow" attribute in link. 
You can also display link as per system configuration option. Which you can get with ifconfig. You can find code related with this at below of this post in custom block file.

We have also used templpate variable to display link from custom phtml file. with which you can modify link HTML and also define custom condition in .phtml file as per your requirement.

If you call your custom.phtml file to add custom link then add below code in your .phtml file.
Add file at app/code/Magelearn/Customheaderlink/view/frontend/templates/custom_header_link.phtml
<li class="custom-class-link">
<a <?php /* @escapeNotVerified */ echo $block->getLinkAttributes(); ?>>
    <?php echo $block->escapeHtml($block->getLabel()); ?>
</a>
</li>

After cache flush, you can see custom link in header links and top links.

If the customer is not logged in means for the guest user only custom header link will be shown.

If the customer is logged in then both custom header link and the top link will be shown.

Additional Information

Here, Magento\Framework\View\Element\Html\Link is core Magento block that is used to create a link. If you open Link.php file you will find these two functions

protected function _toHtml() {
if (false != $this->getTemplate()) {
	return parent::_toHtml();
}

return '<li><a ' . $this->getLinkAttributes() . ' >' . $this->escapeHtml($this->getLabel()) . '</a></li>';
}

public function getHref() {
	return $this->getUrl($this->getPath());
}

If you want to add an external website link in your custom header or top link with path argument, it will be not possible.

So for the external website link, you have to create one custom block that extends \Magento\Framework\View\Element\Html\Link and define this block in default.xml file.

In default.xml file, you have to update the block name.

<referenceBlock name="header.links">
    <block class="Magelearn\Customheader\Block\CustomLink" ifconfig="section/group/fieldenable" name="custom-header-link">    	<arguments>
        	<argument name="label" xsi:type="string" translate="true">Custom Header Link</argument>
    	</arguments>
    </block>
</referenceBlock>

Next create CustomLink.php file.

<?php
namespace Magelearn\Customheader\Block;

class CustomLink extends \Magento\Framework\View\Element\Html\Link {
	public function _toHtml() 
    {
        if (
            !$this->_scopeConfig->isSetFlag('section/group/fieldenable') || 
            !$this->_scopeConfig->isSetFlag('section/group/headerlink')
        ) {
            return '';
        }
        return parent::_toHtml();
    }
    public function getHref()
    {
    	return 'https://www.google.com/';
    }

    public function getTarget()
    {
    	return '_blank';
    }
}

Here we have created three function named _toHtml, getHref() and getTarget().

_toHtml: this will check system configuration value and return HTML accordingly.

getHref(): define external link here

getTarget(): I have added target=”_blank” attribute

So now when clicking on header link it will open Google in a new page. You can use different attribute too.

If you refer  \Magento\Framework\View\Element\Html\Link file you will find $allowedAttributes array variable.

protected $allowedAttributes = [
    	'href',
    	'title',
    	'charset',
    	'name',
    	'target',
    	'hreflang',
    	'rel',
    	'rev',
    	'accesskey',
    	'shape',
    	'coords',
    	'tabindex',
    	'onfocus',
    	'onblur', // %attrs
    	'id',
    	'class',
    	'style', // %coreattrs
    	'lang',
    	'dir', // %i18n
    	'onclick',
    	'ondblclick',
    	'onmousedown',
    	'onmouseup',
    	'onmouseover',
    	'onmousemove',
    	'onmouseout',
    	'onkeypress',
    	'onkeydown',
    	'onkeyup', // %events
    ];

You can use these attribute add prefix get and first letter capital from above attribute

Ex. getHref(), getTitle(), getOnclick() etc.

0 Comments On "How to add custom link in header links and top links in Magento 2?"

Back To Top