Subida del módulo y tema de PrestaShop

themes/hummingbird/modules/productcomments/views/css/productcomments.css

@@ -0,0 +1 @@
+/* Empty productcomments */

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

@@ -0,0 +1 @@
+/* productcomments */

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

@@ -0,0 +1 @@
+/* productcomments */

themes/hummingbird/modules/productcomments/views/js/productListingComments.js

@@ -0,0 +1,2 @@
+/* productcomments */
+

themes/hummingbird/modules/productcomments/views/templates/hook/alert-modal.tpl

@@ -0,0 +1,36 @@
+{**
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ *}
+
+{assign var='icon' value=$icon|default:'check'}
+{assign var='modal_message' value=$modal_message|default:''}
+
+
+<div id="{$modal_id}" class="modal fade product-comment-modal" tabindex="-1" aria-labelledby="{$modal_id}-title" aria-hidden="true" data-ps-ref="{$data_ps_ref|default:$modal_id}">
+  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <p class="h2 modal-title" id="{$modal_id}-title">
+          {$modal_title}
+        </p>
+
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{l s='Close' d='Shop.Theme.Global'}"></button>
+      </div>
+
+      <div class="modal-body">
+        <div class="row">
+          <div class="col-md-12  col-sm-12" id="{$modal_id}-message">
+            {$modal_message}
+          </div>
+        </div>
+      </div>
+
+      <div class="modal-footer post-comment-buttons">
+        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">
+          {l s='Ok' d='Modules.Productcomments.Shop'}
+        </button>
+      </div>
+    </div>
+  </div>
+</div>

themes/hummingbird/modules/productcomments/views/templates/hook/average-grade-stars.tpl

@@ -0,0 +1,15 @@
+{**
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ *}
+
+{if $nb_comments != 0}
+  <div class="comments-note" data-ps-ref="comments-note">
+    <div class="grade-stars" data-ps-ref="grade-stars" data-grade="{$grade}"></div>
+    {if isset($showNbComments) && $showNbComments}
+      <div class="comments-number" data-ps-ref="comments-number">({$nb_comments})</div>
+    {elseif isset($showGradeAverage) && $showGradeAverage}
+      <div class="average-grade" data-ps-ref="average-grade">({$grade|number_format:1})</div>
+    {/if}
+  </div>
+{/if}

themes/hummingbird/modules/productcomments/views/templates/hook/confirm-modal.tpl

@@ -0,0 +1,41 @@
+{**
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ *}
+
+{assign var='icon' value=$icon|default:'check'}
+{assign var='modal_message' value=$modal_message|default:''}
+
+<div id="{$modal_id}" class="modal fade product-comment-modal" tabindex="-1" aria-labelledby="{$modal_id}-title"
+  aria-hidden="true" data-ps-ref="{$data_ps_ref|default:$modal_id}">
+  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <p class="h2 modal-title" id="{$modal_id}-title">
+          {$modal_title}
+        </p>
+
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{l s='Close' d='Shop.Theme.Global'}"></button>
+      </div>
+
+      <div class="modal-body">
+        <div id="{$modal_id}-message">
+          {$modal_message}
+        </div>
+      </div>
+
+      <div class="modal-footer">
+        <div class="post-comment-buttons">
+          <button type="button" class="btn btn-outline-primary me-2 refuse-button" data-bs-dismiss="modal" data-ps-ref="refuse-button"
+            aria-label="{l s='No' d='Modules.Productcomments.Shop'}">
+            {l s='No' d='Modules.Productcomments.Shop'}
+          </button>
+          <button type="button" class="btn btn-primary confirm-button" data-bs-dismiss="modal" data-ps-ref="confirm-button"
+            aria-label="{l s='Yes' d='Modules.Productcomments.Shop'}">
+            {l s='Yes' d='Modules.Productcomments.Shop'}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

themes/hummingbird/modules/productcomments/views/templates/hook/empty-product-comment.tpl

