In this code snippet, we will see how to add a custom link in My Account navigation, how to remove a link from My Account navigation and how to reorder a link in My Account navigation.
Add a Custom link
To add a custom link in My Account navigation, we just need to create customer_account.xml under app/code/Codextblog/Purchase/view/frontend/layout directory with below code
<?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="customer_account_navigation">
<block class="MagentoFrameworkViewElementHtmlLinkCurrent" name="customer-account-navigation-purchase">
<arguments>
<argument name="path" xsi:type="string">purchase</argument>
<argument name="label" xsi:type="string">My Purchases</argument>
</arguments>
</block>
</referenceBlock>
</body>
</page>
In above XML, argument path is the frontName of our module in which we have defined the controller, layout and template file. In my case, frontName of the module is purchase. so we need to create an appropriate controller, layout and template file for our module.
Create a controller file Index.php under app/code/Codextblog/Purchase/Controller/Index directory.
<?php
namespace CodextblogPurchaseControllerIndex;
class Index extends MagentoFrameworkAppActionAction
{
protected $resultPageFactory;
/**
* Constructor
*
* @param MagentoFrameworkAppActionContext $context
* @param MagentoFrameworkViewResultPageFactory $resultPageFactory
*/
public function __construct(
MagentoFrameworkAppActionContext $context,
MagentoFrameworkViewResultPageFactory $resultPageFactory
) {
$this->resultPageFactory = $resultPageFactory;
parent::__construct($context);
}
/**
* Execute view action
*
* @return MagentoFrameworkControllerResultInterface
*/
public function execute()
{
$resultPage = $this->resultPageFactory->create();
$resultPage->getConfig()->getTitle()->set('My Purchase');
return $resultPage;
}
}
Create a layout file purchase_index_index.xml file under app/code/Codextblog/Purchase/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">
<update handle="customer_account"/>
<body>
<referenceContainer name="content">
<block as="purchase_index_index" class="MagentoFrameworkViewElementTemplate" name="purchase.index.index" template="Codextblog_Purchase::index/index.phtml"/>
</referenceContainer>
</body>
</page>
Create a template file index.phtml under app/code/Codextblog/view/frontend/templates/index directory
<?php echo "Purchase tab in customer navigation";
After implementing above code you will get your new tab added under customer navigation.
Reorder a link
Now we will see how to reorder a specific link in customer navigation. We will move the Address Book link after My Orders link
Create a xml file customer_account.xml under app/code/Codextblog/Purchase/view/frontend/layout directory and add a code
<?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="customer_account_navigation">
<move element="customer-account-navigation-address-link" destination="customer_account_navigation" after="customer-account-navigation-orders-link" />
</referenceBlock>
</body>
</page>
Remove a link
Using same XML file we can remove the specific link. We will remove Billing agreements link.
Create a xml file customer_account.xml under app/code/Codextblog/Purchase/view/frontend/layout directory and add a code
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="customer_account_navigation">
<referenceBlock name="customer-account-navigation-billing-agreements-link" remove="true"/>
</referenceBlock>
</body>
</page>
Hope this code snippet helps you. If you liked this post, then please like us on Facebook and follow us on Twitter.
