Listagem de Avaliações e Comentários
Para recuperar as informações das avaliações já realizadas sobre os lojistas, utilize a seguinte extensão:
{% set comments = flexy_ftwo_shopping_store_rating_comment_list(shoppingStore.id) %}
A extensão retornará um Array de "comments", onde cada comment possui informações sobre a avaliação. Você pode acessar as informações da seguinte forma:
comment.customer.firstName
: Primeiro nome do cliente.comment.customer.tradeName
: Nome do cliente (outra opção).comment.rating.rating
: Nota dada pelo cliente.comment.createdAt
: Data de criação da avaliação.comment.content
: Conteúdo da avaliação (comentário).
Abaixo segue um exemplo de objeto dentro do Array resultante da extensão:
Exemplo de aplicação:
{% set comments = flexy_ftwo_shopping_store_rating_comment_list(shoppingStore.id) %}
...
{% for shoppingStoreComment in comments %}
<div class="comment">
<div class="review-header">
<h5>{{ shoppingStoreComment.customer.firstName is defined ? shoppingStoreComment.customer.firstName : shoppingStoreComment.customer.tradeName }}</h5>
<div class="product-rating">
<div class="stars">
{% for i in 1..5 %}
<span class="star {{ i <= shoppingStoreComment.rating.rating ? 'active' : '' }}"></span>
{% endfor %}
</div>
</div>
<small class="text-muted">{{ shoppingStoreComment.createdAt }}</small>
</div>
<div class="review-body">
<p>{{ shoppingStoreComment.content }}</p>
</div>
</div>
{% else %}
<p class="text-center"><br>Nenhuma avaliação realizada.</p>
{% endfor %}
Formulário de Cadastro de Avaliação
Para que o formulário de cadastro de uma nova avaliação funcione corretamente, siga as seguintes instruções no frontend:
- O botão para enviar a avaliação deve ter a classe
flexy-shopping-store-review-send
. - O campo de seleção da nota deve ter a classe
flexy-shopping-store-review-rating
. - O campo de comentário deve ter a classe
flexy-shopping-store-review-comment
.
Exemplo de aplicação:
<h4>Faça sua avaliação:</h4>
<div class="form-group">
<textarea rows="8" class="flexy-shopping-store-review-comment form-control"></textarea>
</div>
<div class="form-group">
<div class="shopping-store-rating">
<label class="control-label">Sua nota:</label>
<select class="flexy-shopping-store-review-rating form-control">
{% for i in 1..5 %}
<option value="{{ i }}">{{ i }}</option>
{% endfor %}
</select>
</div>
</div>
<button type="button" class="flexy-shopping-store-review-send btn btn-primary" data-shopping-store-id="{{ shoppingStore.id }}">Enviar</button>
Alteração no JavaScript:
Além das alterações no HTML, adicione a seguinte função ao JavaScript da plataforma, seja no JS padrão ou em um novo arquivo JS incluído no "Gerenciador de Arquivos" da plataforma. Esta função é necessária para o envio da avaliação:
$(".flexy-shopping-store-review-send").click(function() {
var $this = $(this);
$.ajax({
url : '/shopping-store-review/create',
method : 'post',
data : {
'rating' : $(".flexy-shopping-store-review-rating[type=hidden], .flexy-shopping-store-review-rating[type=radio]:checked, select.flexy-shopping-store-review-rating").val(),
'comment' : $(".flexy-shopping-store-review-comment").val(),
'shopping_store_id' : $this.data('shopping-store-id')
},
success : function() {
//Neste trecho o
alert("Comentário enviado com sucesso!");
$this.trigger('review-sended');
$this.trigger('review-sent');
$(".flexy-shopping-store-review-comment").val("");
},
error : function(data) {
alert($.parseJSON(data.responseText).message);
}
});
});
Com estas alterações, as avaliações de lojistas já serão exibidas e cadastradas normalmente dentro da plataforma.
Comentários
1 comentário
Ola muito bom o artigo, mas tem como mostrar todos os produtos com nota inicial de 5 estrelas e conforme ele for recebendo as outras notas o script vai fazendo a media?
Por favor, entre para comentar.