Essa extensão permite que usuários logados possam criar comentários com avaliação para, a princípio, páginas de produtos.

⚠️ Funcionalidade como artigo útil (sim/não), avaliação de compras, entre outros, ainda estão em stand by.

⚠️ Por enquanto o www.etalproduto.com.br está com esta extensão, ela não vem com a instalação de lojas.

Sobre as configurações (e limitações atuais)

1) As avaliações são aplicadas nas páginas dos produtos, somente. O rating precisa estar associado à um item, no caso, ao produto.

2) Apesar de ter a chance de escolha, somente Estrelas está funcional;

3) Mesmo que possa escolher, todos os comentários precisam ser aprovados via painel;

4) O usuário pode enviar outro nome além do seu de usuário

5) O usuário poderá enviar telefone e e-mail (somente o site pode ver, outros usuários, não);

6) Habilitar notificações (apesar de estar presente, não há disparos);

🚨 Os scripts são gerados a partir das opções, então, sempre que houver alterações, é necessário atualizar os scripts e, consequentemente, o catálogo de produtos.

Scripts e uso no website

Como o usuário precisa estar logado, é necessário o uso da função loggedInEvents(). Para tudo funcionar há script JS e também elementos no front-end obrigatórios.

Elementos no frontend

<div class="col-12" id="productRating">
     <div id="productRatingResume"></div>
</div>

Este é o conteiner que irá exibir o resumo de avaliações e o convite para votar. E

<div class="col-12" id="productRatingComment"></div>

onde irá carregar os comentários e o formulário para votar caso esteja logado. Normalmente esse vem abaixo. Veja como eles ficam, exemplo extraído od etalproduto.com.br

Scripts

Para funcionar corretamente é necessário inserir o script, conforme na aba Scripts da extensão o script que é exclusivo para seu website (token próprio), conforme o exemplo abaixo:

<script data-productRatingEnabled="true" data-productRatingType="1" data-productRatingComments="true" data-productRatingCustomName="true" data-productRatingSendContactData="true" data-productRatingNotifications="true" src="https://www.craft.interago.com.br/App/Extensions/13/tag/ratingComments.js" data-t="K1p0aHZuSDJPSjBnUWhCTGw4cXBvQT09" data-resume="productRatingResume" data-comm="productRatingComment" data-productId=""></script>

