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
3
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!!
-
-
this removes the sau tab with the form, but you need to move the questions – ann karsksya Sep 27 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 at 10:14
