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.
Follow the below steps.
Step 1: Create customer_account.xml
File Path: app/code/Dolphin/CustaccountTab/view/frontend/layout/customer_account.xml
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | <?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
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <?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
| 1 2 3 4 5 6 7 8 | <?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
| 1 2 3 4 5 6 7 8 9 10 11 12 | <?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
| 1 2 3 4 | <?php // Add your tab content here. echo "Dolphin custom tab content goes here"; |
Output :
That’s it. Happy Coding with magento2!! 🙂 Feel free to comment if you have any issue.