@@ -0,0 +1,14 @@
+{**
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ *}
+
+<div id="empty-product-comment" data-ps-ref="empty-product-comment" class="product-comment-list-item py-3">
+  {if $post_allowed == 1}
+    <button class="btn btn-outline-primary post-product-comment" id="product-footer-review-button" type="button" data-bs-toggle="modal" data-bs-target="#post-product-comment-modal" data-ps-ref="product-post-review-button">
+      {l s='Be the first to write your review' d='Modules.Productcomments.Shop'}
+    </button>
+  {else}
+    {l s='No customer reviews for the moment.' d='Modules.Productcomments.Shop'}
+  {/if}
+</div>

themes/hummingbird/modules/productcomments/views/templates/hook/post-comment-modal.tpl

@@ -0,0 +1,193 @@
+{**
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ *}
+
+<script type="text/javascript">
+  var productCommentPostErrorMessage = '{l s='Sorry, your review cannot be posted.' d='Modules.Productcomments.Shop' js=1}';
+  var productCommentMandatoryMessage = '{l s='Please choose a rating for your review.' d='Modules.Productcomments.Shop' js=1}';
+  var ratingChosen = false;
+</script>
+
+<div id="post-product-comment-modal" class="modal fade product-comment-modal" tabindex="-1" aria-labelledby="product-post-review-modal-title" aria-hidden="true" data-ps-ref="product-post-review-modal">
+  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
+    <form class="modal-content" id="post-product-comment-form" action="{$post_comment_url nofilter}" method="POST" data-ps-ref="product-post-review-form" data-ps-action="form-validation">
+      <div class="modal-header">
+        <p class="h2 modal-title" id="product-post-review-modal-title">{l s='Write your review' d='Modules.Productcomments.Shop'}</p>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+
+      <div class="modal-body">
+        <div class="row">
+          <div class="col-12 col-sm-2 mb-4">
+            {if isset($product) && $product}
+              {block name='product_cover'}
+                <div class="product-cover">
+                  {if !empty($product.cover)}
+                    <picture>
+                      {if isset($product.cover.bySize.default_xs.sources.avif)}
+                        <source srcset="
+                           {$product.cover.bySize.default_xs.sources.avif},
+                           {$product.cover.bySize.default_md.sources.avif} 2x"
+                          type="image/avif">
+                      {/if}
+
+                      {if isset($product.cover.bySize.default_xs.sources.webp)}
+                        <source srcset="
+                           {$product.cover.bySize.default_xs.sources.webp},
+                           {$product.cover.bySize.default_md.sources.webp} 2x"
+                          type="image/webp">
+                      {/if}
+
+                      <img class="js-qv-product-cover rounded img-fluid" srcset="
+                         {$product.cover.bySize.default_xs.url},
+                         {$product.cover.bySize.default_md.url} 2x" loading="lazy"
+                        width="{$product.cover.bySize.default_xs.width}"
+                        height="{$product.cover.bySize.default_xs.height}"
+                        alt="{$product.cover.legend}"
+                        title="{$product.cover.legend}">
+                    </picture>
+                  {else}
+                    <picture>
+                      {if isset($urls.no_picture_image.bySize.default_xs.sources.avif)}
+                        <source srcset="
+                           {$urls.no_picture_image.bySize.default_xs.sources.avif},
+                           {$urls.no_picture_image.bySize.default_md.sources.avif} 2x"
+                          type="image/avif">
+                      {/if}
+
+                      {if isset($urls.no_picture_image.bySize.default_xs.sources.webp)}
+                        <source srcset="
+                           {$urls.no_picture_image.bySize.default_xs.sources.webp},
+                           {$urls.no_picture_image.bySize.default_md.sources.webp} 2x"
+                          type="image/webp">
+                      {/if}
+
+                      <img class="rounded img-fluid" srcset="
+                         {$urls.no_picture_image.bySize.default_xs.url},
+                         {$urls.no_picture_image.bySize.default_md.url} 2x"
+                        width="{$urls.no_picture_image.bySize.default_xs.width}"
+                        height="{$urls.no_picture_image.bySize.default_xs.height}" loading="lazy">
+                    </picture>
+                  {/if}
+                </div>
+              {/block}
+            {/if}
+          </div>
+
+          <div class="col-12 col-sm-10">
+            <p class="h5">{$product.name}</p>
+            {block name='product_description_short'}
+              <div itemprop="description">{$product.description_short nofilter}</div>
+            {/block}
+          </div>
+
+          <div class="col-12">
+            {if $criterions|@count > 0}
+              <ul id="criterions_list" data-ps-ref="criterions-list">
+                {foreach from=$criterions item='criterion'}
+                  <li {if !$criterion@last}class="mb-2"{/if}>
+                    <fieldset class="star-rating-group" aria-labelledby="rating-label-{$criterion.id_product_comment_criterion}">
+                      <legend id="rating-label-{$criterion.id_product_comment_criterion}" class="form-label required">
+                        <span class="visually-hidden">{l s='Rating for ' d='Modules.Productcomments.Shop'}</span>
+                        {$criterion.name|escape:'html':'UTF-8'}
+                      </legend>
+
+                      <div class="form-check stars-selector" aria-labelledby="rating-label-{$criterion.id_product_comment_criterion}">
+                        {for $i=1 to 5 step 1}
+                          <input
+                            class="stars-selector__input visually-hidden"
+                            type="radio"
+                            id="star-{$i}-criterion-{$criterion.id_product_comment_criterion}" 
+                            name="criterion[{$criterion.id_product_comment_criterion}]"
+                            value="{$i}"
+                            {if $i == 1}
+                              aria-label="{l s='%s star out of 5' sprintf=[$i] d='Modules.Productcomments.Shop'}"
+                            {else}
+                              aria-label="{l s='%s stars out of 5' sprintf=[$i] d='Modules.Productcomments.Shop'}"
+                            {/if}
+                            required
+                          >
+                          <label class="stars-selector__input-label" for="star-{$i}-criterion-{$criterion.id_product_comment_criterion}" aria-hidden="true"></label>
+                        {/for}
+                        <div class="invalid-feedback">{l s='Please choose a rating for your review.' d='Modules.Productcomments.Shop'}</div>
+                      </div>
+                    </fieldset>
+                  </li>
+                {/foreach}
+              </ul>
+            {/if}
+          </div>
+        </div>
+
+        <div class="row">
+          {if !$logged}
+            <div class="col-sm-8 mb-3">
+              <label class="form-label required" for="comment_title">{l s='Title of your review' d='Modules.Productcomments.Shop'} </label>
+              <input class="form-control" name="comment_title" id="comment_title" type="text" value="" required>
+            </div>
+
+            <div class="col-sm-4 mb-3">
+              <label class="form-label required" for="customer_name">{l s='Your name' d='Modules.Productcomments.Shop'} </label>
+              <input class="form-control" name="customer_name" id="customer_name" type="text" value="" required>
+            </div>
+          {else}
+            <div class="mb-3">
+              <label class="form-label required" for="comment_title">{l s='Title of your review' d='Modules.Productcomments.Shop'} </label>
+              <input class="form-control" name="comment_title" id="comment_title" type="text" value="" required>
+            </div>
+          {/if}
+        </div>
+
+        <div class="mb-3">
+          <label class="form-label required" for="comment_content">{l s='Your review' d='Modules.Productcomments.Shop'} </label>
+          <textarea class="form-control" name="comment_content" id="comment_content" required></textarea>
+        </div>
+
+        {capture name='gdprContent'}{hook h='displayGDPRConsent' mod='psgdpr' id_module=$id_module}{/capture}
+        {if $smarty.capture.gdprContent != ''}
+          <div class="mb-3">
+            {$smarty.capture.gdprContent nofilter}
+          </div>
+        {/if}
+      </div>
+
+      <div class="modal-footer">
+        <p class="required">
+          <sup class="text-danger">*</sup> {l s='Required fields' d='Modules.Productcomments.Shop'}
+        </p>
+
+        <div class="post-comment-buttons d-flex flex-wrap gap-2 w-100 w-md-auto">
+          <button type="button" class="btn btn-outline-primary w-md-auto w-100" data-bs-dismiss="modal"
+            aria-label="{l s='Cancel' d='Modules.Productcomments.Shop'}">
+            {l s='Cancel' d='Modules.Productcomments.Shop'}
+          </button>
+
+          <button type="submit" class="btn btn-primary w-100 w-md-auto order-first order-md-last" aria-label="{l s='Send review' d='Modules.Productcomments.Shop'}" data-ps-action="form-validation-submit">
+            {l s='Send' d='Modules.Productcomments.Shop'}
+          </button>
+        </div>
+      </div>
+    </form>
+  </div>
+</div>
+
+{* Comment posted modal *}
+{if $moderation_active}
+  {assign var='comment_posted_message' value={l s='Your comment has been submitted and will be available once approved by a moderator.' d='Modules.Productcomments.Shop'}}
+{else}
+  {assign var='comment_posted_message' value={l s='Your comment has been added!' d='Modules.Productcomments.Shop'}}
+{/if}
+
+{include file='module:productcomments/views/templates/hook/alert-modal.tpl'
+  modal_id='product-post-review-posted-modal'
+  modal_title={l s='Review sent' d='Modules.Productcomments.Shop'}
+  modal_message=$comment_posted_message
+}
+
+{* Comment post error modal *}
+{include file='module:productcomments/views/templates/hook/alert-modal.tpl'
+  modal_id='product-post-review-error-modal'
+  modal_title={l s='Your review cannot be sent' d='Modules.Productcomments.Shop'}
+  icon='error'
+}

