Magento 2：将自定义链接/制表符和页面添加到客户帐户边栏

不二不三发表回复 阅读(9135)

本文显示了如何在“客户帐户”侧边栏部分中添加自定义链接或选项卡。

当您单击客户帐户侧边栏中的新添加的自定义链接时，我还将展示如何添加/显示自定义页面。

因此，基本上，我们将添加一个自定义链接并将其链接到自定义页面。自定义页面还将包含显示的客户帐户边栏。

这是您的操作方式：

假设您的模块名称为YourNamespace_YourModule。

1）创建customer_account布局XML文件

在以下位置创建布局文件：


app/code/YourNamespace/YourModule/view/frontend/layout/customer_account.xml

在这里，我添加了两种方法（一种已被注释掉）在客户帐户导航侧栏中添加自定义链接。

–一个将链接添加到侧边栏列表的底部
–另一个具有sortOrder功能，可以按任何自定义顺序对自定义链接进行排序 

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="customer_account_navigation">
            <!-- Add menu to the end of the sidebar -->
            <block class="Magento\Framework\View\Element\Html\Link\Current" name="customer-account-navigation-your-first-link">
                <arguments>
                    <argument name="path" xsi:type="string">yourmodule/yourfirstlink/index</argument>
                    <argument name="label" xsi:type="string">Your First Link</argument>
                </arguments>
            </block>
            <block class="Magento\Framework\View\Element\Html\Link\Current" name="customer-account-navigation-your-second-link">
                <arguments>
                    <argument name="path" xsi:type="string">yourmodule/yoursecondlink/index</argument>
                    <argument name="label" xsi:type="string">Your Second Link</argument>
                </arguments>
            </block>
 
            <!-- Add menu in the sidebar with sort order -->
            <!--
            <block class="Magento\Customer\Block\Account\SortLinkInterface" name="customer-account-navigation-your-first-link">
                <arguments>
                    <argument name="path" xsi:type="string">yourmodule/yourfirstlink/index</argument>
                    <argument name="label" xsi:type="string">Your First Link</argument>
                    <argument name="sortOrder" xsi:type="number">250</argument>
                </arguments>
            </block>
            <block class="Magento\Customer\Block\Account\SortLinkInterface" name="customer-account-navigation-your-second-link">
                <arguments>
                    <argument name="path" xsi:type="string">yourmodule/yoursecondlink/index</argument>
                    <argument name="label" xsi:type="string">Your Second Link</argument>
                    <argument name="sortOrder" xsi:type="number">260</argument>
                </arguments>
            </block>
            -->
        </referenceBlock>
    </body>
</page>

单击时显示活动菜单链接

在客户侧边栏导航中显示活动菜单链接存在一个问题。

单击我的自定义链接，显示了我的自定义页面，但未突出显示该自定义链接。突出显示活动菜单链接可以轻松确定我们所处的页面。

要解决此问题，我必须删除XML代码中的“操作”路径。

在上面的XML代码中，您可以看到我将自定义菜单路径定义为： 

<argument name="path" xsi:type="string">yourmodule/yourfirstlink/index</argument>

这里，

yourmodule =我的模块名称
yourfirstlink =我的模块的控制器名称
索引=我的控制器的操作

我从路径中删除了“索引”文本，如下所示： 

<argument name="path" xsi:type="string">yourmodule/yourfirstlink</argument>

然后，解决了活动链接问题。现在，当我单击自定义菜单链接时，该链接将突出显示。

奖金提示：

您还可以通过在customer_account.xml自定义模块内部创建的文件中写入删除代码来删除客户侧边栏菜单项。

文件：app / code / YourNamespace / YourModule / view / frontend / layout / customer_account.xml 

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="customer-account-navigation-wish-list-link" remove="true"/>
    </body>
</page>

2）创建模块的布局XML文件

我们定义了两个链接。上面的XML代码中定义的链接的路径为：

– yourmodule / yourfirstlink / index
– yourmodule / yoursecondlink / index

