feat : review module install

app/code/Joshine/Review/Block/Review/Product/View/ListView.php

+<?php
+/**
+ * @author Joshine Team
+ * @copyright Copyright (c) 2021 Amasty (https://www.joshine.com)
+ * @package Joshine_AdvancedReview
+ */
+
+
+namespace Joshine\Review\Block\Review\Product\View;
+
+class ListView extends \Magento\Review\Block\Product\View\ListView
+{
+    /**
+     * Prepare product review list toolbar
+     *
+     * @return \Amasty\AdvancedReview\Block\Review\Product\View\ListView
+     * @throws \Magento\Framework\Exception\LocalizedException
+     */
+    protected function _prepareLayout()
+    {
+        $toolbar = $this->getLayout()->getBlock('product_review_list.toolbar');
+        if ($toolbar) {
+            $toolbar->setCollection($this->getReviewsCollection());
+        }
+        return $this;
+    }
+}

app/code/Joshine/Review/Helper/BlockHelper.php

+<?php
+/**
+ * @author Amasty Team
+ * @copyright Copyright (c) 2021 Amasty (https://www.amasty.com)
+ * @package Amasty_AdvancedReview
+ */
+
+
+namespace Amasty\AdvancedReview\Helper;
+
+use Amasty\AdvancedReview\Block\Comment\Form as CommentForm;
+use Amasty\AdvancedReview\Block\Images;
+use Amasty\AdvancedReview\Block\Review\Toolbar;
+use Amasty\AdvancedReview\Block\Helpful;
+use Amasty\AdvancedReview\Block\Summary;
+use Amasty\AdvancedReview\Block\Sizefits;
+use Amasty\AdvancedReview\Model\Sources\Recommend;
+use Amasty\AdvancedReview\Model\Sources\UseDefaultConfig;
+use Magento\Catalog\Model\Product;
+use Magento\Review\Model\ResourceModel\Review\Collection as ReviewCollection;
+
+class BlockHelper implements \Magento\Framework\Data\CollectionDataSourceInterface
+{
+
+    const ADMIN_ANSWER_ACCOUNT_ONLY = 'amasty_admin_answer_account_only';
+
+    /**
+     * @var \Magento\Framework\View\Element\BlockFactory
+     */
+    private $blockFactory;
+
+    /**
+     * @var Config
+     */
+    private $config;
+
+    /**
+     * @var \Magento\Framework\Stdlib\StringUtils
+     */
+    private $stringUtils;
+
+    /**
+     * @var \Magento\Customer\Model\SessionFactory
+     */
+    private $sessionFactory;
+
+    /**
+     * @var \Magento\Framework\Escaper
+     */
+    private $escaper;
+
+    /**
+     * @var \Magento\Framework\UrlInterface
+     */
+    private $urlBuilder;
+
+    /**
+     * @var \Magento\Framework\App\RequestInterface
+     */
+    private $request;
+
+    /**
+     * @var \Amasty\AdvancedReview\Model\Sources\Sort
+     */
+    private $sortModel;
+
+    public function __construct(
+        \Magento\Framework\View\Element\BlockFactory $blockFactory,
+        \Amasty\AdvancedReview\Helper\Config $config,
+        \Magento\Framework\Stdlib\StringUtils $stringUtils,
+        \Magento\Customer\Model\SessionFactory $sessionFactory,
+        \Magento\Framework\Escaper $escaper,
+        \Magento\Framework\UrlInterface $urlBuilder,
+        \Magento\Framework\App\RequestInterface $request,
+        \Amasty\AdvancedReview\Model\Sources\Sort $sortModel
+    ) {
+        $this->blockFactory = $blockFactory;
+        $this->config = $config;
+        $this->stringUtils = $stringUtils;
+        $this->sessionFactory = $sessionFactory;
+        $this->escaper = $escaper;
+        $this->urlBuilder = $urlBuilder;
+        $this->request = $request;
+        $this->sortModel = $sortModel;
+    }
+}

app/code/Joshine/Review/etc/module.xml

+<?xml version="1.0"?>
+<!--
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
+    <module name="Joshine_Review" setup_version="0.0.3"/>
+</config>

app/code/Joshine/Review/registration.php

+<?php
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+\Magento\Framework\Component\ComponentRegistrar::register(
+    \Magento\Framework\Component\ComponentRegistrar::MODULE,
+    'Joshine_Review',
+    __DIR__
+);

app/code/Joshine/Review/view/frontend/layout/default.xml

