Add, Remove or Reorder links in My Account Navigation – Magento 2

my_account_links_magento_2

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="Magento\Framework\View\Element\Html\Link\Current" 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 Codextblog\Purchase\Controller\Index;

class Index extends \Magento\Framework\App\Action\Action
{

    protected $resultPageFactory;

    /**
     * Constructor
     *
     * @param \Magento\Framework\App\Action\Context  $context
     * @param \Magento\Framework\View\Result\PageFactory $resultPageFactory
     */
    public function __construct(
        \Magento\Framework\App\Action\Context $context,
        \Magento\Framework\View\Result\PageFactory $resultPageFactory
    ) {
        $this->resultPageFactory = $resultPageFactory;
        parent::__construct($context);
    }

    /**
     * Execute view action
     *
     * @return \Magento\Framework\Controller\ResultInterface
     */
    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="Magento\Framework\View\Element\Template" 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.

Custom My Account Link
Custom My Account Link

 

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.

Leave a Comment

(0 Comments)

All the comments are goes into moderation before approval. Please do not spam. Your email address will not be published. Required fields are marked *

Enjoy this post? Please support Us!

Like our social page for daily new updates….


Want to become
a Magento 2 Expert?

If Yes! Then Subscribe to our newsletter and get weekly article to you email id.
Subscribe Here
SUBSCRIBE NOW
close-link

To Avoid Spam Downloads, We Want Your Email

We will send you download link right
away. Please submit form below.
SEND ME DOWNLOAD LINK
Close