Este script precisa ser inserido após o script de login. Uma vez inserido, é possível chamar a função que carrega os comentários e habilita o usuário a comentar, caso esteja logado. A função enableUserToVote (que habita o usuário a logar precisa estar dentro do login, desta forma:

function checkAccEvents() {

  
     let validateUserCallback = validateUser();
 
     console.log(validateUserCallback);
 
};
  
function loggedInEvents() {
  
     if(localStorage.getItem("uvc") === null) {

  
          let accountButtonsContainer = document.getElementById('accountButtonsContainer');
 
          accountButtonsContainer.innerHTML = `<a href="https://www.etalproduto.com.br/conta/account.php" id="accountButtonEnter" class="accountButtonItem">Conta</a>`;
 
     }
 
     else {
 
          let userInfo = JSON.parse(localStorage.getItem("uvc"));
 
          let accountButtonsContainer = document.getElementById('accountButtonsContainer');
         accountButtonsContainer.innerHTML = `<a href="https://www.etalproduto.com.br/conta/account.php" id="accountButtonEnter" class="accountButtonItem">${userInfo.profileName}</a>`;
 
     }
     //usuário logado, habilitar para votar
     enableUserToVote()
}
  

Estilos personalizados

A extensão cria diversos elementos na página que podem ser customizados de acordo com o CSS, abaixo está o CSS do etalproduto. É necessário a inserção dos scripts, inclusive, para aparecer as estrelas de avaliação.

<!-- rating -->
<style>
    /* Desktop styles */
    @media (min-width: 768px) {
        #ratingCommentName,
        #ratingCommentEmail,
        #ratingCommentPhone {
            width: 30%;
        }
        #ratingCommentTextArea {
            width: 100%;
        }
    }/* Mobile styles */
    @media (max-width: 767px) {
        #ratingCommentName,
        #ratingCommentEmail,
        #ratingCommentPhone,
        #ratingCommentTextArea {
            width: 100%;
        }
    }
    .ratingCommentStar {
      cursor:pointer;
      font-size: 22px;
      margin: 2px 0;
    }/* Shake animation */
    @keyframes shake {
        0% { transform: translateX(0); }
        20% { transform: translateX(-3px); }
        40% { transform: translateX(3px); }
        60% { transform: translateX(-1px); }
        80% { transform: translateX(1px); }
        100% { transform: translateX(0); }
    }
    #productRatingComment {
      background-color: white;
      padding: 20px;
      border-radius: 20px;
    }
    #ratingCommentTextArea {
      margin-top: 10px;
      border: 1px solid #c4c4c4;
      border-radius: 5px;
      padding: 8px;
      font-size: 16px;
      color: #333;
    }
    #ratingCommentName, #ratingCommentEmail, #ratingCommentPhone {
      margin-right: 15px;
      margin-top: 20px;
      border-radius: 5px;
      border: 1px solid #c4c4c4;
      padding: 12px;
      font-size: 16px;
      margin-bottom: 10px;
    }
    #ratingCommentConsentMessage {
      display: block;
      font-size: 11px;
      color: #555;
      margin:15px 0px;
    }
   #ratingCommentSendButton {
      background-color: #412293;
      color: white !important;
      padding: 8px 50px;
      margin-top: 10px;
      display: inline-block;
      border-radius: 5px;
      font-size: 18px;
      font-weight: bold;
      transition: 0.3s ease;
      cursor:pointer;
    }
   #ratingCommentFirstCommentLabel {
      display:block;
      margin-top:10px;
    }
    .ratingCommentStar {
      display:inline-flex;
      width:32px;
      height:32px;
      background-image:url(https://www.interago.com.br/App/Sites/416/mc/rating/starRatingEmpty.svg);
      background-size:contain;
    }
    .activeRatingStar {
      background-image:url(https://www.interago.com.br/App/Sites/416/mc/rating/starRating.svg);
    }
   .ratingResumeStar {
      display:inline-flex;
      width:24px;
      height:24px;
      background-size:contain;
      background-image:url(https://www.interago.com.br/App/Sites/416/mc/rating/starRatingEmpty.svg);
    }
   .resumeActiveRatingStar {
      background-image:url(https://www.interago.com.br/App/Sites/416/mc/rating/starRating.svg);
    }
    .resumeHalfRatingStar {
      background-image:url(https://www.interago.com.br/App/Sites/416/mc/rating/starRatingHalf.svg);
    }
   #ratingCommentRating {
      display:inline-flex;
      align-items:center;
      grid-gap:5px;
    }
   #ratingCommentInviteToRating {
      background-color: #ffa333;
      padding: 4px 16px;
      font-size: 12px;
      font-weight: bold;
      border-radius: 5px;
      margin-right: 5px;
      cursor: pointer;
      margin-left:10px;
      display:inline-block;
    }
    #ratingCommentFirstRatingLabel {
      color:#555;
      font-size:13px;
    }
    #ratingCommentTextAreaCounter {
      font-size:13px;
      display:block;
    }
    #ratingCommentTextAreaMessage {
      font-weight:bold;
      margin-left:10px;
    }
    #ratingCommentFirstCommentLabel {
      color:#555;
      font-size:13px;
      margin-top:30px;
    }
    #ratingCommentInviteUserToLogIn {
      display: block;
      font-size: 14px;
      margin: 10px 0;
      background-color: #de1857;
      color: white;
      padding: 5px 20px;
      border-radius: 5px;
      font-weight: bold;
      width: fit-content;
    }
    #ratingCommentSendingMessage {
      display: block;
      color: #ffa332;
      margin: 10px;
      font-weight: bold;
    }
    #ratingCommentErrorMessage {
      display:block;
      color:red;
      font-weight:bold;
      margin:10px;
    }
    #ratingCommentSuccessfullSent {
      font-weight: normal;
      background-color: #e5fde5;
      padding: 10px;
      border-radius: 10px;
    }
   .ratingComment {
      background-color: white;
      padding: 10px;
      border-radius: 10px;
      margin-bottom: 30px;
      font-size: 13px;
      line-height: 18px;
    }
    .ratingCommentsStarsOnComments {
      display:block;
      margin-bottom:15px;
    }
    .ratingCommentsStarsOnComments .ratingResumeStar {
      width:18px;
      height:18px;
    }
</style>