first commit

modules/productcomments/views/js/index.php

@@ -0,0 +1,34 @@
+<?php
+/**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/AFL-3.0
+ * 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 https://devdocs.prestashop.com/ for more information.
+ *
+ * @author    PrestaShop SA and Contributors <contact@prestashop.com>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
+ */
+header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
+header('Last-Modified: ' . gmdate('D, d M Y H:i:s') . ' GMT');
+
+header('Cache-Control: no-store, no-cache, must-revalidate');
+header('Cache-Control: post-check=0, pre-check=0', false);
+header('Pragma: no-cache');
+
+header('Location: ../');
+exit;

modules/productcomments/views/js/jquery.rating.plugin.js

@@ -0,0 +1,157 @@
+/**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/AFL-3.0
+ * 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 https://devdocs.prestashop.com/ for more information.
+ *
+ * @author    PrestaShop SA and Contributors <contact@prestashop.com>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
+ */
+
+jQuery.fn.rating = function(generalOptions) {
+  const $ratings = $(this);
+
+  $ratings.each(function initRating() {
+    const $ratingComponent = $(this);
+    var options = generalOptions ? generalOptions : {};
+    if (!options.grade && $ratingComponent.data('grade')) {
+      options.grade = $ratingComponent.data('grade');
+    }
+    if (!options.min && $ratingComponent.data('min')) {
+      options.min = $ratingComponent.data('min');
+    }
+    if (!options.max && $ratingComponent.data('max')) {
+      options.max = $ratingComponent.data('max');
+    }
+    if (!options.input && $ratingComponent.data('input')) {
+      options.input = $ratingComponent.data('input');
+    }
+    var componentOptions = jQuery.extend({
+      grade: null,
+      input: null,
+      min: 1,
+      max: 5,
+      starWidth: 20
+    }, options);
+
+    const minValue = Math.min(componentOptions.min, componentOptions.max);
+    const maxValue = Math.max(componentOptions.min, componentOptions.max);
+    const ratingValue = Math.min(Math.max(minValue, componentOptions.grade), maxValue);
+
+    $ratingComponent.html('');
+    $ratingComponent.append('<div class="star-content star-empty clearfix"></div>');
+    $ratingComponent.append('<div class="star-content star-full clearfix"></div>');
+
+    const emptyStars = $('.star-empty', this);
+    const fullStars = $('.star-full', this);
+    const emptyStar = $('<div class="star"></div>');
+    const fullStar = $('<div class="star-on"></div>');
+
+    var ratingInput;
+    if (componentOptions.input) {
+      ratingInput = $('<input type="number" name="'+componentOptions.input+'" id="'+componentOptions.input+'" />');
+      ratingInput.val(ratingValue);
+      ratingInput.css('display', 'none');
+      ratingInput.on('change', displayInteractiveGrade);
+      $ratingComponent.append(ratingInput);
+      initInteractiveGrade();
+    } else {
+      displayGrade(ratingValue);
+    }
+
+    function initInteractiveGrade() {
+      emptyStars.html('');
+      fullStars.html('');
+      var newStar;
+      for (var i = minValue; i <= maxValue; ++i) {
+        newStar = emptyStar.clone();
+        newStar.data('grade', i);
+        newStar.on('mouseenter mouseleave', function overStar() {
+          var overIndex = $('.star', fullStars).index($(this));
+          $('.star', fullStars).each(function overStars() {
+            $(this).removeClass('star-on');
+            var starIndex = $('.star', fullStars).index($(this));
+            if (starIndex <= overIndex) {
+              $(this).addClass('star-hover');
+            } else {
+              $(this).removeClass('star-hover');
+            }
+          });
+        });
+        newStar.on('click', function selectGrade() {
+          var selectedGrade = $(this).data('grade');
+          ratingInput.val(selectedGrade);
+        });
+        fullStars.append(newStar);
+      }
+
+      fullStars.on('mouseenter', function(){}).on('mouseleave', displayInteractiveGrade);
+      displayInteractiveGrade();
+    }
+
+    function displayInteractiveGrade() {
+      $('.star', fullStars).each(function displayStar() {
+        var starValue = $(this).data('grade');
+        $(this).removeClass('star-hover');
+        if (starValue <= ratingInput.val()) {
+          $(this).addClass('star-on');
+        } else {
+          $(this).removeClass('star-on');
+        }
+      });
+    }
+
+    function displayGrade(grade) {
+      emptyStars.html('');
+      fullStars.html('');
+      var newStar;
+      for (var i = minValue; i <= maxValue; ++i) {
+        if (i <= Math.floor(grade)) {
+          newStar = emptyStar.clone();
+          newStar.css('visibility', 'hidden');
+          emptyStars.append(newStar);
+          fullStars.append(fullStar.clone());
+        } else if (i > Math.ceil(grade)) {
+          newStar = emptyStar.clone();
+          emptyStars.append(newStar.clone());
+        } else {
+          //This the partial star composed of
+          // - one invisible partial empty star
+          // - one visible partial empty star (remaining part)
+          // - one visible partial full star
+          var fullWidth = (grade - i + 1) * componentOptions.starWidth;
+          var emptyWidth = componentOptions.starWidth - fullWidth;
+          newStar = emptyStar.clone();
+          newStar.css('visibility', 'hidden');
+          newStar.css('width', fullWidth);
+          emptyStars.append(newStar);
+
+          newStar = emptyStar.clone();
+          newStar.css('width', emptyWidth);
+          newStar.css('background-position', '0px -'+fullWidth+'px');
+          newStar.css('background-position', '-'+fullWidth+'px 0px');
+          newStar.css('marginLeft', 0);
+          emptyStars.append(newStar);
+
+          fullStar.css('width', fullWidth);
+          fullStars.append(fullStar.clone());
+        }
+      }
+    }
+  });
+}

