关于 Magento 2 的默认设置,客户在注册或登录后将自动重定向到其帐户仪表板。在此仪表板中,有各种选项卡,例如“我的帐户”、“我的订单”、“我的愿望清单”。

然而,在某些特定情况下,为了增强客户购物体验,需要在客户帐户仪表板中添加一些功能,例如检查演示产品、请求退款或其他自定义要求。遗憾的是,默认的 Magento 2 中并未提供这些功能。因此,在今天的帖子中,我将向您展示在客户帐户中添加自定义选项卡的 4 个简单阶段

如何通过 4 个步骤在客户帐户中添加自定义选项卡

  • 第 1 步:创建客户帐户布局
  • 第 2 步:创建索引布局
  • 第 3 步:创建索引页
  • 第四步:创建模板文件

第 1 步:创建客户帐户布局

首先,您需要customer_account.xml在路径中创建文件Example/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>

第 2 步:创建索引布局

创建上述文件后,也在路径中Example/Module/view/frontend/layout创建,routename_customer_index.xml其中包含以下代码:

<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>

第 3 步:创建索引页

然后转到Example/Module/Controller/Customer并创建Index.php

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

第四步:创建模板文件

最后,在客户帐户仪表板中添加自定义选项卡很容易,您只需遵循路径Example/Module/view/frontend/templates并创建mytab.phtml.

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