本内容转载自maxiaoke.com，magento专区。无论是水平（更常见）还是垂直，选项卡都是通过将大型内容组织成易于消化的数据块来避免信息过载的好方法。如果做得好，它们提供所有信息（与一个特定主题相关），而不会让用户不知所措，允许他们通过一次仅显示一个选项卡中的数据来快速浏览内容。从用户体验的角度来看，标签的主要目的是简单地促进对信息的访问，并且知道它们不会以任何方式对您的SEO和网站排名产生任何负面影响也很有用。
在Magento中，与大多数其他电子商务平台一样，产品页面上使用选项卡式导航来显示各种产品信息和数据。默认情况下，Luma和Blank主题也是如此，产品页面上有三个选项卡：
–有关产品的详细信息，即描述
–存储产品属性和值
的更多信息 –产品买家和消费者提供的评论
这些选项卡可以轻松自定义，我们将向您展示如何自定义。但是，在我们开始之前，让我们花一些时间来探索并找出我们实际要自定义的模板和布局文件。一种方法是启用模板路径提示并通过Magento管理员将块名称添加到提示中：
Stores => Configuration => Advanced => Developer => Debug
虽然，至少现在我们知道哪个Magento模块（提示：模块目录）负责产品信息选项卡，因此我们可以从自定义开始，这是值得怀疑的。让我们从简单开始。
### 重命名产品选项卡
为了为我们的选项卡设置另一个标题，我们必须覆盖文件夹中的基本布局文件。执行此操作的标准（Magento）方法是在我们的主题范围内创建新的布局文件，并将其命名为与基本文件完全相同的名称。catalog_product_view.xmlvendor/module_catalog
我们的文件路径应如下所示：
app/design/frontend/<Vendor>/<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”>在我们的案例详细信息选项卡中引用单个选项卡。
使用 <参数名称=“title” translate=“true” xsi：type=“string”>我们只需为选项卡设置新标题。 <arguments>处理程序只是<argument>的（必需）容器，它没有自己的属性。
### 删除产品选项卡
这个更简单。我们只需要引用我们的目标块并将 remove 属性设置为 true。所以我们看起来像这样：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>### 添加自定义选项卡
现在，假设我们想在产品信息选项卡中创建一个额外的选项卡，并用内容填充它，例如某些特定属性的值。出于演示目的，假设我们的新选项卡将包含有关产品包装内容的信息。
首先，从Magento管理员那里，我们将创建新属性，让我们命名它并将其添加到属性集中。
接下来，我们将： – 创建新的模板文件，我们可以命名它 – 保存它
： – 粘贴以下代码：
Packagingdefaultpackaging-content.phtmlapp/design/frontend/<Vendor>/<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; ?>注意：属性集（从第一步开始）必须与 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>### 在选项卡式导航中添加相关产品
为了添加相关产品，我们还需要两个文件，模板和布局： 我们的模板文件，我们将命名它并保存它，只有一行代码：
related-products.phtmlapp/design/frontend/<Vendor>/<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） – 选项卡标题为“您可能感兴趣”或类似内容（行： 8） – 元素属性为 （行：
14）
upsell-products.phtmlproduct.info.upsell
总结
从这些示例中可以看出，自定义产品页面选项卡式导航相当容易。添加一些用于样式的CSS，您将在几个小时内拥有带有新自定义内容的新标签。
770
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