modules/productcomments/views/js/jquery.simplePagination.js

@@ -0,0 +1,398 @@
+/**
+* simplePagination.js v1.6
+* A simple jQuery pagination plugin.
+* http://flaviusmatis.github.com/simplePagination.js/
+*
+* Copyright 2012, Flavius Matis
+* Released under the MIT license.
+* http://flaviusmatis.github.com/license.html
+*/
+
+(function($){
+
+	var methods = {
+		init: function(options) {
+			var o = $.extend({
+				items: 1,
+				itemsOnPage: 1,
+				pages: 0,
+				displayedPages: 5,
+				edges: 2,
+				currentPage: 0,
+				useAnchors: true,
+				hrefTextPrefix: '#page-',
+				hrefTextSuffix: '',
+				prevText: 'Prev',
+				nextText: 'Next',
+				ellipseText: '…',
+				ellipsePageSet: true,
+				cssStyle: 'light-theme',
+				listStyle: '',
+				labelMap: [],
+				selectOnClick: true,
+				nextAtFront: false,
+				invertPageOrder: false,
+				useStartEdge : true,
+				useEndEdge : true,
+				onPageClick: function(pageNumber, event) {
+					// Callback triggered when a page is clicked
+					// Page number is given as an optional parameter
+				},
+				onInit: function() {
+					// Callback triggered immediately after initialization
+				}
+			}, options || {});
+
+			var self = this;
+
+			o.pages = o.pages ? o.pages : Math.ceil(o.items / o.itemsOnPage) ? Math.ceil(o.items / o.itemsOnPage) : 1;
+			if (o.currentPage)
+				o.currentPage = o.currentPage - 1;
+			else
+				o.currentPage = !o.invertPageOrder ? 0 : o.pages - 1;
+			o.halfDisplayed = o.displayedPages / 2;
+
+			this.each(function() {
+				self.addClass(o.cssStyle + ' simple-pagination').data('pagination', o);
+				methods._draw.call(self);
+			});
+
+			o.onInit();
+
+			return this;
+		},
+
+		selectPage: function(page) {
+			methods._selectPage.call(this, page - 1);
+			return this;
+		},
+
+		prevPage: function() {
+			var o = this.data('pagination');
+			if (!o.invertPageOrder) {
+				if (o.currentPage > 0) {
+					methods._selectPage.call(this, o.currentPage - 1);
+				}
+			} else {
+				if (o.currentPage < o.pages - 1) {
+					methods._selectPage.call(this, o.currentPage + 1);
+				}
+			}
+			return this;
+		},
+
+		nextPage: function() {
+			var o = this.data('pagination');
+			if (!o.invertPageOrder) {
+				if (o.currentPage < o.pages - 1) {
+					methods._selectPage.call(this, o.currentPage + 1);
+				}
+			} else {
+				if (o.currentPage > 0) {
+					methods._selectPage.call(this, o.currentPage - 1);
+				}
+			}
+			return this;
+		},
+
+		getPagesCount: function() {
+			return this.data('pagination').pages;
+		},
+
+		setPagesCount: function(count) {
+			this.data('pagination').pages = count;
+		},
+
+		getCurrentPage: function () {
+			return this.data('pagination').currentPage + 1;
+		},
+
+		destroy: function(){
+			this.empty();
+			return this;
+		},
+
+		drawPage: function (page) {
+			var o = this.data('pagination');
+			o.currentPage = page - 1;
+			this.data('pagination', o);
+			methods._draw.call(this);
+			return this;
+		},
+
+		redraw: function(){
+			methods._draw.call(this);
+			return this;
+		},
+
+		disable: function(){
+			var o = this.data('pagination');
+			o.disabled = true;
+			this.data('pagination', o);
+			methods._draw.call(this);
+			return this;
+		},
+
+		enable: function(){
+			var o = this.data('pagination');
+			o.disabled = false;
+			this.data('pagination', o);
+			methods._draw.call(this);
+			return this;
+		},
+
+		updateItems: function (newItems) {
+			var o = this.data('pagination');
+			o.items = newItems;
+			o.pages = methods._getPages(o);
+			this.data('pagination', o);
+			methods._draw.call(this);
+		},
+
+		updateItemsOnPage: function (itemsOnPage) {
+			var o = this.data('pagination');
+			o.itemsOnPage = itemsOnPage;
+			o.pages = methods._getPages(o);
+			this.data('pagination', o);
+			methods._selectPage.call(this, 0);
+			return this;
+		},
+
+		getItemsOnPage: function() {
+			return this.data('pagination').itemsOnPage;
+		},
+
+		_draw: function() {
+			var	o = this.data('pagination'),
+				interval = methods._getInterval(o),
+				i,
+				tagName;
+
+			methods.destroy.call(this);
+
+			tagName = (typeof this.prop === 'function') ? this.prop('tagName') : this.attr('tagName');
+
+			var $panel = tagName === 'UL' ? this : $('<ul' + (o.listStyle ? ' class="' + o.listStyle + '"' : '') + '></ul>').appendTo(this);
+
+			// Generate Prev link
+			if (o.prevText) {
+				methods._appendItem.call(this, !o.invertPageOrder ? o.currentPage - 1 : o.currentPage + 1, {text: o.prevText, classes: 'prev'});
+			}
+
+			// Generate Next link (if option set for at front)
+			if (o.nextText && o.nextAtFront) {
+				methods._appendItem.call(this, !o.invertPageOrder ? o.currentPage + 1 : o.currentPage - 1, {text: o.nextText, classes: 'next'});
+			}
+
+			// Generate start edges
+			if (!o.invertPageOrder) {
+				if (interval.start > 0 && o.edges > 0) {
+					if(o.useStartEdge) {
+						var end = Math.min(o.edges, interval.start);
+						for (i = 0; i < end; i++) {
+							methods._appendItem.call(this, i);
+						}
+					}
+					if (o.edges < interval.start && (interval.start - o.edges != 1)) {
+						$panel.append('<li class="disabled"><span class="ellipse">' + o.ellipseText + '</span></li>');
+					} else if (interval.start - o.edges == 1) {
+						methods._appendItem.call(this, o.edges);
+					}
+				}
+			} else {
+				if (interval.end < o.pages && o.edges > 0) {
+					if(o.useStartEdge) {
+						var begin = Math.max(o.pages - o.edges, interval.end);
+						for (i = o.pages - 1; i >= begin; i--) {
+							methods._appendItem.call(this, i);
+						}
+					}
+
+					if (o.pages - o.edges > interval.end && (o.pages - o.edges - interval.end != 1)) {
+						$panel.append('<li class="disabled"><span class="ellipse">' + o.ellipseText + '</span></li>');
+					} else if (o.pages - o.edges - interval.end == 1) {
+						methods._appendItem.call(this, interval.end);
+					}
+				}
+			}
+
+			// Generate interval links
+			if (!o.invertPageOrder) {
+				for (i = interval.start; i < interval.end; i++) {
+					methods._appendItem.call(this, i);
+				}
+			} else {
+				for (i = interval.end - 1; i >= interval.start; i--) {
+					methods._appendItem.call(this, i);
+				}
+			}
+
+			// Generate end edges
+			if (!o.invertPageOrder) {
+				if (interval.end < o.pages && o.edges > 0) {
+					if (o.pages - o.edges > interval.end && (o.pages - o.edges - interval.end != 1)) {
+						$panel.append('<li class="disabled"><span class="ellipse">' + o.ellipseText + '</span></li>');
+					} else if (o.pages - o.edges - interval.end == 1) {
+						methods._appendItem.call(this, interval.end);
+					}
+					if(o.useEndEdge) {
+						var begin = Math.max(o.pages - o.edges, interval.end);
+						for (i = begin; i < o.pages; i++) {
+							methods._appendItem.call(this, i);
+						}
+					}
+				}
+			} else {
+				if (interval.start > 0 && o.edges > 0) {
+					if (o.edges < interval.start && (interval.start - o.edges != 1)) {
+						$panel.append('<li class="disabled"><span class="ellipse">' + o.ellipseText + '</span></li>');
+					} else if (interval.start - o.edges == 1) {
+						methods._appendItem.call(this, o.edges);
+					}
+
+					if(o.useEndEdge) {
+						var end = Math.min(o.edges, interval.start);
+						for (i = end - 1; i >= 0; i--) {
+							methods._appendItem.call(this, i);
+						}
+					}
+				}
+			}
+
+			// Generate Next link (unless option is set for at front)
+			if (o.nextText && !o.nextAtFront) {
+				methods._appendItem.call(this, !o.invertPageOrder ? o.currentPage + 1 : o.currentPage - 1, {text: o.nextText, classes: 'next'});
+			}
+
+			if (o.ellipsePageSet && !o.disabled) {
+				methods._ellipseClick.call(this, $panel);
+			}
+
+		},
+
+		_getPages: function(o) {
+			var pages = Math.ceil(o.items / o.itemsOnPage);
+			return pages || 1;
+		},
+
+		_getInterval: function(o) {
+			return {
+				start: Math.ceil(o.currentPage > o.halfDisplayed ? Math.max(Math.min(o.currentPage - o.halfDisplayed, (o.pages - o.displayedPages)), 0) : 0),
+				end: Math.ceil(o.currentPage > o.halfDisplayed ? Math.min(o.currentPage + o.halfDisplayed, o.pages) : Math.min(o.displayedPages, o.pages))
+			};
+		},
+
+		_appendItem: function(pageIndex, opts) {
+			var self = this, options, $link, o = self.data('pagination'), $linkWrapper = $('<li></li>'), $ul = self.find('ul');
+
+			pageIndex = pageIndex < 0 ? 0 : (pageIndex < o.pages ? pageIndex : o.pages - 1);
+
+			options = {
+				text: pageIndex + 1,
+				classes: ''
+			};
+
+			if (o.labelMap.length && o.labelMap[pageIndex]) {
+				options.text = o.labelMap[pageIndex];
+			}
+
+			options = $.extend(options, opts || {});
+
+			if (pageIndex == o.currentPage || o.disabled) {
+				if (o.disabled || options.classes === 'prev' || options.classes === 'next') {
+					$linkWrapper.addClass('disabled');
+				} else {
+					$linkWrapper.addClass('active');
+				}
+				$link = $('<span class="current">' + (options.text) + '</span>');
+			} else {
+				if (o.useAnchors) {
+					$link = $('<a href="' + o.hrefTextPrefix + (pageIndex + 1) + o.hrefTextSuffix + '" class="page-link">' + (options.text) + '</a>');
+				} else {
+					$link = $('<span >' + (options.text) + '</span>');
+				}
+				$link.click(function(event){
+					return methods._selectPage.call(self, pageIndex, event);
+				});
+			}
+
+			if (options.classes) {
+				$link.addClass(options.classes);
+			}
+
+			$linkWrapper.append($link);
+
+			if ($ul.length) {
+				$ul.append($linkWrapper);
+			} else {
+				self.append($linkWrapper);
+			}
+		},
+
+		_selectPage: function(pageIndex, event) {
+			var o = this.data('pagination');
+			o.currentPage = pageIndex;
+			if (o.selectOnClick) {
+				methods._draw.call(this);
+			}
+			return o.onPageClick(pageIndex + 1, event);
+		},
+
+
+		_ellipseClick: function($panel) {
+			var self = this,
+				o = this.data('pagination'),
+				$ellip = $panel.find('.ellipse');
+			$ellip.addClass('clickable').parent().removeClass('disabled');
+			$ellip.click(function(event) {
+				if (!o.disable) {
+					var $this = $(this),
+						val = (parseInt($this.parent().prev().text(), 10) || 0) + 1;
+					$this
+						.html('<input type="number" min="1" max="' + o.pages + '" step="1" value="' + val + '">')
+						.find('input')
+						.focus()
+						.click(function(event) {
+							// prevent input number arrows from bubbling a click event on $ellip
+							event.stopPropagation();
+						})
+						.keyup(function(event) {
+							var val = $(this).val();
+							if (event.which === 13 && val !== '') {
+								// enter to accept
+								if ((val>0)&&(val<=o.pages))
+								methods._selectPage.call(self, val - 1);
+							} else if (event.which === 27) {
+								// escape to cancel
+								$ellip.empty().html(o.ellipseText);
+							}
+						})
+						.bind('blur', function(event) {
+							var val = $(this).val();
+							if (val !== '') {
+								methods._selectPage.call(self, val - 1);
+							}
+							$ellip.empty().html(o.ellipseText);
+							return false;
+						});
+				}
+				return false;
+			});
+		}
+
+	};
+
+	$.fn.pagination = function(method) {
+
+		// Method calling logic
+		if (methods[method] && method.charAt(0) != '_') {
+			return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
+		} else if (typeof method === 'object' || !method) {
+			return methods.init.apply(this, arguments);
+		} else {
+			$.error('Method ' +  method + ' does not exist on jQuery.pagination');
+		}
+
+	};
+
+})(jQuery);

