magento2: how to set link to specific tab in product?

Question

My product page has 3 tabs (Details, More information, Reviews). When you go to the product page the Details tab is initially open. I'd like to be able to link directly to second tab (More information). problem is that url like #additional works only when this tab is opened.

Will really appreciate if someone guide me how to compose right link.

Answer 1

You need to set a priority of attributes and override catalog_product_view.xml

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

After you need to do few workouts at details.phtml so copy from

<magento_root>/vendor/magento-catalog-view/frontend/templates/product/view/details.phtml

To your custom extension

<?php if ($detailedInfoGroup = $block->getGroupChildNames('detailed_info', 'getChildHtml')):?>
<div class="product info detailed">
    <?php $layout = $block->getLayout(); ?>
    <?php
        $newPriority = array();
        foreach ($detailedInfoGroup as $name){
            $alias = $layout->getElementAlias($name);
            $priority = $block->getChildData($alias,'priority') ? $block->getChildData($alias,'priority') : '10';
            array_push($newPriority, array($name, $priority));
        }
        usort($newPriority, function($a, $b) {
            return $a['1'] <=> $b['1'];
        });
    ?>
    <div class="product data items" data-mage-init='{"tabs":{"openedState":"active"}}'>
        <?php
        foreach ($newPriority as $name):?>
            <?php
                $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>

Please review above thread and made changes as per your need. I hope it will helpful.

Thanks, Sam