jQuery removed form productListingComments

modules/productcomments/views/js/productListingComments.js

@@ -1,141 +1,128 @@
-/**
- * 2007-2019 PrestaShop SA and Contributors
- *
- * NOTICE OF LICENSE
- *
- * This source file is subject to the Academic Free License (AFL 3.0)
- * that is bundled with this package in the file LICENSE.txt.
- * It is also available through the world-wide-web at this URL:
- * http://opensource.org/licenses/afl-3.0.php
- * If you did not receive a copy of the license and are unable to
- * obtain it through the world-wide-web, please send an email
- * to [email protected] so we can send you a copy immediately.
- *
- * DISCLAIMER
- *
- * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
- * versions in the future. If you wish to customize PrestaShop for your
- * needs please refer to http://www.prestashop.com for more information.
- *
- * @author    PrestaShop SA <[email protected]>
- * @copyright 2007-2019 PrestaShop SA and Contributors
- * @license   http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
- * International Registered Trademark & Property of PrestaShop SA
- */
-
-
-$(document).ready(function() {
+
+DOMReady(() => {
     productListingComments.init();
     productListingComments.load();
 });
 
 
-var productListingComments = (function () {
-
-    var data = {
+const productListingComments = (() => {
+    const data = {
         productIDs: [],
         commentsLoadingInProgress: false,
         ajaxIDsLimit: 50,
         ajaxUrl: ''
     }
 
-    var DOMStrings = {
+    const DOMStrings = {
         productListReviewsContainer: '.product-list-reviews',
         productListReviewsNumberOfComments: '.comments-nb',
         productListReviewsStarsContainer: '.grade-stars',
         productContainer: '.js-product-miniature'
     };
 
-    var DOMClasses =  {
+    const DOMClasses =  {
         inProgress: 'reviews-loading',
         reviewsLoaded: 'reviews-loaded',
         hasReviews: 'has-reviews'
     };
 
-    function setEvents() {
-        prestashop.on('updatedProductList', function() {
+    const setEvents = () => {
+        prestashop.on('updatedProductList', () => {
             addProductsIDs();
         });
     }
 
 
-    function setAjaxUrl() {
+    const setAjaxUrl = () => {
         if (data.ajaxUrl !== '')
             return;
 
-        var url = $(DOMStrings.productListReviewsContainer).first().data('url');
-        data.ajaxUrl = url;
+        data.ajaxUrl = document.querySelector(DOMStrings.productListReviewsContainer).dataset.url;
     }
 
-    function getNewProductsReviewsElements() {
-        var $productListReviews = $(DOMStrings.productContainer)
-            .not('.' + DOMClasses.reviewsLoaded + ', .' + DOMClasses.inProgress)
-            .addClass(DOMClasses.inProgress)
-            .find(DOMStrings.productListReviewsContainer);
-
-        return $productListReviews;
+    const getNewProductsReviewsElements = () => {
+        return document.querySelectorAll(`
+            ${DOMStrings.productContainer}:not(.${DOMClasses.reviewsLoaded}) ${DOMStrings.productListReviewsContainer},
+            ${DOMStrings.productContainer}:not(.${DOMClasses.inProgress}) ${DOMStrings.productListReviewsContainer}
+        `);
     }
 
-    function addProductsIDs() {
+    const addProductsIDs = () => {
+        const productsList = getNewProductsReviewsElements();
+        const seenIds = {};
 
-        var $productsList = getNewProductsReviewsElements(),
-            seenIds = {};
-
-        $productsList.each(function () {
-            var id = $(this).data('id');
-            seenIds[id] = true;
+        each(productsList, (product) => {
+            seenIds[product.dataset.id] = true;
         });
 
-
-        var IDsArray = Object.keys(seenIds);
-        var prevDataIDs = data.productIDs.splice(0);
+        const IDsArray = Object.keys(seenIds);
+        const prevDataIDs = data.productIDs.splice(0);
         data.productIDs = prevDataIDs.concat(IDsArray);
 
         if (!data.commentsLoadingInProgress) {
             loadProductsData();
         }
     }
 
-    function loadProductsData() {
+    const loadProductsData = () => {
         if (data.productIDs.length === 0)
             return;
 
         data.commentsLoadingInProgress = true;
 
-        var dataIDsCopy = data.productIDs.slice(0);
-            selectedProductIDs = dataIDsCopy.splice(0, data.ajaxIDsLimit);
+        const dataIDsCopy = data.productIDs.slice(0);
+        const selectedProductIDs = dataIDsCopy.splice(0, data.ajaxIDsLimit);
 
+        const { request } = useHttpRequest(data.ajaxUrl, {
+          headers: {
+            accept: '*/*',
+          }
+        });
 
-        $.get(data.ajaxUrl, { id_products: selectedProductIDs }, function (jsonData) {
-            if (jsonData) {
-                $.each(jsonData.products, function(i, elem) {
-                    var productData = elem;
-                    var $productsReviewsContainer = $('.product-list-reviews[data-id="' + productData.id_product + '"]');
+        request
+          .query({ 'id_products[]': selectedProductIDs })
+          .get()
+          .json((jsonData) => {
+            if (!jsonData?.products) {
+              return;
+            }
 
-                    $productsReviewsContainer.each(function () {
-                        var $self = $(this);
+            jsonData.products.forEach((productData) => {
+              const {
+                id_product,
+                average_grade,
+                comments_nb,
+              } = productData;
+              const productsReviewsContainer = document.querySelectorAll(`.product-list-reviews[data-id="${id_product}"]`);
 
-                        if (productData.comments_nb > 0) {
-                            starRating($self.find(DOMStrings.productListReviewsStarsContainer)[0], productData.average_grade);
-                            $self.find(DOMStrings.productListReviewsNumberOfComments).text('(' + productData.comments_nb + ')');
-                            $self.closest(DOMStrings.productContainer).addClass(DOMClasses.hasReviews);
-                            $self.css('visibility', 'visible');
-                        }
+              each(productsReviewsContainer, (productReviewsContainer) => {
+                const productContainer = productReviewsContainer.closest(DOMStrings.productContainer);
 
-                        $self.closest(DOMStrings.productContainer).addClass(DOMClasses.reviewsLoaded);
-                        $self.closest(DOMStrings.productContainer).removeClass(DOMClasses.inProgress);
+                if (comments_nb > 0) {
+                  starRating(productReviewsContainer.querySelector(DOMStrings.productListReviewsStarsContainer), average_grade);
+                  const productReviewsNumberOfCommentsElement = productReviewsContainer.querySelector(DOMStrings.productListReviewsNumberOfComments);
+                  productContainer?.classList.add(DOMClasses.hasReviews);
 
-                    });
-                    data.productIDs.shift();
-                });
+                  if (productReviewsNumberOfCommentsElement) {
+                    productReviewsNumberOfCommentsElement.innerText = '(' + comments_nb + ')';
+                  }
 
-                data.commentsLoadingInProgress = false;
-                if (data.productIDs.length > 0) {
-                    loadProductsData();
+                  productReviewsContainer.style.visibility = 'visible';
                 }
 
+                productContainer?.classList.add(DOMClasses.reviewsLoaded);
+                productContainer?.classList.remove(DOMClasses.inProgress);
+              });
+
+              data.productIDs.shift();
+            });
+
+            data.commentsLoadingInProgress = false;
+
+            if (data.productIDs.length > 0) {
+              loadProductsData();
             }
-        });
+          });
     }