Magento2在产品详情页添加自定义选项卡
当您希望成功运营电商网站时,客户满意度是主要的。
我们可以尽可能的去描述产品的特性及其他方面的展示,这样每个客户都可以了解得到他们想要了解的,自然也会提高购买欲望。
为此,我将教您如何在Magento 2中添加自定义选项卡以获取产品详细信息。
添加新属性和添加属性集
打开Magento 2的管理面板,进入Stores → Product,然后单击Add New Attribute按钮。
现在插入Attribute的详细信息。将默认标签设置为Tab,将属性代码设置为tab.现在只需单击Save Attribute。
转到Stores → Attribute Set,然后单击Add Attribute Set.
插入Laptop作为Attribute Set的名称,然后单击Save.
现在将选项卡从Unassigned Attributes移动到Product Details,然后单击Save.
产品页面配置
从商店的管理面板打开产品编辑页面,然后从Attribute Set下拉列表中选择“ Laptop ” 。
向下滚动产品编辑页面,您将看到一个新的文本字段Tab。添加 Tab Created 到在此文本字段中,然后单击“Save
创建模块
现在我要创建一个自定义模块。如果您对如何创建一个没有任何知识,可以查看此分步指南:如何在Magento 2中创建模块。
模块配置
在app/code/Alwayly/Mymodule/etc创建module.xml文件并将此代码粘贴到其中:
<?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd"> <module name="Alwayly_Mymodule" setup_version="2.0.0" /> </config>
模块注册
在app/code/Alwayly/Mymodule目录下创建registration.php文件,并将此代码粘贴:
<?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Alwayly_Mymodule', __DIR__ );
创建前端布局文件
在app/code/Alwayly/Mymodule/view/frontend/layout中创建catalog_product_view.xml并将此代码添加:
<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceBlock name="product.info.details"> <block class="Magento\Catalog\Block\Product\View" name="tab.tab" template="Alwayly_Mymodule::extra_tab.phtml" group="detailed_info" > <arguments> <argument translate="true" name="title" xsi:type="string">Extra Tab</argument> </arguments> </block> </referenceBlock> </body> </page>
创建模板文件
在app/code/Alwayly/Mymodule/view/frontend/templates中创建extra_tab.phtml文件并将此代码粘贴到其中:
<?php $product = $block->getProduct(); ?> <h1 style="color: #ff6e17"><?php echo $product->getData('tab'); ?></h1>
现在我们需要运行命令。
注意:以下所有命令都必须在Magento 2的根目录中运行。
运行此命令:
php bin/magento module:status
如果您在禁用列表中找到该模块,则必须通过运行以下命令来启用它:
php bin/magento module:enable Alwayly_Mymodule
最后,只需运行下面这些命令:
php bin/magento setup:upgrade php bin/magento cache:clean php bin/magento cache:clean
打开网站的产品页面,您将看到以下的自定义标签: