Magento2在产品详情页添加自定义选项卡

redmaomail 2024-07-24 18:16 阅读数 64 #Magento

红帽云邮外贸主机

当您希望成功运营电商网站时,客户满意度是主要的。

我们可以尽可能的去描述产品的特性及其他方面的展示,这样每个客户都可以了解得到他们想要了解的,自然也会提高购买欲望。

为此,我将教您如何在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

打开网站的产品页面,您将看到以下的自定义标签:

Magento 2中添加了自定义选项卡


红帽云邮外贸主机

分享到:
版权声明:本站内容源自互联网,如有内容侵犯了你的权益,请联系删除相关内容。
    红帽云邮外贸主机
热门
    红帽云邮外贸主机
    红帽云邮外贸主机