+<?xml version="1.0"?>
+<!--
+/**
+ * @author Amasty Team
+ * @copyright Copyright (c) 2021 Amasty (https://www.amasty.com)
+ * @package Amasty_AdvancedReview
+ */
+-->
+
+<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
+    <head>
+        <css src="Joshine_Review::css/_button.css"/>
+        <css src="Joshine_Review::css/_review.css"/>
+    </head>
+</page>
\ No newline at end of file

app/code/Joshine/Review/view/frontend/layout/review_product_listajax.xml

+<?xml version="1.0"?>
+
+<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
+    <body>
+        <referenceBlock name="product.info.product_additional_data" remove="true" />
+        <referenceContainer name="root">
+            <block class="Joshine\Review\Block\Review\Product\View\ListView"
+                   name="Joshine.product.info.product_additional_data"
+                   template="Joshine_Review::product/view/list.phtml"
+                   before="product_review_list.toolbar">
+            </block>
+            <block name="review.comments.js" class="Joshine\AdvancedReview\Block\Comment\JsInit" ifconfig="joshine_review/comments/enabled" />
+        </referenceContainer>
+    </body>
+</page>

app/code/Joshine/Review/view/frontend/templates/product/view/list.phtml

+<div class="joshine-review-container joshine-clearfix joshine-center-block">
+    <div class="joshine-title-block joshine-customer-review pages">
+        <strong class="joshine-strong">
+            Customer Reviews
+        </strong>
+    </div>
+
+    <div class="joshine-info-wrapper" >
+        <div class="row">
+            <div class="joshine-col-lg-3">
+                <div class="joshine-summary-info">
+
+                    <p class="joshine-percent-block" data-joshine-js="percent">
+                        <span class="joshine-value">20%</span>
+                        <span class="joshine-desc">of customers recommend this product</span>
+                    </p>
+                </div>
+            </div>
+            <div class="joshine-col-lg-3">
+                <div class="joshine-summary-details pages" data-joshine-js="summary-details">
+                    <a class="joshine-label" rel="nofollow">
+                        <p class="joshine-stars">5 stars</p>
+                        <div class="joshine-bar">
+                            <div class="joshine-bar -active" style="width:90%"></div>
+                        </div>
+                        <p class="joshine-text">90% (9)</p>
+                    </a>
+                    <a class="joshine-label" rel="nofollow">
+                        <p class="joshine-stars">4 stars</p>
+                        <div class="joshine-bar">
+                            <div class="joshine-bar -active" style="width:10%"></div>
+                        </div>
+                        <p class="joshine-text">10% (1)</p>
+                    </a>
+                    <a class="joshine-label" rel="nofollow">
+                        <p class="joshine-stars">3 stars</p>
+                        <div class="joshine-bar">
+                            <div class="joshine-bar" style="width:0%"></div>
+                        </div>
+                        <p class="joshine-text">0% (0)</p>
+                    </a>
+                    <a class="joshine-label" rel="nofollow">
+                        <p class="joshine-stars">2 stars</p>
+                        <div class="joshine-bar">
+                            <div class="joshine-bar -active" style="width:0%"></div>
+                        </div>
+                        <p class="joshine-text">0% (0)</p>
+                    </a>
+                    <a class="joshine-label" rel="nofollow">
+                        <p class="joshine-stars">1 star</p>
+                        <div class="joshine-bar">
+                            <div class="joshine-bar -active" style="width:0%"></div>
+                        </div>
+                        <p class="joshine-text">0% (0)</p>
+                    </a>
+                </div>
+            </div>
+            <div class="joshine-col-lg-3">
+                <div class="joshine-summary-details joshine-summary-details-fit pages" data-joshine-js="summary-details-fit">
+                    <p>Did the item fit well?</p>
+                    <a class="joshine-label" rel="nofollow">
+                        <p class="joshine-stars">Large</p>
+                        <div class="joshine-bar">
+                            <div class="joshine-bar -active" style="width:0%"></div>
+                        </div>
+                        <p class="joshine-text">0% (0)</p>
+                    </a>
+                    <a class="joshine-label" rel="nofollow">
+                        <p class="joshine-stars">True to Size</p>
+                        <div class="joshine-bar">
+                            <div class="joshine-bar -active" style="width:80%"></div>
+                        </div>
+                        <p class="joshine-text">80% (8)</p>
+                    </a>
+                    <a class="joshine-label" rel="nofollow">
+                        <p class="joshine-stars">Small</p>
+                        <div class="joshine-bar">
+                            <div class="joshine-bar -active" style="width:0%"></div>
+                        </div>
+                        <p class="joshine-text">0% (0)</p>
+                    </a>
+                </div>
+            </div>
+            <div class="joshine-col-lg-3">
+                <div class="joshine-add-new">
+                    <a href="#review-form" title="Write a review" id="joshine-toform" class="action primary joshine-button">
+                        Write a review                </a>
+
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <p class="joshine-title-block joshine-review-list -am-line pages">
+        <strong class="am-strong">
+            Top customer reviews        </strong>
+    </p>
+
+    <figure class="joshine-toolbar-container">
+        <div class="row">
+            <div class="joshine-col-xs-12">
+                <ul class="joshine-filters">
+                    <li class="joshine-filter joshine-checkbox-container">
+                        <input type="checkbox" class="joshine-input" name="verified_buyer" data-joshine-js="filter" data-href="https://www.joshine.com/review/product/listAjax/joshine_sort/newest/verified_buyer/1/id/6056/" id="joshine-filter-verified_buyer">
+                        <label class="joshine-label joshine-label" for="joshine-filter-verified_buyer">
+                            Verified Buyers                        </label>
+                    </li>
+                    <li class="joshine-filter joshine-checkbox-container">
+                        <input type="checkbox" class="joshine-input" name="is_recommended" data-joshine-js="filter" data-href="https://www.joshine.com/review/product/listAjax/joshine_sort/newest/is_recommended/1/id/6056/" id="joshine-filter-is_recommended">
+                        <label class="joshine-label joshine-label" for="joshine-filter-is_recommended">
+                            Recommended                        </label>
+                    </li>
+                    <li class="joshine-filter joshine-checkbox-container">
+                        <input type="checkbox" class="joshine-input" name="with_images" data-joshine-js="filter" data-href="https://www.joshine.com/review/product/listAjax/joshine_sort/newest/with_images/1/id/6056/" id="joshine-filter-with_images">
+                        <label class="joshine-label joshine-label" for="joshine-filter-with_images">
+                            With images                        </label>
+                    </li>
+                </ul>
+
+                <div class="joshine-sorting">
+                    <label class="sorter-label" for="joshine-sorter">Sort By</label>
+                    <select id="joshine-sorter" class="joshine-select" data-joshine-js="sorter">
+                        <option value="newest" data-href="https://www.joshine.com/review/product/listAjax/joshine_sort/newest/id/6056/" selected="selected">
+                            Date                        </option>
+                        <option value="top_rated" data-href="https://www.joshine.com/review/product/listAjax/joshine_sort/top_rated/id/6056/">
+                            Rating                        </option>
+                        <option value="helpful" data-href="https://www.joshine.com/review/product/listAjax/joshine_sort/helpful/id/6056/">
+                            Helpfulness                        </option>
+                    </select>
+
+                    <a title="Set Ascending Direction" href="#" data-href="https://www.joshine.com/review/product/listAjax/joshine_sort/newest/joshine_dir/asc/id/6056/" class="action joshine-sortbtn sorter-action sort-desc" data-joshine-js="direction-switcher" data-value="asc">
+                    </a>
+                </div>
+            </div>
+        </div>
+    </figure>
+
+    <div class="joshine-items-block block-content">
+        <ul class="row">
+            <li class="joshine-col-lg-12 joshine-review-item">
+                <div class="joshine-col-lg-2 joshine-review-item-left">
+                    <p>NickName</p>
+                    <p>2022-12-30</p>
+                </div>
+                <div class="joshine-col-lg-6 joshine-review-item-mid">
+                    <div class="row">
+                        <div class="joshine-col-lg-6 detail">
+                            <p>
+                                This is My first time in this website!
+                            </p>
+                        </div>
+                        <div class="joshine-col-xs-6 joshine-review-items-pics">
+                            <div class="joshine-col-xs-4 joshine-review-items-pic">
+                                <img  class="joshine-col-xs-12 " src="media/catalog/product/placeholder/default/1.webp" alt="pics">
+                            </div>
+                            <div class="joshine-col-xs-4 joshine-review-items-pics">
+                                <img  class="joshine-col-xs-12 " src="media/catalog/product/placeholder/default/bgsub_clipboard_5__1.png" alt="pics">
+                            </div>
+                            <div class="joshine-col-xs-4 joshine-review-items-pics">
+                                <img  class="joshine-col-xs-12 "  src="media/catalog/product/placeholder/default/bgsub_clipboard_5__1.png" alt="pics">
+                            </div>
+                            <div class="joshine-col-xs-4 joshine-review-items-pics">
+                                <img  class="joshine-col-xs-12 "  src="media/catalog/product/placeholder/default/bgsub_clipboard_5__1.png" alt="pics">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="joshine-col-lg-1 joshine-review-item-right">
+                    <span>This is helpful for me</span>
+                </div>
+            </li>
+
+            <li class="joshine-col-lg-12 joshine-review-item">
+                <div class="joshine-col-lg-2 joshine-review-item-left">
+                    <p>NickName</p>
+                    <p>2022-12-30</p>
+                </div>
+                <div class="joshine-col-lg-6 joshine-review-item-mid">
+                    <div class="row">
+                        <div class="joshine-col-lg-6 detail">
+                            <p>
+                                This is My first time in this website!
+                            </p>
+                        </div>
+                        <div class="joshine-col-xs-6 joshine-review-items-pics">
+                            <div class="joshine-col-xs-4 joshine-review-items-pic">
+                                <img  class="joshine-col-xs-12 " src="media/catalog/product/placeholder/default/bgsub_clipboard_5__1.png" alt="pics">
+                            </div>
+                            <div class="joshine-col-xs-4 joshine-review-items-pics">
+                                <img  class="joshine-col-xs-12 " src="media/catalog/product/placeholder/default/bgsub_clipboard_5__1.png" alt="pics">
+                            </div>
+                            <div class="joshine-col-xs-4 joshine-review-items-pics">
+                                <img  class="joshine-col-xs-12 "  src="media/catalog/product/placeholder/default/bgsub_clipboard_5__1.png" alt="pics">
+                            </div>
+                            <div class="joshine-col-xs-4 joshine-review-items-pics">
+                                <img  class="joshine-col-xs-12 "  src="media/catalog/product/placeholder/default/bgsub_clipboard_5__1.png" alt="pics">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="joshine-col-lg-1 joshine-review-item-right">
+                    <span>This is helpful for me</span>
+                </div>
+            </li>
+
+            <li class="joshine-col-lg-12 joshine-review-item">
+                <div class="joshine-col-lg-2 joshine-review-item-left">
+                    <p>NickName</p>
+                    <p>2022-12-30</p>
+                </div>
+                <div class="joshine-col-lg-6 joshine-review-item-mid">
+                    <div class="row">
+                        <div class="joshine-col-lg-6 detail">
+                            <p>
+                                This is My first time in this website!
+                            </p>
+                        </div>
+                        <div class="joshine-col-xs-6 joshine-review-items-pics">
+                            <div class="joshine-col-xs-4 joshine-review-items-pic">
+                                <img  class="joshine-col-xs-12 " src="media/catalog/product/placeholder/default/bgsub_clipboard_5__1.png" alt="pics">
+                            </div>
+                            <div class="joshine-col-xs-4 joshine-review-items-pics">
+                                <img  class="joshine-col-xs-12 " src="media/catalog/product/placeholder/default/bgsub_clipboard_5__1.png" alt="pics">
+                            </div>
+                            <div class="joshine-col-xs-4 joshine-review-items-pics">
+                                <img  class="joshine-col-xs-12 "  src="media/catalog/product/placeholder/default/bgsub_clipboard_5__1.png" alt="pics">
+                            </div>
+                            <div class="joshine-col-xs-4 joshine-review-items-pics">
+                                <img  class="joshine-col-xs-12 "  src="media/catalog/product/placeholder/default/bgsub_clipboard_5__1.png" alt="pics">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="joshine-col-lg-1 joshine-review-item-right">
+                    <span>This is helpful for me</span>
+                </div>
+            </li>
+
+        </ul>
+    </div>
+</div>

app/code/Joshine/Review/view/frontend/web/css/_button.css

+.joshine-btn {
+  display: inline-block;
+  padding: 6px 12px;
+  margin-bottom: 0;
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 1.42857143;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  -ms-touch-action: manipulation;
+  touch-action: manipulation;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  background-image: none;
+  border: 1px solid transparent;
+}
+.joshine-btn:focus,
+.joshine-btn:active:focus,
+.joshine-btn.active:focus,
+.joshine-btn.focus,
+.joshine-btn:active.focus,
+.joshine-btn.active.focus {
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}
+
+.joshine-btn:active,
+.joshine-btn.active {
+  background-image: none;
+  outline: 0;
+  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
+  box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
+}
+.joshine-btn.disabled,
+.joshine-btn[disabled],
+fieldset[disabled] .joshine-btn {
+  cursor: not-allowed;
+  filter: alpha(opacity=65);
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  opacity: .65;
+}
+a.joshine-btn.disabled,
+fieldset[disabled] a.joshine-btn {
+  pointer-events: none;
+}
+.joshine-btn-dark {
+  color: #fff;
+  background-color: #000;
+  border-color: #000;
+}
+
+