5

In Magento 2.3.4 product page when click review text or reviews and not going to review form or Customer review

Before it's working fine in Magento 2.2.4

and it's an error coming from the below core file in this function

/vendor/magento/module-review/view/frontend/web/js/process-reviews.js

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

        event.preventDefault();
        anchor = $(this).attr('href').replace(/^.*?(#|$)/, '');
        addReviewBlock = $('#' + anchor);

        if (addReviewBlock.length) {
            $('.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: addReviewBlock.offset().top - 50
            }, 300);
        }

    });
});

enter image description here

I checked but I can't find proper solution
Does anyone know about this issue?

Any help would be appreciated.

Thanks.

  • did you use require? show your full code. – Sohel Rana Feb 21 at 6:32
  • @SohelRana this is default magento file /vendor/magento/module-review/view/frontend/web/js/process-reviews.js – Rakesh Donga Feb 21 at 6:33
  • Replace this line $('.product.data.items').tabs('activate', index); with $('.product.data.items').tabs().tabs('activate', index); – Kishor Thummar Feb 21 at 7:13
  • Have you checked in browser? Your JS code is updated or not – Kishor Thummar Feb 21 at 7:15
  • are you using any custom theme? – Kishor Thummar Feb 21 at 7:21
10
+50

Try this one. The issue may be resolved by putting the below code into the details.phtml of Magento_Catalog module.

<script type="text/javascript">
    require(['jquery','jquery/ui'], function($) {
    //Change the below class if not matching
        $("div.product.data.items").tabs();
    });
</script>

Vendor Path - <magento-root>/vendor/magento/module-catalog/view/frontend/templates/product/view/details.phtml

For theme - <magento-root>/app/design/frontend/Vendor/ThemeName/Magento_Catalog/templates/ product/view/details.phtml

Note: Copy details.phtml file from vendor path if not present in the respective theme directory.

Clear the cache if prompted.

This is purely workaround and worked for me very well in 2.3.4 instance.

| improve this answer | |
  • thank you for answer ,yes it is working fine for go to review form but not working in like 2 reviews and not going in 2 reviews – Rakesh Donga Feb 26 at 14:15
  • please check it screenshot prnt.sc/r7zohn – Rakesh Donga Feb 26 at 14:24
  • @RakeshDonga it's should work. Do u find any console err? Check <a class="action view"> #href value and look for the tab value is it there or not. or else it maybe theme level issue. – sandip Feb 27 at 4:37
  • no any error in console and i am usng sm/topmart theme – Rakesh Donga Feb 27 at 4:48
  • thanks. the issue was occurred after upgrading to Magento 2.3.4 with the Porto theme. Just adding 'jquery/ui' in details.phtml's script and works fine :) – Bharat Sevra Mar 28 at 9:25
9

In Magento 2.3.3, Magento split the jquery/ui module into smaller parts. See https://github.com/magento/magento2/issues/22995. Code should not depend on the big jquery/ui module anymore, but on specific modules like jquery-ui-modules/modulename. This improves the performance.

However, many older extensions or older custom code still depends on the big jquery/ui module. If there is such a dependency, the file lib/web/jquery/compat.js is included, which loads all jQuery UI modules. It also explicitly loads the module jquery-ui-modules/tabs. Normally, Magento uses its own tab implementation mage/tabs and does not use jquery-ui-modules/tabs. However, if jquery-ui-modules/tabs is loaded after mage/tabs you will get the error you mentioned. To reproduce this, you can open a product page on a demo shop, open the console and execute require(['jquery/ui'], function(){}). When you do this and you click the review link, you will get the mentioned error.

So most probably, one of your themes / extensions / custom code also requires jquery/ui, which leads to the error. To fix this and to improve the performance of your page, you should get rid of that dependency.

If you cannot get rid of the dependency right away, because it e.g. comes from a third party module, another workaround is to map the jquery-ui-modules/tabs module to the mage/tabs module in your requirejs-config.js:

var config = {
    map: {
        "*": {
            // if someone depends on jquery/ui, jquery/compat is loaded
            // jquery/compat loads jquery-ui-modules/tabs
            // if jquery-ui-modules/tabs is loaded after mage/tabs, the tabs function is mapped to the wrong widget
            // (to the jquery widget and not to the Magento widget)
            // then, it is not possible to call methods on the tabs
            // this mapping fixes this issue, because jquery-ui-modules/tabs is not loaded any more
            "jquery-ui-modules/tabs": "mage/tabs"
        }
    }
};
| improve this answer | |
  • Simon , nice answer with great explanation and it works thanks ! – Manish Goswami Jul 26 at 4:57
  • Thans @Simon This worked for me on 2.3.4 – Jiyaad.D Sep 7 at 15:14
  • This worked perfectly for 2.3.3. Just had to compile, manually clear pub/static/* folder, set static files and flush caches. The answer of sandip caused some errors with tabs on product page. – Webninja Sep 11 at 12:43
0

try this

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

            event.preventDefault();
            anchor = $(this).attr('href').replace(/^.*?(#|$)/, '');
            addReviewBlock = $('.block.review-add .block-content #' + anchor);

            if (addReviewBlock.length) {
                $('.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: addReviewBlock.offset().top - 50
                }, 300);
            }

        });
    });
| improve this answer | |

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.