0

I moved the reviews from the tab block

<referenceContainer name="page.wrapper">
    <container name="product-review-container" as="product-review-container" after="main.content">
        <block class="Magento\Review\Block\Product\View\ListView" name="product.info.product_additional_data" as="product_additional_data" template="product/view/list.phtml"/>
    </container>
</referenceContainer>

and deleted the tab because I don't need him

<referenceBlock name="reviews.tab" remove="true"/>

enter image description here

question: how to create a slider with reviews from the reviews block

more or less like this

enter image description here

|improve this question
1

Download owl carousal from OwlCarousal And paste owl.carousel.js to app/design/frontend/Ctm/customtheme/web/js/owl.carousel.js

owl.carousel.min.css to app/design/frontend/Ctm/customtheme/web/css/owl.carousel.min.css

Create requirejs-config.js with below code in app/design/frontend/Ctm/customtheme/Magento_Theme/requirejs-config.js

var config = {
    paths: {
        'owlcarousel': "js/owl.carousel"
    }
};

Enqueue css using app/design/frontend/Ctm/customtheme/Magento_Theme/layout/default_head_blocks.xml

<?xml version="1.0"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="css/owl.carousel.min.css" media="all"/>
    </head>
</page>

Finally call the owl slider from list.phtml file. Override from vendor/magento/module-review/view/frontend/templates/product/view/list.phtml to app/design/frontend/Ctm/customtheme/Magento_Review/templates/product/view/list.phtml with below code

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

/** @var Magento\Review\Block\Product\View\ListView $block */

$_items = $block->getReviewsCollection()->getItems();
$format = $block->getDateFormat() ?: \IntlDateFormatter::SHORT;
?>
<?php if (count($_items)):?>
<div class="block review-list" id="customer-reviews">
    <div class="block-title">
        <strong><?= $block->escapeHtml(__('Customer Reviews')) ?></strong>
    </div>
    <div class="block-content">
        <div class="toolbar review-toolbar">
            <?= $block->getChildHtml('toolbar') ?>
        </div>
        <ol class="owl-carousel items review-items">
        <?php foreach ($_items as $_review):?>
            <li class="item review-item" itemscope itemprop="review" itemtype="http://schema.org/Review">
                <div class="review-title" itemprop="name"><?= $block->escapeHtml($_review->getTitle()) ?></div>
                <?php if (count($_review->getRatingVotes())): ?>
                    <div class="review-ratings">
                    <?php foreach ($_review->getRatingVotes() as $_vote): ?>
                    <div class="rating-summary item" itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
                        <span class="label rating-label"><span><?= $block->escapeHtml($_vote->getRatingCode()) ?></span></span>
                        <div class="rating-result" title="<?= $block->escapeHtmlAttr($_vote->getPercent()) ?>%">
                            <meta itemprop="worstRating" content = "1"/>
                            <meta itemprop="bestRating" content = "100"/>
                            <span style="width:<?= $block->escapeHtmlAttr($_vote->getPercent()) ?>%">
                                <span itemprop="ratingValue"><?= $block->escapeHtml($_vote->getPercent()) ?>%</span>
                            </span>
                        </div>
                    </div>
                    <?php endforeach; ?>
                    </div>
                <?php endif; ?>
                <div class="review-content" itemprop="description">
                    <?= nl2br($block->escapeHtml($_review->getDetail())) ?>
                </div>
                <div class="review-details">
                    <p class="review-author">
                        <span class="review-details-label"><?= $block->escapeHtml(__('Review by')) ?></span>
                        <strong class="review-details-value" itemprop="author"><?= $block->escapeHtml($_review->getNickname()) ?></strong>
                    </p>
                    <p class="review-date">
                        <span class="review-details-label"><?= $block->escapeHtml(__('Posted on')) ?></span>
                        <time class="review-details-value" itemprop="datePublished" datetime="<?= $block->escapeHtmlAttr($block->formatDate($_review->getCreatedAt(), $format)) ?>"><?= $block->escapeHtml($block->formatDate($_review->getCreatedAt(), $format)) ?></time>
                    </p>
                </div>
            </li>
        <?php endforeach; ?>
        </ol>
        <div class="toolbar review-toolbar">
            <?= $block->getChildHtml('toolbar') ?>
        </div>
    </div>
</div>
<script>
    require([
        'jquery',
        'owlcarousel'
        ], function () {
            'use strict';
            jQuery.noConflict();
            jQuery(".items.review-items").owlCarousel({
                autoPlay: 3000, //3000 Set AutoPlay to 3 seconds
                margin:5,
                items : 2,
                itemsDesktop : [1199,2],
                itemsDesktopSmall : [979,2],
                itemsTablet : [768,2],
                nav : true,
                pagination : false
          });
    });
</script>
<?php endif;?>
|improve this answer
  • if I make changes not in the module, but in the topic, then where to put the files? – ann karsksya Sep 27 at 12:50
  • Do you have custom theme? – Ranganathan Sep 27 at 12:50
  • yes app/design/frontend/Ctm/customtheme – ann karsksya Sep 27 at 12:54
  • Updated my answer – Ranganathan Sep 27 at 12:58

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.