themes/hummingbird/modules/productcomments/views/templates/hook/product-additional-info.tpl

@@ -0,0 +1,23 @@
+{**
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ *}
+
+{if $nb_comments != 0 || $post_allowed == 1}
+  {if $nb_comments > 0}
+    <div class="product-comments-additional-info">
+      <a href="#product-comments-list-header"
+        aria-label="{l s='Rated %average_grade% out of 5 stars. Go to reviews section' sprintf=['%average_grade%' => {$average_grade|round:1}] d='Modules.Productcomments.Shop'}">
+        {include file='module:productcomments/views/templates/hook/average-grade-stars.tpl' grade=$average_grade showGradeAverage=true}
+      </a>
+    </div>
+  {else}
+    {if $post_allowed}
+      <div class="product-comments-additional-info">
+        <button class="btn btn-outline-primary post-product-comment" id="product-additional-info-review-button" type="button" data-bs-toggle="modal" data-bs-target="#post-product-comment-modal" data-ps-ref="product-post-review-button">
+          {l s='Write your review' d='Modules.Productcomments.Shop'}
+        </button>
+      </div>
+    {/if}
+  {/if}
+{/if}

themes/hummingbird/modules/productcomments/views/templates/hook/product-comment-item-prototype.tpl

@@ -0,0 +1,43 @@
+{**
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ *}
+
+<div class="product-comment-list-item comment" data-ps-ref="product-comment-item" data-product-comment-id="@COMMENT_ID@" data-product-id="@PRODUCT_ID@">
+  <div class="comment__top">
+    <div class="comment__author">
+      @CUSTOMER_NAME@
+    </div>
+
+    <div class="comment__date">
+      @COMMENT_DATE@
+    </div>
+  </div>
+
+  <div class="comment__infos">
+    <div class="grade-stars" data-ps-ref="grade-stars" data-grade="@COMMENT_GRADE@" aria-label="{l s='Rated' d='Modules.Productcomments.Shop'} @COMMENT_GRADE@ {l s='out of 5 stars' d='Modules.Productcomments.Shop'}"></div>
+    <p class="comment__title">@COMMENT_TITLE@</p>
+  </div>
+
+  <div class="comment__content">
+    <p class="comment__text">@COMMENT_COMMENT@</p>
+  </div>
+
+  <div class="comment__buttons">
+    {if $usefulness_enabled}
+      <button class="useful-review btn btn-sm btn-outline-primary" data-ps-ref="useful-review">
+        <i class="material-icons fs-6" aria-hidden="true">&#xE8DC;</i>
+        <span class="useful-review-value" data-ps-ref="useful-review-value">@COMMENT_USEFUL_ADVICES@</span>
+        <span class="visually-hidden">{l s='useful review(s). Mark this review as useful.' d='Modules.Productcomments.Shop'}</span>
+      </button>
+      <button class="not-useful-review btn btn-sm btn-outline-primary" data-ps-ref="not-useful-review">
+        <i class="material-icons fs-6" aria-hidden="true">&#xE8DB;</i>
+        <span class="not-useful-review-value" data-ps-ref="not-useful-review-value">@COMMENT_NOT_USEFUL_ADVICES@</span>
+        <span class="visually-hidden">{l s='not useful review(s). Mark this review as not useful.' d='Modules.Productcomments.Shop'}</span>
+      </button>
+    {/if}
+    <button class="report-abuse btn btn-sm btn-outline-primary" data-ps-ref="report-abuse">
+      <i class="material-icons fs-6" aria-hidden="true">&#xE153;</i> {l s='Report abuse' d='Modules.Productcomments.Shop'}
+    </button>
+  </div>
+</div>