modules/productcomments/views/js/list-comments.js

@@ -0,0 +1,169 @@
+/**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/AFL-3.0
+ * 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 https://devdocs.prestashop.com/ for more information.
+ *
+ * @author    PrestaShop SA and Contributors <contact@prestashop.com>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
+ */
+
+jQuery(document).ready(function () {
+  const $ = jQuery;
+  const commentsList = $('#product-comments-list');
+  const emptyProductComment = $('#empty-product-comment');
+  const commentsListUrl = commentsList.data('list-comments-url');
+  const updateCommentUsefulnessUrl = commentsList.data('update-comment-usefulness-url');
+  const reportCommentUrl = commentsList.data('report-comment-url');
+  const commentPrototype = commentsList.data('comment-item-prototype');
+
+  emptyProductComment.hide();
+  $('.grade-stars').rating();
+
+  prestashop.on('updatedProduct', function() {
+    $('.product-comments-additional-info .grade-stars').rating();
+  })
+
+  document.addEventListener('updateRating', function() {
+    $('.grade-stars').rating();
+  });
+
+  const updateCommentPostErrorModal = $('#update-comment-usefulness-post-error');
+
+  const confirmAbuseModal = $('#report-comment-confirmation');
+  const reportCommentPostErrorModal = $('#report-comment-post-error');
+  const reportCommentPostedModal = $('#report-comment-posted');
+
+  function showUpdatePostCommentErrorModal(errorMessage) {
+    $('#update-comment-usefulness-post-error-message').html(errorMessage);
+    updateCommentPostErrorModal.modal('show');
+  }
+
+  function showReportCommentErrorModal(errorMessage) {
+    $('#report-comment-post-error-message').html(errorMessage);
+    reportCommentPostErrorModal.modal('show');
+  }
+
+  function paginateComments(page) {
+    $.get(commentsListUrl, {page: page}, function(jsonResponse) {
+      if (jsonResponse.comments && jsonResponse.comments.length > 0) {
+        populateComments(jsonResponse.comments);
+        if (jsonResponse.comments_nb > jsonResponse.comments_per_page) {
+          $('#product-comments-list-pagination').pagination({
+            currentPage: page,
+            items: jsonResponse.comments_nb,
+            itemsOnPage: jsonResponse.comments_per_page,
+            cssStyle: '',
+            prevText: '<i class="material-icons" data-icon="chevron_left"></i>',
+            nextText: '<i class="material-icons" data-icon="chevron_right"></i>',
+            useAnchors: false,
+            displayedPages: 2,
+            onPageClick: paginateComments
+          });
+        } else {
+          $('#product-comments-list-pagination').hide();
+        }
+      } else {
+        commentsList.html('');
+        emptyProductComment.show();
+        commentsList.append(emptyProductComment);
+      }
+    });
+  }
+
+  function populateComments(comments) {
+    commentsList.html('');
+    comments.forEach(addComment);
+  }
+
+  function addComment(comment) {
+    var commentTemplate = commentPrototype;
+    var customerName = comment.customer_name;
+    if (!customerName) {
+      customerName = comment.firstname+' '+comment.lastname;
+    }
+    commentTemplate = commentTemplate.replace(/@COMMENT_ID@/, comment.id_product_comment);
+    commentTemplate = commentTemplate.replace(/@PRODUCT_ID@/, comment.id_product);
+    commentTemplate = commentTemplate.replace(/@CUSTOMER_NAME@/, customerName);
+    commentTemplate = commentTemplate.replace(/@COMMENT_DATE@/, comment.date_add);
+    commentTemplate = commentTemplate.replace(/@COMMENT_TITLE@/, comment.title);
+    commentTemplate = commentTemplate.replace(/@COMMENT_COMMENT@/, comment.content);
+    commentTemplate = commentTemplate.replace(/@COMMENT_USEFUL_ADVICES@/, comment.usefulness);
+    commentTemplate = commentTemplate.replace(/@COMMENT_GRADE@/, comment.grade);
+    commentTemplate = commentTemplate.replace(/@COMMENT_NOT_USEFUL_ADVICES@/, (comment.total_usefulness - comment.usefulness));
+    commentTemplate = commentTemplate.replace(/@COMMENT_TOTAL_ADVICES@/, comment.total_usefulness);
+
+    const $comment = $(commentTemplate);
+    $('.grade-stars', $comment).rating({
+      grade: comment.grade
+    });
+    $('.useful-review', $comment).click(function() {
+      updateCommentUsefulness($comment, comment.id_product_comment, 1);
+    });
+    $('.not-useful-review', $comment).click(function() {
+      updateCommentUsefulness($comment, comment.id_product_comment, 0);
+    });
+    $('.report-abuse', $comment).click(function() {
+      confirmCommentAbuse(comment.id_product_comment);
+    });
+
+    commentsList.append($comment);
+  }
+
+  function updateCommentUsefulness($comment, commentId, usefulness) {
+    $.post(updateCommentUsefulnessUrl, {id_product_comment: commentId, usefulness: usefulness}, function(jsonData){
+      if (jsonData) {
+        if (jsonData.success) {
+          $('.useful-review-value', $comment).html(jsonData.usefulness);
+          $('.not-useful-review-value', $comment).html(jsonData.total_usefulness - jsonData.usefulness);
+        } else {
+          const decodedErrorMessage = $("<div/>").html(jsonData.error).text();
+          showUpdatePostCommentErrorModal(decodedErrorMessage);
+        }
+      } else {
+        showUpdatePostCommentErrorModal(productCommentUpdatePostErrorMessage);
+      }
+    }).fail(function() {
+      showUpdatePostCommentErrorModal(productCommentUpdatePostErrorMessage);
+    });
+  }
+
+  function confirmCommentAbuse(commentId) {
+    confirmAbuseModal.modal('show');
+    confirmAbuseModal.one('modal:confirm', function(event, confirm) {
+      if (!confirm) {
+        return;
+      }
+      $.post(reportCommentUrl, {id_product_comment: commentId}, function(jsonData){
+        if (jsonData) {
+          if (jsonData.success) {
+            reportCommentPostedModal.modal('show');
+          } else {
+            showReportCommentErrorModal(jsonData.error);
+          }
+        } else {
+          showReportCommentErrorModal(productCommentAbuseReportErrorMessage);
+        }
+      }).fail(function() {
+        showReportCommentErrorModal(productCommentAbuseReportErrorMessage);
+      });
+    })
+  }
+
+  paginateComments(1);
+});

