Avaliação de Lojistas - Aplicação no frontend

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.