Skip to content

Commit

Permalink
fix: productcomments
Browse files Browse the repository at this point in the history
Make productcomments work again, and small display improvements has been added
  • Loading branch information
tblivet committed Dec 15, 2023
1 parent 6fe6641 commit 0d48b07
Show file tree
Hide file tree
Showing 8 changed files with 190 additions and 33 deletions.
Original file line number Diff line number Diff line change
@@ -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">
<div class="grade-stars" data-grade="{$grade}"></div>
{if isset($showNbComments) && $showNbComments}
<div class="comments-number">({$nb_comments})</div>
{elseif isset($showGradeAverage) && $showGradeAverage}
<div class="average-grade">({$grade|number_format:1})</div>
{/if}
</div>
{/if}
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* file that was distributed with this source code.
*}

<div id="empty-product-comment" class="product-comment-list-item">
<div id="empty-product-comment" class="product-comment-list-item py-3">
{if $post_allowed}
<button class="btn btn-primary btn-with-icon post-product-comment">
<i class="material-icons" aria-hidden="true">&#xE3C9;</i>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
<div class="modal-body">
<form id="post-product-comment-form" action="{$post_comment_url nofilter}" method="POST">
<div class="row">
<div class="col-sm-2">
<div class="col-5 col-sm-2 mb-4">
{if isset($product) && $product}
{block name='product_flags'}
<ul class="product-flags">
Expand Down Expand Up @@ -50,7 +50,7 @@
{/if}

<img
class="js-qv-product-cover rounded"
class="js-qv-product-cover rounded img-fluid"
srcset="
{$product.cover.bySize.default_xs.url},
{$product.cover.bySize.default_m.url} 2x"
Expand Down Expand Up @@ -82,7 +82,7 @@
{/if}

<img
class="rounded"
class="rounded img-fluid"
srcset="
{$urls.no_picture_image.bySize.default_xs.url},
{$urls.no_picture_image.bySize.default_m.url} 2x"
Expand All @@ -96,17 +96,17 @@
{/block}
{/if}
</div>
<div class="col-sm-4">
<p class="h3">{$product.name}</p>
<div class="col-7 col-sm-5">
<p class="h5">{$product.name}</p>
{block name='product_description_short'}
<div itemprop="description">{$product.description_short nofilter}</div>
{/block}
</div>
<div class="col-sm-6">
<div class="col-sm-5">
{if $criterions|@count > 0}
<ul id="criterions_list">
{foreach from=$criterions item='criterion'}
<li>
<li class="mb-2">
<div class="criterion-rating">
<label>{$criterion.name|escape:'html':'UTF-8'}:</label>
<div
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
{**
* 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}
<div class="product-comments-additional-info">
{if $nb_comments == 0}
{if $post_allowed}
<button class="btn btn-primary btn-with-icon post-product-comment">
<i class="material-icons edit" data-icon="edit"></i>
{l s='Write your review' d='Modules.Productcomments.Shop'}
</button>
{/if}
{else}
{include file='module:productcomments/views/templates/hook/average-grade-stars.tpl' grade=$average_grade showGradeAverage=true}
<div class="additional-links">
<a class="link-comment" href="#product-comments-list-header">
<i class="material-icons chat" data-icon="chat"></i>
{l s='Read user reviews' d='Modules.Productcomments.Shop'} ({$nb_comments})
</a>
{if $post_allowed}
<a class="link-comment post-product-comment" href="#product-comments-list-header">
<i class="material-icons edit" data-icon="edit"></i>
{l s='Write your review' d='Modules.Productcomments.Shop'}
</a>
{/if}
</div>
{/if}
</div>
{/if}
Original file line number Diff line number Diff line change
Expand Up @@ -2,42 +2,49 @@
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*}

<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 class="row">
<div class="col-md-12 col-sm-12" id="product-comments-list-header">
<div class="comments-nb">
<i class="material-icons" data-icon="chat" aria-hidden="true"></i>
{l s='Comments' d='Modules.Productcomments.Shop'} ({$nb_comments})
</div>
{include file='module:productcomments/views/templates/hook/average-grade-stars.tpl' grade=$average_grade}
<div id="product-comments-list-header">
<div class="comments-nb">
{l s='Comments' d='Modules.Productcomments.Shop'} ({$nb_comments})
</div>
{include file='module:productcomments/views/templates/hook/average-grade-stars.tpl' grade=$average_grade showGradeAverage=true showNbComments=false}
</div>

