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; ?>
  • Find tabindex="-1" in your file and remove in file – Abdul Mar 19 '18 at 6:57
  • Not working..by removing this – Sagar Kodte Mar 19 '18 at 6:59
  • Find "<div class="data item title"" in file and add also tabindex="-1" in this div – Abdul Mar 19 '18 at 7:17
  • Still there in this div => tabindex="0". so please replace tabindex from tabindex="0" to tabindex="-1" – Abdul Mar 19 '18 at 7:18
  • bad luck brother..not working – Sagar Kodte Mar 19 '18 at 7:26
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; ?>
  • I have to remove all code from the app/ details.phtml? – Sagar Kodte Mar 19 '18 at 6:46
  • No. Just need to add if() condition in foreach loop. – P_U Mar 19 '18 at 6:48
  • It's still navigating through keyboard. Actually I'm not php or magento developer. – Sagar Kodte Mar 19 '18 at 6:49
  • Did you add if condition? – P_U Mar 19 '18 at 6:50
  • Yes..now I added my default detail.phtml. You can check – Sagar Kodte Mar 19 '18 at 6:55

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.