3

Tell me how to make a block of reviews on a product page as a separate slider?

I’ve been looking for some examples for a long time but haven’t found it yet, I hope you can help

|improve this question
4

In your custom theme add:

app\design\frontend\CustomVendor\theme-custom\Magento_Catalog\layout\catalog_product_view.xml

In this file we are going to tell Magento to move the reviews block as follows:

<?xml version="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <move element="reviews.tab" destination="content" after="product.info.details" />
    </body>
</page>

For Magento 2.2.x this command alone will create a 'bug' where the reviews of the product won't show up, but the form will. To fix this issue we are gonna copy the following file:

vendor\magento\module-review\view\frontend\web\js\process-review.js

And place it in your custom theme in the following path:

app\design\frontend\CustomVendor\theme-custom\Magento_Review\web\js\process-review.js

In this file go to line and comment those out 40-43 and 44-49 it should look as follows:

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 acnchor;

            event.preventDefault();
            acnchor = $(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: $('#' + acnchor).offset().top - 50
                    }, 300);
                }
            });
        });
    });
};

We are telling Magento not to check if the reviews are in a tab but just render them either way.

Run Magneto Default Commands:

php bin/magento s:up && php bin/magento s:d:c && php bin/magento s:s:d -f && php bin/magento c:c && php bin/magento c:f

Hope this will help you!!

|improve this answer
  • you don’t know how to do it with a slider? – ann karsksya Sep 27 '19 at 9:39
  • this removes the sau tab with the form, but you need to move the questions – ann karsksya Sep 27 '19 at 9:48
  • You need to just put the slider script or carousel script and you can get it done work as slider. – Oscprofessionals Sep 27 '19 at 10:14

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.