Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: productcomments issues #568

Merged
merged 1 commit into from
Jan 4, 2024
Merged

fix: productcomments issues #568

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions modules/productcomments/views/templates/hook/average-grade-stars.tpl
View file
Open in desktop
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}
2 changes: 1 addition & 1 deletion modules/productcomments/views/templates/hook/empty-product-comment.tpl
View file
Open in desktop
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
14 changes: 7 additions & 7 deletions modules/productcomments/views/templates/hook/post-comment-modal.tpl
View file
Open in desktop
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
31 changes: 31 additions & 0 deletions modules/productcomments/views/templates/hook/product-additional-info.tpl
View file
Open in desktop
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}
53 changes: 30 additions & 23 deletions modules/productcomments/views/templates/hook/product-comments-list.tpl
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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}">
SharakPL marked this conversation as resolved.
Show resolved Hide resolved
<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
Loading