Mi enfoque es un poco diferente, pero probablemente más a prueba de futuro, en caso de agregar nuevas pestañas más adelante y cambiar la prioridad / orden de estas pestañas.
Pasé un argumento para cada pestaña a través del archivo XML en mi archivo XML de temas
...
<arguments>
<argument name="priority" xsi:type="string">REPLACE WITH SOME NUMBER</argument>
</arguments>
...
Entonces mi archivo XML de temas se ve así:
<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>
Además, tenemos que ajustar el details.phtml
, así que cópielo de
<magento_root>/vendor/magento-catalog-view/frontend/templates/product/view/details.phtml
a
<magento_root>/app/design/frontend/<Vendor>/<theme>/Magento_Catalog/templates/product/view/details.phtml
Tenga en cuenta que el propio details.phtml
Magento podría cambiarse en futuras versiones o parches de Magento. Estos cambios también deberían aplicarse a los temas de su tema.details.phtml
Ahora necesitamos obtener la prioridad que transmitimos a través del archivo 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; ?>
Como puede ver: solo tiene que agregar algunas líneas y siempre puede cambiar la prioridad / orden de las pestañas a través del archivo xml, ya no tiene que cambiar el details.phtml
en el futuro.