CoderFunda
  • Home
  • About us
    • Contact Us
    • Disclaimer
    • Privacy Policy
    • About us
  • Home
  • Php
  • HTML
  • CSS
  • JavaScript
    • JavaScript
    • Jquery
    • JqueryUI
    • Stock
  • SQL
  • Vue.Js
  • Python
  • Wordpress
  • C++
    • C++
    • C
  • Laravel
    • Laravel
      • Overview
      • Namespaces
      • Middleware
      • Routing
      • Configuration
      • Application Structure
      • Installation
    • Overview
  • DBMS
    • DBMS
      • PL/SQL
      • SQLite
      • MongoDB
      • Cassandra
      • MySQL
      • Oracle
      • CouchDB
      • Neo4j
      • DB2
      • Quiz
    • Overview
  • Entertainment
    • TV Series Update
    • Movie Review
    • Movie Review
  • More
    • Vue. Js
    • Php Question
    • Php Interview Question
    • Laravel Interview Question
    • SQL Interview Question
    • IAS Interview Question
    • PCS Interview Question
    • Technology
    • Other

23 February, 2022

4 Steps to add Custom Tab in Customer Account in Magento 2

 Programing Coderfunda     February 23, 2022     Magento 2, MAGENTO TUTORIALS     No comments   

 

4 Steps to add Custom Tab in Customer Account in Magento 2

In this article, I will introduce how to add Custom Tab in Customer Account in Magento 2. A detailed and simple guide is coming to know.

Regarding the default setting of Magento 2, customers will be redirected automatically to their account dashboard after signing up or logging in. In this dashboard, there are various tabs such as My Account, My Orders, My Wishlist.

However, in some particular situations, to enhance customers experience while shopping, several features like checking demo products, requesting refunds, or other custom requirements need to be added to customer account dashboard. Sadly, these features are not being offered in the default Magento 2. Therefore, in today’s post, I will show you 4 simple stages to add a custom tab in customers account.

How to add Custom Tab in Customer Account in 4 steps

  • Step 1: Create Customer Account Layout
  • Step 2: Create Index Layout
  • Step 3: Create Index Page
  • Step 4: Create Template File

Step 1: Create Customer Account Layout

Firstly, you will need to create the file customer_account.xml in the path Mageplaza/Module/view/frontend/layout

<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-custom">
<arguments>
<argument name="path" xsi:type="string">routename/customer/index</argument>
<argument name="label" xsi:type="string">My Custom Tab</argument>
</arguments>
</block>
</referenceBlock>
</body>
</page>

Step 2: Create Index Layout

After creating the above file, also in the path Mageplaza/Module/view/frontend/layout, create routename_customer_index.xml which includes the below code:

<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">My Custom Tab</argument> 
</action> 
</referenceBlock> 
<referenceContainer name="content"> 
<block class="Magento\Framework\View\Element\Template" name="my_tab" template="Vendor_Module::mytab.phtml"> 
</block> 
</referenceContainer> 
</body> 
</page>

Step 3: Create Index Page

Then go to Mageplaza/Module/Controller/Customer, and create Index.php

<?php 
namespace Mageplaza/Module\Controller\Customer;  
class Index extends \Magento\Framework\App\Action\Action { 
public function execute() { 
$this->_view->loadLayout(); 
$this->_view->renderLayout(); 
} 
} 
?>

Step 4: Create Template File

Finally, it’s easy to add custom tab in customer account dashboard, you only need follow the path Mageplaza/Module/view/frontend/templates and create mytab.phtml.

<?php 
// Add Some Code Here for design
?>
<span> My Custom Tab.. </span>

Stick to above easy-to-follow steps to successfully add a Custom Tab in Customer account. After you finish all of the steps, don’t forget to double check the results or if there something is off the right track.


  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg
Email ThisBlogThis!Share to XShare to Facebook
Newer Post Older Post Home

0 comments:

Post a Comment

Thanks

Meta

Popular Posts

  • Sitaare Zameen Par Full Movie Review
     Here’s a  complete Vue.js tutorial for beginners to master level , structured in a progressive and simple way. It covers all essential topi...
  • Writing and debugging Eloquent queries with Tinkerwell
    In this article, let's look into the options that you can use with Tinkerwell to write and debug Eloquent queries easier. The post Wr...
  • The token request was rejected by the remote server
    error:invalid_granterror_description:The token request was rejected by the remote server.error_uri: https://documentation.openiddict.com/err...
  • Laravel Search String
      Laravel Search String is a package by   Loris Leiva   that generates database queries based on one unique string using a simple and custom...
  • AI foot tracking model
    I am a student doing a graduation project. I urgently need to deal with this model (I am attaching a link). I've never worked with pytho...

Categories

  • Ajax (26)
  • Bootstrap (30)
  • DBMS (42)
  • HTML (12)
  • HTML5 (45)
  • JavaScript (10)
  • Jquery (34)
  • Jquery UI (2)
  • JqueryUI (32)
  • Laravel (1017)
  • Laravel Tutorials (23)
  • Laravel-Question (6)
  • Magento (9)
  • Magento 2 (95)
  • MariaDB (1)
  • MySql Tutorial (2)
  • PHP-Interview-Questions (3)
  • Php Question (13)
  • Python (36)
  • RDBMS (13)
  • SQL Tutorial (79)
  • Vue.js Tutorial (69)
  • Wordpress (150)
  • Wordpress Theme (3)
  • codeigniter (108)
  • oops (4)
  • php (853)

Social Media Links

  • Follow on Twitter
  • Like on Facebook
  • Subscribe on Youtube
  • Follow on Instagram

Pages

  • Home
  • Contact Us
  • Privacy Policy
  • About us

Blog Archive

  • July (4)
  • September (100)
  • August (50)
  • July (56)
  • June (46)
  • May (59)
  • April (50)
  • March (60)
  • February (42)
  • January (53)
  • December (58)
  • November (61)
  • October (39)
  • September (36)
  • August (36)
  • July (34)
  • June (34)
  • May (36)
  • April (29)
  • March (82)
  • February (1)
  • January (8)
  • December (14)
  • November (41)
  • October (13)
  • September (5)
  • August (48)
  • July (9)
  • June (6)
  • May (119)
  • April (259)
  • March (122)
  • February (368)
  • January (33)
  • October (2)
  • July (11)
  • June (29)
  • May (25)
  • April (168)
  • March (93)
  • February (60)
  • January (28)
  • December (195)
  • November (24)
  • October (40)
  • September (55)
  • August (6)
  • July (48)
  • May (2)
  • January (2)
  • July (6)
  • June (6)
  • February (17)
  • January (69)
  • December (122)
  • November (56)
  • October (92)
  • September (76)
  • August (6)

Loading...

Laravel News

Loading...

Copyright © CoderFunda | Powered by Blogger
Design by Coderfunda | Blogger Theme by Coderfunda | Distributed By Coderfunda