{include file='module:productcomments/views/templates/hook/product-comment-item-prototype.tpl' assign="comment_prototype"}
{include file='module:productcomments/views/templates/hook/empty-product-comment.tpl'}
<div class="row">
<div class="col-md-12 col-sm-12"
id="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|escape:'html'}">
</div>

<div id="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|escape:'html'}" data-current-page="1"
data-total-pages="{$list_total_pages}">
</div>
<div class="row">
<div class="col-md-12 col-sm-12" id="product-comments-list-footer">
<div id="product-comments-list-pagination"></div>
{if $post_allowed && $nb_comments != 0}
<button class="btn btn-primary btn-with-icon post-product-comment">
<i class="material-icons" data-icon="edit" aria-hidden="true"></i>
{l s='Write your review' d='Modules.Productcomments.Shop'}
</button>

<div id="product-comments-list-footer">
<div id="product-comments-list-pagination">
{if $list_total_pages > 0}
<ul>
{assign var = "prevCount" value = 0}
<li id="pcl_page_{$prevCount}"><span class="prev"><i class="material-icons">chevron_left</i></span></li>
{for $pageCount = 1 to $list_total_pages}
<li id="pcl_page_{$pageCount}"><span>{$pageCount}</span></li>
{/for}
{assign var = "nextCount" value = $list_total_pages + 1}
<li id="pcl_page_{$nextCount}"><span class="next"><i class="material-icons">chevron_right</i></span></li>
</ul>
{/if}
</div>
{if $post_allowed && $nb_comments != 0}
<button class="btn btn-primary btn-with-icon post-product-comment">
<i class="material-icons edit" data-icon="edit"></i>
{l s='Write your review' d='Modules.Productcomments.Shop'}
</button>
{/if}
</div>

{* Appreciation post error modal *}
Expand Down
1 change: 1 addition & 0 deletions src/scss/core/modules/_index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,4 @@
@import "shoppingcart";
@import "customersignin";
@import "nouislider";
@import "productcomments";
103 changes: 103 additions & 0 deletions src/scss/core/modules/_productcomments.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
// Global styles
.product-quickview-review,
.product-list-reviews,
.comments-note {
.grade-stars {
display: flex;
align-items: stretch;
height: 28px;

&.small-stars{
height: 20px;
}

.star-content {
margin: 0;
}
}

.comments-nb,
.comments-number,
.average-grade {
align-self: center;
margin-left: 0.25rem;
}
}

// Average grade
.comments-note {
display: flex;
align-items: center;
}

// Specific product miniature styles
.product-miniature {
&:not(.reviews-loaded) {
.product-list-reviews {
min-height: 2.5rem;
}
}

.product-list-reviews {
position: initial;
inset: auto;
justify-content: start;
padding: 0.5rem 0 1rem;

.comments-nb {
margin: 0;
}
}
}

// Specific product quickview styles
.product-quickview-review {
position: initial;
inset: auto;
align-items: center;
justify-content: start;
padding: 0.5rem 0 1.5rem;
}

// Specific product page styles
.page-product {
#product-comments-list-header {
padding: 1rem 0;

.comments-nb {
padding: 0;
font-size: 1.25rem;
font-weight: 700;
}
}

// Add comment modal
#post-product-comment-modal {

.h3 {
font-size: inherit;
}

.product-cover {
width: auto;
height: auto;

img {
width: auto;
height: auto;
}
}
}

// Comments list
#product-comments-list {
.product-comment-list-item {
margin: 0 0 1.5rem;
border-bottom: 1px solid var(--bs-gray-200);

.comment-infos {
padding-right: 1.5rem;
}
}
}
}
4 changes: 2 additions & 2 deletions templates/catalog/_partials/miniatures/product.tpl
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@
{$componentName = 'product-miniature'}

{block name='product_miniature_item'}
<article class="{$componentName} js-{$componentName}{if !empty($productClasses)} {$productClasses}{/if}" data-id-product="{$product.id_product}" data-id-product-attribute="{$product.id_product_attribute}">
<article class="{$componentName} js-{$componentName} thumbnail-container {if !empty($productClasses)} {$productClasses}{/if}" data-id-product="{$product.id_product}" data-id-product-attribute="{$product.id_product_attribute}">
<div class="card">
<a href="{$product.url}" class="{$componentName}__link">
{include file='catalog/_partials/product-flags.tpl'}

{block name='product_miniature_image'}
<div class="{$componentName}__image-container thumbnail-container">
<div class="{$componentName}__image-container">
{if $product.cover}
<picture>
{if isset($product.cover.bySize.default_md.sources.avif)}
Expand Down

0 comments on commit 0d48b07

Please sign in to comment.