How to Add Custom Tab in Customer Account Dashboard in Magento 2
Add custom tab in customer account in magento 2.
In Magento 2, after login or signup customer will be redirected to their account dashboard . There are many tabs on left side such as Account Dashboard ,My Orders ,My Downloadable Products ,My Wish List ,Billing Agreements etc. So If we need to enhance customer shopping experience or to display some information, I will show you how add new custom tab there. You can also hire Magento 2 developers from Dolphin Web Solution.
Follow the below steps.
Step 1: Create customer_account.xml
File Path: app/code/Dolphin/CustaccountTab/view/frontend/layout/customer_account.xml
<?xml version="1.0" encoding="UTF-8"?>
<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="custom-tab-link">
<arguments>
<argument name="path" xsi:type="string">custaccounttab/customer/index</argument>
<argument name="label" xsi:type="string">Dolphin Custom Tab</argument>
</arguments>
</block>
</referenceBlock>
</body>
</page>
Step 2: Create custaccounttab_customer_index.xml
File Path: app/code/Dolphin/CustaccountTab/view/frontend/layout/custaccounttab_customer_index.xml
<?xml version="1.0" encoding="UTF-8"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
<update handle="customer_account"/>
<body>
<referenceBlock name="page.main.title">
<action method="setPageTitle">
<argument translate="true" name="title" xsi:type="string">Dolphin Custom Tab</argument>
</action>
</referenceBlock>
<referenceContainer name="content">
<block class="Magento\Framework\View\Element\Template" name="custom-tab" template="Dolphin_CustaccountTab::customer/account/customtab.phtml" />
</referenceContainer>
</body>
</page>
Step 3: Create routes.xml
File Path: app/code/Dolphin/CustaccountTab/etc/frontend/routes.xml
<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
<router id="standard">
<route frontName="custaccounttab" id="custaccounttab">
<module name="Dolphin_CustaccountTab"/>
</route>
</router>
</config>
Step 4: Create Index.php
File Path: app/code/Dolphin/CustaccountTab/Controller/Customer/Index.php
<?php
namespace Dolphin\CustaccountTab\Controller\Customer;
class Index extends \Magento\Framework\App\Action\Action
{
public function execute()
{
$this->_view->loadLayout();
$this->_view->renderLayout();
}
}
Step 5: Create customtab.phtml
File Path: app/code/Dolphin/CustaccountTab/view/frontend/templates/customer/account/customtab.phtml
<?php // Add your tab content here. echo "Dolphin custom tab content goes here";
That’s it. Happy Coding with magento2!! ? Feel free to comment if you have any issue.
We can help you with
- Dedicated Team
- Setup Extended Team
- Product Development
- Custom App Development
Our Offices
AHMEDABAD (INDIA)
B-203, B-204, Empire Business Hub, Science City Road, Sola, Ahmedabad – 380060
BERLIN (GERMANY)
Badensche Str. 28, 10715 Berlin, Germany
CALIFORNIA (USA)
9601 Reseda Blvd, Apt#223, Northridge CA-91324, USA
ALBERTA (CANADA)
302 Skyview Ranch Drive NE, Calgary, Alberta, Canada T3N0P5
