diff --git a/modules/productcomments/views/js/productListingComments.js b/modules/productcomments/views/js/productListingComments.js index 45216984..32d622f1 100644 --- a/modules/productcomments/views/js/productListingComments.js +++ b/modules/productcomments/views/js/productListingComments.js @@ -1,94 +1,62 @@ -/** - * 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 license@prestashop.com 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 - * @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) { @@ -96,46 +64,65 @@ var productListingComments = (function () { } } - 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(); } - }); + }); }