如何在产品页面 Magento 2 中添加自定义选项卡

redmaomail 2024-07-24 18:17 阅读数 58 #Magento

在 Magento 2 的产品页面中添加自定义选项卡的 5 个步骤：

第 1 步：定义模板和布局文件
第 2 步：重命名产品选项卡
第 3 步：删除产品标签
第 4 步：添加自定义选项卡
第 5 步：在标签式导航中添加相关产品

第 1 步：定义模板和布局文件

首先，您需要定义要自定义的模板和布局文件。一种可以帮助您做到这一点的有效方法是通过 Magento 管理员启用和添加Template Path Hints。现在，您将看到负责产品信息选项卡的 Magento 模块，您现在可以开始自定义。Block NamesHintsStores > Configuration > Advanced > Developer > Debugmodule-catalog

第 2 步：重命名产品选项卡

在为产品选项卡设置另一个标题之前，您需要覆盖catalog_product_view.xml可以在vendor/module_catalog文件夹中找到的基本布局文件。覆盖这个文件的标准方法是在你的主题范围内创建一个新的布局文件，然后像基本文件一样命名它。以下是您的文件路径的样子： app/design/frontend/<Mageplaza>/<Theme>/Magento_Catalog/layout/catalog_product_view.xml

这是文件内的代码：

 
  <?xml version="1.0"?>
<page layout="1column" 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">                
      <referenceBlock name="product.info.description">
        <arguments>
          <argument name="title" translate="true" xsi:type="string">Description</argument>
        </arguments>
      </referenceBlock>
    </referenceBlock>
  </body>
</page>
 
 

在上面的代码中，第一个布局处理程序<referenceBlock name="product.info.details">用于整体引用您的产品选项卡式导航。同时，子处理程序<referenceBlock name="product.info.description">引用单个选项卡，在此示例中是您的案例详细信息选项卡。

通过使用<argument name="title" translate="true" xsi:type="string">，您可以为标签设置新标题。请注意，处理程序<arguments>只是一个容器<argument>，它没有自己的属性。

第 3 步：删除产品标签

删除产品标签是一项非常简单的任务。您只需要引用您的目标块并将 remove 属性设置为 true。

波纹管是the catalog_product_view.xml：

 
  <?xml version="1.0"?>
<page layout="1column" 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.review" remove="true" />
  </body>
</page>
 
 

第 4 步：添加自定义选项卡

波纹管是您可以向产品页面添加自定义选项卡的方式：首先，转到 Magento 管理员并创建一个新属性。然后，为其命名并将其Packaging添加到default属性集。

完成上述步骤后，您需要创建一个新的模板文件。该文件可以命名为packaging-content.phtml并保存在app/design/frontend/<Magplaza>/<Theme>/Magento_Catalog/templates/product/view/.

接下来，将此代码粘贴到文件中：

 
  <?php
$_helper = $this->helper('Magento\Catalog\Helper\Output');
$_product = $block->getProduct();
$_code = $block->getAtCode();
$_className = $block->getCssClass();
$_attributeLabel = $block->getAtLabel();
$_attributeType = $block->getAtType();
$_attributeAddAttribute = $block->getAddAttribute();
if ($_attributeLabel && $_attributeLabel == 'default') {
    $_attributeLabel = $_product->getResource()->getAttribute($_code)->getFrontendLabel();
}
  $_attributeValue = $_product->getResource()->getAttribute($_code)->getFrontend()->getValue($_product);
?>
 
<?php if ($_attributeValue): ?>
    <div class="packaging-content" <?php  echo $_attributeAddAttribute;?>>
        <?php echo $_attributeValue; ?>
    </div>
<?php endif; ?>
 
 

确保 NB 属性集与 if 语句中第 9 行的字符串值匹配。

最后，将以下代码放入您的布局文件中catalog_product_view.xml：

 
  <?xml version="1.0"?>
<page layout="1column" 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\Description" name="packaging-content" template="Magento_Catalog::product/view/packaging-content.phtml" group="detailed_info">
        <arguments>
          <argument name="at_call" xsi:type="string">getPackaging</argument>
          <argument name="at_code" xsi:type="string">packaging</argument>
          <argument name="css_class" xsi:type="string">packaging</argument>
          <argument name="at_label" xsi:type="string”>packaging</argument>
          <argument name="add_attribute" xsi:type="string">itemprop="packaging"</argument>
          <argument name="title" translate="true" xsi:type="string">Packaging content</argument>
        </arguments>
      </block>
    </referenceBlock>
  </body>
</page>
 
 

第 5 步：在标签式导航中添加相关产品

为了在选项卡式导航中添加相关产品，您需要编辑两个文件，即模板和布局。

使用模板文件，将其命名为related-products.phtml并保存为app/design/frontend/<Mageplaza>/<Theme>/Magento_Catalog/templates/product/. 该文件将只有一个代码行：

<?php echo $this->getBlockHtml('catalog.product.related'); ?>

命名的布局文件catalog_product_view.xml如下所示：

 
  <?xml version="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance";; xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
  <body>
    <!— 1st Code Block: Get Related Products as new tab -->
    <referenceBlock name="product.info.details">
      <block class="Magento\Catalog\Block\Product\View" name="deliveryinfo.tab" as="deliveryinfo" template="Magento_Catalog::product/related-products.phtml" group="detailed_info" >
        <arguments>
          <argument translate="true" name="title" xsi:type="string">Related Products</argument>
        </arguments>
      </block>
    </referenceBlock>
 
    <!— 2nd Code Block: Move original block to product info tabs -->
    <move element="catalog.product.related" destination="product.info.details" />
  </body>
</page>
 
 

第一个代码用于设置包含相关产品的新选项卡。第二个代码用于将您的upsell-products.phtml模板文件更改为：

<?php echo $this->getBlockHtml('product.info.upsell'); ?>

以下是您需要在布局文件中进行的一些自定义：

第 6 行：将模板文件的名称更改为upsell-products.phtml.
第 8 行：将标签命名为You might be interested.
第 14 行：将属性添加到product.info.upsell.

结论

总之，在产品页面的选项卡式导航中自定义和添加自定义选项卡并不难。我希望在阅读这篇文章后，您将能够通过添加一些 CSS 样式轻松地拥有包含新自定义内容的新标签。

分享到：

上一篇：在Magento2中使用弹出窗口小部件jQuery 下一篇：配置 Magento 2 结帐选项