Magento 2 product detail page 的 tab 指的是下图中红色框中的选项卡。 假设我想把 More information 改成 Specifications 并且让他在第一个位置，Details 改名为 Description 位于第二个位置。 
博主试过使用 Magento 的 before 和 after 来更改 tab 的顺序，但是没有成功（这不代表这个方法就一定不可以，此处仅是记录一下，以后有机会可以研究为什么没有成功。） 以下是一个成功的方法。通过 catalog_product_view.xml 来修改名称参数，并传递了一个额外的参数用来控制显示的顺序，修改了 details.phtml 来使用该参数，以达到排序的效果。
第一步：layout xml 的修改
我们的修改位于主题层面 <magento_root>/app/design/frontend/<Vendor>/<theme>/Magento_Catalog/layout/catalog_product_view.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| <?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 使用传递的参数排序。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
| <?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 的回答