这些路径指示模块的控制器类路径。这些路径还应该与布局XML文件名匹配。因此，我们为每个指定的路径创建两个不同的XML文件。

注意： 

<update handle="customer_account"/>

此代码在以下XML文件中很重要。没有此代码，客户侧边栏导航菜单将不会出现在您的自定义页面中。


app/code/YourNamespace/YourModule/view/frontend/layout/yourmodule_yourfirstlink_index.xml

我们指定我们的自定义Block类，并将其链接到我们的firstlink phtml文件。 

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <update handle="customer_account"/>
    <head>
        <title>
            Your First Link
        </title>
    </head>
    <body>
        <referenceContainer name="content">
            <block class="YourNamespace\YourModule\Block\YourBlock" name="yourmodule.firstlink.index" template="YourNamespace_YourModule::yourfirstlink/index.phtml" cacheable="false" />
        </referenceContainer>
    </body>
</page>

app/code/YourNamespace/YourModule/view/frontend/layout/yourmodule_yourfirstlink_index.xml

我们指定一个通用的Template块类，并将其链接到第二个链接phtml文件。 

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <update handle="customer_account"/>
    <head>
        <title>
            Your Second Link
        </title>
    </head>
    <body>
        <referenceContainer name="content">
            <block class="Magento\Framework\View\Element\Template" name="yourmodule.secondlink.index" template="YourNamespace_YourModule::yoursecondlink/index.phtml" cacheable="false" />
        </referenceContainer>
    </body>
</page>

3）创建控制器类文件

我们在布局XML文件中指定了两个控制器路径。因此，我们创建了两个控制器类。

app/code/YourNamespace/YourModule/Controller/YourFirstLink/Index.php 

<?php
namespace YourNamespace\YourModule\Controller\YourFirstLink;
 
class Index extends \Magento\Framework\App\Action\Action
{
        /**
         * @var \Magento\Framework\View\Result\PageFactory
         */
        protected $resultPageFactory;
 
        /**
         * @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);
        }
    /**
     * Default customer account page
     *
     * @return void
     */
    public function execute()
    {
        return $this->resultPageFactory->create();
    }
}
?>

app/code/YourNamespace/YourModule/Controller/YourSecondLink/Index.php 

<?php
namespace YourNamespace\YourModule\Controller\YourSecondLink;
 
class Index extends \Magento\Framework\App\Action\Action
{
        /**
         * @var \Magento\Framework\View\Result\PageFactory
         */
        protected $resultPageFactory;
 
        /**
         * @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);
        }
    /**
     * Default customer account page
     *
     * @return void
     */
    public function execute()
    {
        return $this->resultPageFactory->create();
    }
}
?>

4）创建Block类文件

对于我们的第一个链接，我们定义了自己的自定义Block类。因此，我们现在创建Block类。

app/code/YourNamespace/YourModule/Block/YourBlock.php 

<?php
namespace YourNamespace\YourModule\Block;
class YourBlock extends \Magento\Framework\View\Element\Template
{        
    public function __construct(
        \Magento\Backend\Block\Template\Context $context,        
        array $data = []
    )
    {        
        parent::__construct($context, $data);
    }
    
    public function getHelloWorld()
    {
        return 'Hello World';
    }
    
}
?>

4）创建模板文件

app/code/YourNamespace/YourModule/view/frontend/templates/firstlink/index.phtml 

<h2>
    <?php echo $block->getHelloWorld(); ?>
</h2>
 
echo 'My First Link Page';

app/code/YourNamespace/YourModule/view/frontend/templates/secondlink/index.phtml 

echo 'My Second Link Page';

希望这可以帮助。谢谢。

赏 赞(0)
分享
微信
支付宝
微信二维码图片

用微信扫描二维码打赏

支付宝二维码图片

用支付宝扫描二维码打赏

相关文章

0 0 投票数
文章评分
订阅评论
提醒
0 评论
内联反馈
查看所有评论