Product tabs sorting issue in Magento 2

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?

Answer 1

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; ?>

Answer 2

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; ?>