modules/productcomments/views/js/post-comment.js

@@ -0,0 +1,131 @@
+/**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/AFL-3.0
+ * 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 https://devdocs.prestashop.com/ for more information.
+ *
+ * @author    PrestaShop SA and Contributors <contact@prestashop.com>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
+ */
+
+jQuery(document).ready(function () {
+  const $ = jQuery;
+  $('body').on('click', '.post-product-comment', function (event) {
+    event.preventDefault();
+    showPostCommentModal();
+  });
+
+  const postCommentModal = $('#post-product-comment-modal');
+  postCommentModal.on('hidden.bs.modal', function () {
+    postCommentModal.modal('hide');
+    clearPostCommentForm();
+  });
+
+  const commentPostedModal = $('#product-comment-posted-modal');
+  const commentPostErrorModal = $('#product-comment-post-error');
+
+  function showPostCommentModal() {
+    commentPostedModal.modal('hide');
+    commentPostErrorModal.modal('hide');
+    postCommentModal.modal('show');
+  }
+
+  function showCommentPostedModal() {
+    postCommentModal.modal('hide');
+    commentPostErrorModal.modal('hide');
+    clearPostCommentForm();
+    commentPostedModal.modal('show');
+  }
+
+  function showPostErrorModal(errorMessage) {
+    postCommentModal.modal('hide');
+    commentPostedModal.modal('hide');
+    clearPostCommentForm();
+    $('#product-comment-post-error-message').html(errorMessage);
+    commentPostErrorModal.modal('show');
+  }
+
+  function clearPostCommentForm() {
+    $('#post-product-comment-form input[type="text"]').val('');
+    $('#post-product-comment-form input[type="text"]').removeClass('valid error');
+    $('#post-product-comment-form textarea').val('');
+    $('#post-product-comment-form textarea').removeClass('valid error');
+    $('#post-product-comment-form .criterion-rating input').val(3).trigger('change');
+  }
+
+  function initCommentModal() {
+    $('#post-product-comment-modal .grade-stars').rating();
+    $('body').on('click', '.post-product-comment', function (event) {
+      event.preventDefault();
+      showPostCommentModal();
+    });
+
+    $('#post-product-comment-form').on('submit', submitCommentForm);
+  }
+
+  function submitCommentForm(event) {
+    event.preventDefault();
+    var formData = $(this).serializeArray();
+    if (!validateFormData(formData)) {
+      return;
+    }
+    $.post($(this).attr('action'), $(this).serialize(), function(jsonData) {
+      if (jsonData) {
+        if (jsonData.success) {
+          clearPostCommentForm();
+          showCommentPostedModal();
+        } else {
+          if (jsonData.errors) {
+            var errorList = '<ul>';
+            for (var i = 0; i < jsonData.errors.length; ++i) {
+              errorList += '<li>' + jsonData.errors[i] + '</li>';
+            }
+            errorList += '</ul>';
+            showPostErrorModal(errorList);
+          } else {
+            const decodedErrorMessage = $("<div/>").html(jsonData.error).text();
+            showPostErrorModal(decodedErrorMessage);
+          }
+        }
+      } else {
+        showPostErrorModal(productCommentPostErrorMessage);
+      }
+    }).fail(function() {
+      showPostErrorModal(productCommentPostErrorMessage);
+    });
+  }
+
+  function validateFormData(formData) {
+    var isValid = true;
+    formData.forEach(function(formField) {
+      const fieldSelector = '#post-product-comment-form [name="'+formField.name+'"]';
+      if (!formField.value) {
+        $(fieldSelector).addClass('error');
+        $(fieldSelector).removeClass('valid');
+        isValid = false;
+      } else {
+        $(fieldSelector).removeClass('error');
+        $(fieldSelector).addClass('valid');
+      }
+    });
+
+    return isValid;
+  }
+
+  initCommentModal();
+});