themes/hummingbird/modules/productcomments/views/templates/hook/product-comments-list.tpl

@@ -0,0 +1,97 @@
+{**
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ *}
+
+<div class="product-comments-wrapper">
+  <script type="text/javascript">
+    var productCommentUpdatePostErrorMessage = '{l|escape:'javascript' s='Sorry, your review appreciation cannot be sent.' d='Modules.Productcomments.Shop'}';
+    var productCommentAbuseReportErrorMessage = '{l|escape:'javascript' s='Sorry, your abuse report cannot be sent.' d='Modules.Productcomments.Shop'}';
+  </script>
+
+  <div id="product-comments-list-header">
+    <h2 class="section-title">
+      {l s='Comments' d='Modules.Productcomments.Shop'} ({$nb_comments})
+    </h2>
+    {include file='module:productcomments/views/templates/hook/average-grade-stars.tpl' grade=$average_grade showGradeAverage=true showNbComments=false}
+  </div>
+
+  {if $nb_comments > 0 && $post_allowed}
+    <div id="product-comments-list-btn-group">
+      <button class="w-100 w-sm-auto btn btn-outline-primary post-product-comment" id="product-comments-list-review-button" type="button" data-bs-toggle="modal" data-bs-target="#post-product-comment-modal" data-ps-ref="product-post-review-button">
+        {l s='Write your review' d='Modules.Productcomments.Shop'}
+      </button>
+    </div>
+  {elseif $nb_comments == 0}
+    {include file='module:productcomments/views/templates/hook/empty-product-comment.tpl'}
+  {/if}
+
+  {include file='module:productcomments/views/templates/hook/product-comment-item-prototype.tpl' assign="comment_prototype"}
+
+  <div id="product-comments-list" class="{if $nb_comments > 0}has-comments{/if}"
+    data-ps-ref="product-comments-list"
+    data-list-comments-url="{$list_comments_url nofilter}"
+    data-update-comment-usefulness-url="{$update_comment_usefulness_url nofilter}"
+    data-report-comment-url="{$report_comment_url nofilter}"
+    data-comment-item-prototype="{$comment_prototype}"
+    data-current-page="1"
+    data-total-pages="{$list_total_pages}"
+    aria-live="polite"></div>
+
+  {if $list_total_pages > 1}
+    <div id="product-comments-list-footer">
+      <nav id="product-comments-list-pagination" data-ps-ref="product-comments-pagination" aria-label="{l s='Product comments pagination' d='Modules.Productcomments.Shop'}">
+        <ul class="pagination justify-content-center">
+          <li class="page-item disabled" data-ps-ref="pagination-item" data-ps-action="prev">
+            <button class="page-link btn prev" aria-label="{l s='Go to previous page' d='Shop.Theme.Actions'}">
+              <i class="material-icons" aria-hidden="true">&#xE5CB;</i>
+            </button>
+          </li>
+          {for $pageCount = 1 to $list_total_pages}
+            <li class="page-item {if $pageCount == 1}active{/if}" data-ps-ref="pagination-item" data-ps-action="page" data-ps-data="{$pageCount}">
+              <button class="page-link btn" {if $pageCount == 1}aria-current="page"{/if} aria-label="{l s='Go to page %pageCount%' d='Modules.Productcomments.Shop' sprintf=['%pageCount%' => $pageCount]}">{$pageCount}</button>
+            </li>
+          {/for}
+          <li class="page-item" data-ps-ref="pagination-item" data-ps-action="next">
+            <button class="page-link btn next" aria-label="{l s='Go to next page' d='Shop.Theme.Actions'}">
+              <i class="material-icons" aria-hidden="true">&#xE5CC;</i>
+            </button>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  {/if}
+
+  {* Appreciation post error modal *}
+  {include file='module:productcomments/views/templates/hook/alert-modal.tpl'
+    modal_id='update-comment-usefulness-post-error'
+    data_ps_ref='update-comment-usefulness-post-error'
+    modal_title={l s='Your review appreciation cannot be sent' d='Modules.Productcomments.Shop'}
+    icon='error'
+  }
+
+  {* Confirm report modal *}
+  {include file='module:productcomments/views/templates/hook/confirm-modal.tpl'
+    modal_id='report-comment-confirmation'
+    data_ps_ref='report-comment-confirmation'
+    modal_title={l s='Report comment' d='Modules.Productcomments.Shop'}
+    modal_message={l s='Are you sure that you want to report this comment?' d='Modules.Productcomments.Shop'}
+    icon='feedback'
+  }
+
+  {* Report comment posted modal *}
+  {include file='module:productcomments/views/templates/hook/alert-modal.tpl'
+    modal_id='report-comment-posted'
+    data_ps_ref='report-comment-post-success'
+    modal_title={l s='Report sent' d='Modules.Productcomments.Shop'}
+    modal_message={l s='Your report has been submitted and will be considered by a moderator.' d='Modules.Productcomments.Shop'}
+  }
+
+  {* Report abuse error modal *}
+  {include file='module:productcomments/views/templates/hook/alert-modal.tpl'
+    modal_id='report-comment-post-error'
+    data_ps_ref='report-comment-post-error'
+    modal_title={l s='Your report cannot be sent' d='Modules.Productcomments.Shop'}
+    icon='error'
+  }
+</div>

themes/hummingbird/modules/productcomments/views/templates/hook/product-list-reviews.tpl

@@ -0,0 +1,14 @@
+{**
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ *}
+
+<div class="product-list-review" data-ps-ref="product-list-review" data-id="{$product.id}" data-url="{$product_comment_grade_url nofilter}">
+  <div class="grade-stars small-stars" data-ps-ref="grade-stars"></div>
+  <div class="product-list-comments-number" data-ps-ref="product-list-comments-number">
+    <span class="visually-hidden">
+      {l s='Rated' d='Modules.Productcomments.Shop'} <span data-ps-ref="grade-value"></span> {l s='out of 5 stars based on ' d='Modules.Productcomments.Shop'}
+    </span>
+    <span data-ps-ref="number-value"></span> {l s='review(s)' d='Modules.Productcomments.Shop'}
+  </div>
+</div>