2

I want to disable keyboard navigation of tabs from product details page which is on below gallery with tabs Details, Reviews & custom tab. You can check below link for the tabs http://newsmartwave.net/magento2/porto/demo14_en/catalog/product/view/id/2383/s/white-shirt-27/

Below is my details.phtml

    <?php
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

?>
<?php if ($detailedInfoGroup = $block->getGroupChildNames('detailed_info', 'getChildHtml')):?>
<?php
    $porto_helper = $this->helper('Smartwave\Porto\Helper\Data');
    $_helper = $this->helper('Smartwave\Porto\Helper\Customtabs');
    $product_config = $porto_helper->getConfig('porto_settings/product');
    $static_block_tab = $product_config['custom_block_next_tab'];
    $custom_block = $this->getLayout()->createBlock('Magento\Cms\Block\Block');
    if($custom_block) {
        $custom_block->setBlockId($static_block_tab);
    }
    $tab_style = "";
    if(isset($product_config['tab_style']) && $product_config['tab_style'])
        $tab_style = $product_config['tab_style'];
?>
    <?php if($product_config['tab_full_background']):?>
    <div class="move-product-tab">
        <div class="row">
            <div class="<?php if($custom_block && $static_block_tab):?>col-sm-9<?php else:?>col-sm-12<?php endif;?>">
    <?php endif;?>
                <div class="product info detailed <?php echo $tab_style; ?>">
                <?php $layout = $block->getLayout(); ?>
                <?php if(!$tab_style || $tab_style != "sticky"): ?>
                    <div class="product data items" data-mage-init='{"tabs":{"openedState":"active"}}'>
                        <?php foreach ($detailedInfoGroup as $name):?>
                            <?php
                            $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;?>
                        <?php
                        if($custom_cms_tabs = $_helper->getCustomTabs($block->getProduct())) {
                            $i = 1;
                            foreach($custom_cms_tabs as $_item) {
                                ?>
                                <div class="data item title"
                                     aria-labeledby="tab-label-<?php /* @escapeNotVerified */ echo "custom-".$i;?>-title"
                                     data-role="collapsible" id="tab-label-<?php /* @escapeNotVerified */ echo "custom-".$i;?>">
                                    <a class="data switch"
                                       tabindex="-1"
                                       data-toggle="switch"
                                       href="#<?php /* @escapeNotVerified */ echo "custom-".$i; ?>"
                                       id="tab-label-<?php /* @escapeNotVerified */ echo "custom-".$i;?>-title">
                                        <?php /* @escapeNotVerified */ echo $_item['tab_title']; ?>
                                    </a>
                                </div>
                                <div class="data item content" id="<?php /* @escapeNotVerified */ echo "custom-".$i; ?>" data-role="content">
                                    <?php /* @escapeNotVerified */ echo $_item['tab_content']; ?>
                                </div>
                                <?php
                                $i++;
                            }
                        }
                        ?>
                    </div>
                <?php elseif($tab_style && $tab_style == "sticky"): ?>
                    <div class="product data items">
                        <?php foreach ($detailedInfoGroup as $name):?>
                            <?php
                            $html = $layout->renderElement($name);
                            if (!trim($html)) {
                                continue;
                            }
                            $alias = $layout->getElementAlias($name);
                            $label = $block->getChildData($alias, 'title');
                            $alias = str_replace(".","_",$alias);
                            ?>
                            <div class="data item title">
                                <a class="data switch" href="#<?php /* @escapeNotVerified */ echo $alias; ?>">
                                    <?php /* @escapeNotVerified */ echo $label; ?>
                                </a>
                            </div>
                        <?php endforeach;?>
                        <?php
                        if($custom_cms_tabs = $_helper->getCustomTabs($block->getProduct())) {
                            $i = 1;
                            foreach($custom_cms_tabs as $_item) {
                                ?>
                                <div class="data item title">
                                    <a class="data switch" href="#<?php /* @escapeNotVerified */ echo "custom-".$i; ?>">
                                        <?php /* @escapeNotVerified */ echo $_item['tab_title']; ?>
                                    </a>
                                </div>
                                <?php
                                $i++;
                            }
                        }
                        ?>
                        <?php foreach ($detailedInfoGroup as $name):?>
                            <?php
                            $html = $layout->renderElement($name);
                            if (!trim($html)) {
                                continue;
                            }
                            $alias = $layout->getElementAlias($name);
                            $label = $block->getChildData($alias, 'title');
                            $alias = str_replace(".","_",$alias);
                            ?>
                            <div class="data item content" id="<?php /* @escapeNotVerified */ echo $alias; ?>">
                                <?php /* @escapeNotVerified */ echo $html; ?>
                            </div>
                        <?php endforeach;?>
                        <?php
                        if($custom_cms_tabs = $_helper->getCustomTabs($block->getProduct())) {
                            $i = 1;
                            foreach($custom_cms_tabs as $_item) {
                                ?>
                                <div class="data item content" id="<?php /* @escapeNotVerified */ echo "custom-".$i; ?>">
                                    <?php /* @escapeNotVerified */ echo $_item['tab_content']; ?>
                                </div>
                                <?php
                                $i++;
                            }
                        }
                        ?>
                    </div>
                <?php endif; ?>
                <script type="text/javascript">
                    require([
                        'jquery'
                    ], function ($) {
                        $(document).ready(function(){
                            <?php if($tab_style && $tab_style == "vertical"): ?>
                            $(".product.info.detailed.vertical .product.data.items .data.item.title").off("classadded").on("classadded",function(){
                                $(this).parent().css("min-height",$(this).next().outerHeight()+"px");
                            });
                            <?php elseif($tab_style && $tab_style == "sticky"): ?>
                            var sticky_tabs;
                            var is_sticky = false;
                            $(window).scroll(function(){
                                if($(window).scrollTop() >= $(".product.info.detailed").offset().top-50){
                                    if(!is_sticky){
                                        $(".product.info.detailed.sticky").before('<div class="product-tabs-container"><div class="container"></div></div>');
                                        $(".product.info.detailed.sticky .product.data.items > .item.title").each(function(){
                                            $(".product-tabs-container > .container").append($(this).clone().detach());
                                        });
                                        $(".product-tabs-container .item.title > a").off("click").on("click", function(){
                                            $($(this).attr("href")).scrollToMe();
                                            return false;
                                        });
                                        <?php if ($porto_helper->getConfig('porto_settings/header/sticky_header')): ?>
                                        $(".product-tabs-container").addClass("has-sticky-header");
                                        <?php endif; ?>
                                        <?php if ($porto_helper->getConfig('porto_settings/header/mobile_sticky_header')): ?>
                                        $(".product-tabs-container").addClass("has-mobile-sticky-header");
                                        <?php endif; ?>
                                        is_sticky = true;
                                    }
                                } else {
                                    $(".product-tabs-container").remove();
                                    is_sticky = false;
                                }
                            });
                          /*  $(".product.info.detailed.sticky .product.data.items > .item.title > a").off("click").on("click", function(){
                                $($(this).attr("href")).scrollToMe();
                                return false;
                            });
                            $(".product-reviews-summary .reviews-actions a.action.view").off("click").on("click", function(){
                                $("#reviews").scrollToMe();
                                return false;
                            });
                            $(".product-reviews-summary .reviews-actions a.action.add").off("click").on("click", function(){
                                $("#review-form").scrollToMe();
                                return false;
                            });*/
                            <?php endif; ?>
                        });
                    });
                </script>
                </div>
    <?php if($product_config['tab_full_background']):?>
            </div>
            <?php if($custom_block && $static_block_tab):?>
            <div class="col-sm-3">
                <div class="custom-block-tab">
                    <?php echo $custom_block->toHtml(); ?>
                </div>
            </div>
            <?php endif;?>
        </div>
    </div>
    <?php endif;?>
