0

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.

  • You mean you need to open the More information tab opened by default? – Sukumar Gorai Oct 5 '18 at 11:51
  • no, only when user will click on particular link. – bofh Oct 5 '18 at 11:57
  • And where this link will located in product details page? – Sukumar Gorai Oct 5 '18 at 12:27
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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.