如何修改 Magento 2 product detail page 的 tab 名称和顺序

Magento 2 product detail page 的 tab 指的是下图中红色框中的选项卡。

假设我想把 More information 改成 Specifications 并且让他在第一个位置,Details 改名为 Description 位于第二个位置。

博主试过使用 Magento 的 beforeafter 来更改 tab 的顺序,但是没有成功(这不代表这个方法就一定不可以,此处仅是记录一下,以后有机会可以研究为什么没有成功。)

以下是一个成功的方法。通过 catalog_product_view.xml 来修改名称参数,并传递了一个额外的参数用来控制显示的顺序,修改了 details.phtml 来使用该参数,以达到排序的效果。

第一步:layout xml 的修改

我们的修改位于主题层面

<magento_root>/app/design/frontend/<Vendor>/<theme>/Magento_Catalog/layout/catalog_product_view.xml

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2016 SW-THEMES. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page layout="2columns-right" 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.attributes">
                <arguments>
                    <argument name="title" translate="true" xsi:type="string">Specifications</argument>
                    <argument name="priority" xsi:type="string">1</argument>
                </arguments>
            </referenceBlock>
            <referenceBlock name="product.info.description">
                <arguments>
                    <argument name="title" translate="true" xsi:type="string">Description</argument>
                    <argument name="priority" xsi:type="string">2</argument>
                </arguments>
            </referenceBlock>
            <referenceBlock name="reviews.tab">
                <arguments>
                    <argument name="priority" xsi:type="string">3</argument>
                </arguments>
            </referenceBlock>
        </referenceBlock>
    </body>
</page>

第二步:修改 details.phtml

拷贝
<magento_root>/vendor/magento-catalog-view/frontend/templates/product/view/details.phtml

<magento_root>/app/design/frontend/<Vendor>/<theme>/Magento_Catalog/templates/product/view/details.phtml

修改拷贝后的 details.phtml 使用传递的参数排序。

<?php if ($detailedInfoGroup = $block->getGroupChildNames('detailed_info', 'getChildHtml')):?>
    <div class="product info detailed">
        <?php $layout = $block->getLayout(); ?>
        <?php
            # We create a new array;
            $newPriority = array();
            # forEach the original $detailedInfoGroup Array;
            foreach ($detailedInfoGroup as $name){
                $alias = $layout->getElementAlias($name);
                # Get the priority which we applied via xml file
                # If no priority is applied via xml file then just set it to 10
                $priority = $block->getChildData($alias,'priority') ? $block->getChildData($alias,'priority') : '10';
                # variables pushed into new two-dimensional array
                array_push($newPriority, array($name, $priority));
            }
            # Sort array by priority
            usort($newPriority, function($a, $b) {
                # return $a['1'] <=> $b['1'];
                if ($a == $b) {
                    return 0;
                }
                return ($a < $b) ? -1 : 1;
            });
        ?>
        <div class="product data items" data-mage-init='{"tabs":{"openedState":"active"}}'>
            <?php
            # Delete the original forEach statement
            #foreach ($detailedInfoGroup as $name)
            foreach ($newPriority as $name):?>
                <?php
                    # rename $name[0] to $name because it's a two-dimensional array
                    # No further changes to this file, it works as explained
                    $name = $name[0];
                    $html = $layout->renderElement($name);
                    if (!trim($html)) {
                        continue;
                    }
                    $alias = $layout->getElementAlias($name);
                    $label = $block->getChildData($alias, 'title');
                ?>
                <div class="data item title"
                     aria-labeledby="tab-label-<?php /* @escapeNotVerified */ echo $alias;?>-title"
                     data-role="collapsible" id="tab-label-<?php /* @escapeNotVerified */ echo $alias;?>">
                    <a class="data switch"
                       tabindex="-1"
                       data-toggle="switch"
                       href="#<?php /* @escapeNotVerified */ echo $alias; ?>"
                       id="tab-label-<?php /* @escapeNotVerified */ echo $alias;?>-title">
                        <?php /* @escapeNotVerified */ echo $label; ?>
                    </a>
                </div>
                <div class="data item content" id="<?php /* @escapeNotVerified */ echo $alias; ?>" data-role="content">
                    <?php /* @escapeNotVerified */ echo $html; ?>
                </div>
            <?php endforeach;?>
        </div>
    </div>
<?php endif; ?>

然后刷新缓存就奏效了。将来 Magento 升级,可能 detail.phtml 会有更改,所以模版层面的更改,要注意更新。

参考文档

Set position or order of a new tab on the product detail page in Magento2-juhanix 的回答

发表评论

电子邮件地址不会被公开。 必填项已用*标注