modules/productcomments/views/js/productListingComments.js

@@ -0,0 +1,151 @@
+/**
+ * 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 <contact@prestashop.com>
+ * @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() {
+    productListingComments.init();
+    productListingComments.load();
+});
+
+
+var productListingComments = (function () {
+
+    var data = {
+        productIDs: [],
+        commentsLoadingInProgress: false,
+        ajaxIDsLimit: 50,
+        ajaxUrl: ''
+    }
+
+    var DOMStrings = {
+        productListReviewsContainer: '.product-list-reviews',
+        productListReviewsNumberOfComments: '.comments-nb',
+        productListReviewsStarsContainer: '.grade-stars',
+        productContainer: '.thumbnail-container'
+    };
+
+    var DOMClasses =  {
+        inProgress: 'reviews-loading',
+        reviewsLoaded: 'reviews-loaded',
+        hasReviews: 'has-reviews'
+    };
+
+    function setEvents() {
+        prestashop.on('updateProductList', function() {
+            addProductsIDs();
+        });
+    }
+
+
+    function setAjaxUrl() {
+        if (data.ajaxUrl !== '')
+            return;
+
+        var url = $(DOMStrings.productListReviewsContainer).first().data('url');
+        data.ajaxUrl = url;
+    }
+
+    function getNewProductsReviewsElements() {
+        var $productListReviews = $(DOMStrings.productContainer)
+            .not('.' + DOMClasses.reviewsLoaded + ', .' + DOMClasses.inProgress)
+            .addClass(DOMClasses.inProgress)
+            .find(DOMStrings.productListReviewsContainer);
+
+        return $productListReviews;
+    }
+
+    function addProductsIDs() {
+
+        var $productsList = getNewProductsReviewsElements(),
+            seenIds = {};
+
+        $productsList.each(function () {
+            var id = $(this).data('id');
+            seenIds[id] = true;
+        });
+
+
+        var IDsArray = Object.keys(seenIds).filter(e => e !== 'undefined');
+        var prevDataIDs = data.productIDs.splice(0);
+        data.productIDs = prevDataIDs.concat(IDsArray);
+
+        if (!data.commentsLoadingInProgress) {
+            loadProductsData();
+        }
+    }
+
+    function loadProductsData() {
+        if (data.productIDs.length === 0)
+            return;
+
+        data.commentsLoadingInProgress = true;
+
+        var dataIDsCopy = data.productIDs.slice(0);
+            selectedProductIDs = dataIDsCopy.splice(0, data.ajaxIDsLimit);
+
+
+        $.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 + '"]');
+
+                    $productsReviewsContainer.each(function () {
+                        var $self = $(this);
+
+                        if (productData.comments_nb > 0) {
+                            $self.find(DOMStrings.productListReviewsStarsContainer).rating({ grade: productData.average_grade, starWidth: 16 });
+                            $self.find(DOMStrings.productListReviewsNumberOfComments).text('(' + productData.comments_nb + ')');
+                            $self.closest(DOMStrings.productContainer).addClass(DOMClasses.hasReviews);
+                            $self.css('visibility', 'visible');
+                        }
+
+                        $self.closest(DOMStrings.productContainer).addClass(DOMClasses.reviewsLoaded);
+                        $self.closest(DOMStrings.productContainer).removeClass(DOMClasses.inProgress);
+
+                    });
+                    data.productIDs.shift();
+                });
+
+                data.commentsLoadingInProgress = false;
+                if (data.productIDs.length > 0) {
+                    loadProductsData();
+                }
+
+            }
+        });
+    }
+
+
+    return {
+        load: function () {
+            addProductsIDs();
+        },
+        init: function () {
+            setAjaxUrl();
+            setEvents();
+        }
+    }
+})();