<?php endif; ?>
5
  • Find tabindex="-1" in your file and remove in file
    – Abdul
    Commented Mar 19, 2018 at 6:57
  • Not working..by removing this Commented Mar 19, 2018 at 6:59
  • Find "<div class="data item title"" in file and add also tabindex="-1" in this div
    – Abdul
    Commented Mar 19, 2018 at 7:17
  • Still there in this div => tabindex="0". so please replace tabindex from tabindex="0" to tabindex="-1"
    – Abdul
    Commented Mar 19, 2018 at 7:18
  • bad luck brother..not working Commented Mar 19, 2018 at 7:26

1 Answer 1

0

I have used that way to disable/remove tabs. You can disable tabs using override template file.

Copy file from below location

/vendor/magento/module-catalog/view/frontend/templates/product/view/details.phtml

and paste it to your custom theme location.

app/design/frontend/[vendor]/[module]/Magento_Catalog/templates/product/view/details.phtml

and do change in code:

<?php
/**
 * Copyright © Magento, Inc. 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(); ?>
        <div class="product data items" data-mage-init='{"tabs":{"openedState":"active"}}'>
            <?php foreach ($detailedInfoGroup as $name):?>
                <?php
                    if($name == 'product.info.description' && 
                        $name == 'reviews.tab' && 
                        $name ==  'custom.tab'){
                        continue;
                    }
                    $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-<?= /* @escapeNotVerified */ $alias ?>-title"
                     data-role="collapsible" id="tab-label-<?= /* @escapeNotVerified */ $alias ?>">
                    <a class="data switch"
                       tabindex="-1"
                       data-toggle="switch"
                       href="#<?= /* @escapeNotVerified */ $alias ?>"
                       id="tab-label-<?= /* @escapeNotVerified */ $alias ?>-title">
                        <?= /* @escapeNotVerified */ $label ?>
                    </a>
                </div>
                <div class="data item content" id="<?= /* @escapeNotVerified */ $alias ?>" data-role="content">
                    <?= /* @escapeNotVerified */ $html ?>
                </div>
            <?php endforeach;?>
        </div>
    </div>
<?php endif; ?>
5
  • I have to remove all code from the app/ details.phtml? Commented Mar 19, 2018 at 6:46
  • No. Just need to add if() condition in foreach loop.
    – P_U
    Commented Mar 19, 2018 at 6:48
  • It's still navigating through keyboard. Actually I'm not php or magento developer. Commented Mar 19, 2018 at 6:49
  • Did you add if condition?
    – P_U
    Commented Mar 19, 2018 at 6:50
  • Yes..now I added my default detail.phtml. You can check Commented Mar 19, 2018 at 6:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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