Cách tiếp cận của tôi hơi khác một chút nhưng có lẽ là bằng chứng trong tương lai hơn, trong trường hợp thêm các tab mới sau này và thay đổi mức độ ưu tiên / thứ tự của các tab này.
Tôi đã chuyển một đối số cho mỗi tab thông qua Tệp XML trong tệp XML chủ đề của mình
...
<arguments>
<argument name="priority" xsi:type="string">REPLACE WITH SOME NUMBER</argument>
</arguments>
...
Vì vậy, tệp XML chủ đề của tôi trông giống như thế này:
<referenceBlock name="product.info.details">
<referenceBlock name="product.info.description">
<arguments>
<argument name="priority" xsi:type="string">1</argument>
</arguments>
</referenceBlock>
<referenceBlock name="product.attributes">
<arguments>
<argument name="priority" xsi:type="string">3</argument>
</arguments>
</referenceBlock>
<referenceBlock name="reviews.tab">
<arguments>
<argument name="priority" xsi:type="string">4</argument>
</arguments>
</referenceBlock>
<!-- MY OWN CUSTOM BLOCK ON THE SECOND POSITION -->
<block class="Magento\Catalog\Block\Product\View\Description" name="product.features" as="features" template="product/view/features.phtml" group="detailed_info">
<arguments>
<argument translate="true" name="title" xsi:type="string">Features</argument>
<argument name="priority" xsi:type="string">2</argument>
</arguments>
</block>
<!-- MY OWN CUSTOM BLOCK ENDS HERE -->
</referenceBlock>
Hơn nữa chúng ta phải điều chỉnh details.phtml
, vì vậy hãy sao chép nó từ
<magento_root>/vendor/magento-catalog-view/frontend/templates/product/view/details.phtml
đến
<magento_root>/app/design/frontend/<Vendor>/<theme>/Magento_Catalog/templates/product/view/details.phtml
Xin lưu ý rằng bản thân của magento details.phtml
có thể được thay đổi trong các phiên bản hoặc bản vá Magento trong tương lai. Những thay đổi này cũng nên được áp dụng cho chủ đề của bạndetails.phtml
Bây giờ chúng ta cần có mức độ ưu tiên mà chúng ta đã chuyển qua tệp XML.
<?php
/**
* Copyright © 2016 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
// @codingStandardsIgnoreFile
?>
<?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'];
});
?>
<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; ?>
Vì vậy, bạn thấy: Bạn chỉ cần thêm một vài dòng và luôn có thể thay đổi mức độ ưu tiên / thứ tự của các tab thông qua tệp xml, bạn không phải thay đổi details.phtml
trong tương lai nữa.