Product tabs sorting issue in Magento 2
-
09-10-2020 - |
Question
I am trying to sorting the product tabs, but it is displaying wrong. For this stuff I have tried below code.
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);
$priority = "0";
# Get the priority which we applied via xml file
# If no priority is applied via xml file then just set it to 10
if($alias == "product.info.description"){
$priority = '0';
}elseif($alias == "specification.tab"){
$priority = '1';
}elseif($alias == "reviews"){
$priority = '2';
}elseif($alias == "manual.tab"){
$priority = '3';
}
# variables pushed into new two-dimensional array
array_push($newPriority, array($name, $priority));
}
# Sort array by priority
/* uasort($newPriority, function($a, $b) {
return $a['1'] = $b['1'];
});*/
?>
<div class="tab-theme <?php echo $tabStyle . '-style'?>" id="tab-product">
<ul class="resp-tabs-list">
<?php
# Delete the original forEach statement
#foreach ($detailedInfoGroup as $name)
ksort($newPriority);
foreach ($newPriority as $name):
$name = $name[0];
$html = $layout->renderElement($name);
if (!trim($html)) {
continue;
}
$alias = $layout->getElementAlias($name);
$label = $block->getChildData($alias, 'title');
?>
<li id="<?php /* @escapeNotVerified */ echo $alias; ?>"><?php echo $label; ?></li>
<?php endforeach;?>
<?php if($show_custom_tab){?>
<li class="customtab"><?php echo $custom_tab_name; ?></li>
<?php } ?>
</ul>
<div class="resp-tabs-container">
<?php foreach ($detailedInfoGroup as $name):?>
<?php
$html = $layout->renderElement($name);
if (!trim($html)) {
continue;
}
?>
<div><?php echo $html; ?></div>
<?php endforeach;?>
<?php if($show_custom_tab){?>
<div class="customtab-content">
<?php
echo $customtab_content;
?>
</div>
<?php } ?>
</div>
</div>
<script>
require(['jquery','easyResponsiveTabs'], function ($) {
$('#tab-product').easyResponsiveTabs({
type: '<?php echo $tabStyle;?>', //Types: default, vertical, accordion
width: 'auto', //auto or any width like 600px
fit: true, // 100% fit in a container
activate: function(event) { // Callback function if tab is switched
/* var $tab = $(this);
var $info = $('#tabInfo');
var $name = $('span', $info);
$name.text($tab.text());
$info.show(); */
}
});
$(".product-info-main .reviews-actions .action.view").click(function() {
$("#reviews").trigger( "click" );
$('html, body').animate({
scrollTop: $("#customer-reviews").offset().top
}, 1000);
});
$(".product-info-main .reviews-actions .action.add").click(function() {
$("#reviews").trigger( "click" );
$('html, body').animate({
scrollTop: $("#review-form").offset().top
}, 1000);
});
});
</script>
</div>
<?php endif; ?>
my logs are below
and product tabs are displaying wrong.
Any help on this?
La solution 2
Finally, it's worked for me.
<?php if ($detailedInfoGroup = $block->getGroupChildNames('detailed_info', 'getChildHtml')):?>
<div class="product info detailed">
<?php $newOrder = array('product.info.description','specification.tab','reviews.tab','manual.tab'); ?>
<?php $layout = $block->getLayout(); ?>
<div class="tab-theme <?php echo $tabStyle . '-style'?>" id="tab-product">
<ul class="resp-tabs-list">
<?php
# forEach the original $detailedInfoGroup Array;
foreach ($newOrder as $name){
$html = $layout->renderElement($name);
if (!trim($html)) {
continue;
}
$alias = $layout->getElementAlias($name);
$label = $block->getChildData($alias, 'title'); ?>
<li id="<?php /* @escapeNotVerified */ echo $alias; ?>"><?php echo $label; ?></li>
<?php } ?>
<?php if($show_custom_tab){?>
<li class="customtab"><?php echo $custom_tab_name; ?></li>
<?php } ?>
</ul>
<div class="resp-tabs-container">
<?php
# forEach the original $detailedInfoGroup Array;
foreach ($newOrder as $name){
$html = $layout->renderElement($name);
if (!trim($html)) {
continue;
} ?>
<div><?php echo $html; ?></div>
<?php } ?>
<?php if($show_custom_tab){?>
<div class="customtab-content">
<?php
echo $customtab_content;
?>
</div>
<?php } ?>
</div>
</div>
<script>
require(['jquery','easyResponsiveTabs'], function ($) {
$('#tab-product').easyResponsiveTabs({
type: '<?php echo $tabStyle;?>', //Types: default, vertical, accordion
width: 'auto', //auto or any width like 600px
fit: true, // 100% fit in a container
activate: function(event) { // Callback function if tab is switched
/* var $tab = $(this);
var $info = $('#tabInfo');
var $name = $('span', $info);
$name.text($tab.text());
$info.show(); */
}
});
$(".product-info-main .reviews-actions .action.view").click(function() {
$("#reviews").trigger( "click" );
$('html, body').animate({
scrollTop: $("#customer-reviews").offset().top
}, 1000);
});
$(".product-info-main .reviews-actions .action.add").click(function() {
$("#reviews").trigger( "click" );
$('html, body').animate({
scrollTop: $("#review-form").offset().top
}, 1000);
});
});
</script>
</div>
<?php endif; ?>
Autres conseils
You have to manually set order of your tabbing.
<?php if ($detailedInfoGroup = $block->getGroupChildNames('detailed_info', 'getChildHtml')):?>
<?php
//custom order
$newOrder = array('product.info.description','specification.tab','reviews.tab','manual.tab'); //custom add
?>
<div class="product info detailed">
<?php $layout = $block->getLayout(); ?>
<?php
# We create a new array;
$newPriority = array();
# forEach the original $detailedInfoGroup Array;
foreach ($newOrder as $name){
$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>
<script>
require(['jquery','easyResponsiveTabs'], function ($) {
$('#tab-product').easyResponsiveTabs({
type: '<?php echo $tabStyle;?>', //Types: default, vertical, accordion
width: 'auto', //auto or any width like 600px
fit: true, // 100% fit in a container
activate: function(event) { // Callback function if tab is switched
/* var $tab = $(this);
var $info = $('#tabInfo');
var $name = $('span', $info);
$name.text($tab.text());
$info.show(); */
}
});
$(".product-info-main .reviews-actions .action.view").click(function() {
$("#reviews").trigger( "click" );
$('html, body').animate({
scrollTop: $("#customer-reviews").offset().top
}, 1000);
});
$(".product-info-main .reviews-actions .action.add").click(function() {
$("#reviews").trigger( "click" );
$('html, body').animate({
scrollTop: $("#review-form").offset().top
}, 1000);
});
});
</script>
</div>
<?php endif; ?>
Licencié sous: CC-BY-SA avec attribution
Non affilié à magento.stackexchange