Open tab on button click

[ayesha_khalid]

Like review tab on the product detail page i build another tab .. like just click on the be first to review this product.. i want to same as click on button my tab sy open... but my tab content in other phtml and my button is in other phtml .. how can i acheive it plz help ?..

[Damian Culotta]

Hi @ayesha_khalid,

I'm not sure if I'm understanding the idea correctly but I guess you can use child blocks defined into your tab block and then call the child with the defined template.

Maybe you can start reading about layout and blocks on the documentation: https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/layouts/layout-overview.html

[Manthan Dave]

Hi @ayesha_khalid 

This requirement can be achieved by creating custom module.

You actually need to create a product attributes ( Content ) which you would like to add into it and based on that create a new tab and showcase the attribute content in it.

New tab add code is coming from the - catalog_product_view.xml file so you required to create that in your custom module.

Refer the following to create such module and how to showcase the same in frontend.

https://magenticians.com/add-custom-tab-magento-2/ 

https://magento.stackexchange.com/questions/106299/add-new-tab-on-product-detail-page-magento-2 

https://blog.landofcoder.com/magento-2-product-page-layout/ 

Hope it helps !

[ayesha_khalid]

Hi @Manthan Dave 

i created the tab already i just want to open the tab on button clicked just like review tab is open when "be first to review this product" is clicked on the product detail page.

[Manthan Dave · Accepted solution]

Hi @ayesha_khalid 

ok i got your point - i have done inspect element on the review tab and i found its simple link with css id.

So if you want to open tab same like Be the first review product (link) open review tab

You need to pass your tab css id into that link - in the native on first review tab they have passed (#review-form) id on that link 

So when someone click on that link page scroll move to that #review-form section.

Just a simple css id with link.

Hope it helps !

[verma_mallika]

Hi @ayesha_khalid 

You must have added some phtml through catalog_product_view.xml 

Call a js file from your phtml file same as in review.phtml,

<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Review/js/process-reviews": {
                "productReviewUrl": "<?= $block->escapeJs($block->escapeUrl($block->getProductReviewUrl())) ?>",
                "reviewsTabSelector": "#tab-label-reviews"
            }
        }
    }
</script>

Now create a file same as process-reviews.js

define([
    'jquery'
], function ($) {
    'use strict';

    /**
     * @param {String} url
     * @param {*} fromPages
     */
    function processReviews(url, fromPages) {
        $.ajax({
            url: url,
            cache: true,
            dataType: 'html',
            showLoader: false,
            loaderContext: $('.product.data.items')
        }).done(function (data) {
            $('#product-review-container').html(data);
            $('[data-role="product-review"] .pages a').each(function (index, element) {
                $(element).click(function (event) { //eslint-disable-line max-nested-callbacks
                    processReviews($(element).attr('href'), true);
                    event.preventDefault();
                });
            });
        }).complete(function () {
            if (fromPages == true) { //eslint-disable-line eqeqeq
                $('html, body').animate({
                    scrollTop: $('#reviews').offset().top - 50
                }, 300);
            }
        });
    }

    return function (config) {
        var reviewTab = $(config.reviewsTabSelector),
            requiredReviewTabRole = 'tab';

        if (reviewTab.attr('role') === requiredReviewTabRole && reviewTab.hasClass('active')) {
            processReviews(config.productReviewUrl);
        } else {
            reviewTab.one('beforeOpen', function () {
                processReviews(config.productReviewUrl);
            });
        }

        $(function () {
            $('.product-info-main .reviews-actions a').click(function (event) {
                var anchor;

                event.preventDefault();
                anchor = $(this).attr('href').replace(/^.*?(#|$)/, '');
                $('.product.data.items [data-role="content"]').each(function (index) { //eslint-disable-line
                    if (this.id == 'reviews') { //eslint-disable-line eqeqeq
                        $('.product.data.items').tabs('activate', index);
                        $('html, body').animate({
                            scrollTop: $('#' + anchor).offset().top - 50
                        }, 300);
                    }
                });
            });
        });
    };
});

In above code change all the ids and class used for review section and add your tab classes and ids instead of it.

If you still have any query regarding solution, let me know.

Problem solved? Please give 'Kudos' and accept 'Answer as Solution'.