Instalação da Trustvox na plataforma TrayCommerce

Com seu ID e Token em mãos, inicie a instalação da RA Trustvox no front-end da sua loja TrayCommerce. 😉

Vamos lá!

1. Acessar seu tema que está em: Minha Loja > Design da loja


Conforme as  instruções da plataforma, é necessário duplicar o tema antes da edição. Explicamos abaixo, de forma simplificada como proceder. 

2. Com o acesso de edição, você deve duplicar o tema padrão

3. Clicar em "Editar HTML" no tema duplicado

4. Em sua estrutura de pastas na lateral esquerda, navegue até: layouts > default.html

4.1. Dentro do template  "default", adicionar o código do bloco abaixo (responsável pelo estilo das estrelas), antes do fechamento da tag </head>

<!-- Trustvox -->
<style type="text/css">
    .trustvox-rating:hover {
        cursor: pointer;
    }
    .trustvox-showcase {
        margin: 10px 0 10px 0;
        min-height: 20px;
        min-width: 100%;
        text-align: center;
    }
    .trustvox-rating {
        margin: 5px 0 5px 0;
    }
    .trustvox-widget-rating .ts-shelf-container,
    .trustvox-widget-rating .trustvox-shelf-container {display: inline-block;}
    .trustvox-widget-rating span.rating-click-here {
        top: -3px;
        display: inline-block;
        position: relative;
        color: #DAA81D;
        font-size: 12px;
    }
    .trustvox-widget-rating:hover span.rating-click-here {text-decoration: underline;}
</style>
<!-- /Trustvox -->

4.2. Para que as estrelinhas funcionem, é necessário adicionar também este código antes do fechamento da tag </body>

Obs: Em ID-DA-LOJA troque pelo número da sua identificação (disponível em seu painel na seção "Preferências da Empresa").

<!-- Trustvox -->
<script type="text/javascript">
 var _trustvox_shelf_rate = _trustvox_shelf_rate || [];
 _trustvox_shelf_rate.push(['_storeId', 'ID-DA-LOJA']);
 _trustvox_shelf_rate.push(['_productContainer', 'body']);

 jQuery(document).ready(function() {
   jQuery(function($) {
       $(".trustvox-rating").click(function() {
           $('html, body').animate({
               scrollTop: $(".trustvox-container").offset().top -= 115
           }, 1000);
       });
   });
 }); 
</script>
<script type="text/javascript" async="true" src="//rate.trustvox.com.br/widget.js"></script>
<!-- /Trustvox -->

5. Procurar em sua estrutura de pastas por sua página de produto, que fica em: pages > product.html

5.1. Adicionar o código abaixo logo no início do documento, acima de todo o conteúdo. Esse script é necessário para carregamento do widget.

Obs: Não esquecer de trocar o ID-DA-LOJA

<!-- Trustvox -->
<script type="text/javascript">
 window._trustvox =  [];
 _trustvox.push(['_storeId', 'ID-DA-LOJA']);

 _trustvox.push(['_productId',  '{{ product.id }}']);
 _trustvox.push(['_productName', '{{ product.name }}']);
 
 {% if product.images %} 
    _trustvox.push(['_productPhotos', '{{ product.images[0].full }}']); 
 {% endif %}
</script>
<script async="true" type="text/javascript" src="//static.trustvox.com.br/sincero/sincero.js"></script>
<!-- /Trustvox --><br>
	
5.2. Localizar  "{{ product.name }}" variável que carrega o nome principal do produto na página do mesmo, e inserir o código das estrelinhas, logo abaixo:
<!-- Trustvox -->
<div class="trustvox-rating">
   <div class="trustvox-fluid-jump trustvox-widget-rating" id="trustvox-reviews">
      <div class="trustvox-shelf-container" data-trustvox-product-code-js="{{ product.id }}" data-trustvox-display-rate-schema="true"></div>
      <span class="rating-click-here">Clique e veja!</span>
   </div>
</div>
<!-- /Trustvox -->

Ficará assim: 

5.3. Ainda em  "product.html" você irá inserir a div que exibe o widget de opiniões e perguntas.

Comumente é inserido após a "descrição do produto" ou "produtos relacionados". 

Por exemplo, se escolhido inserir após os produtos relacionados basta localizar a div com classe "product-related", e inserir o seguinte código:

<!-- Trustvox -->
<div class="trustvox-container">
  <h3 id="trustvox-reviews">Pergunte e veja opiniões de quem já comprou</h3>
  <div id="_trustvox_widget"></div>
</div>
<!-- /Trustvox -->

5.4 Salve essas alterações.

O resultado será este: 

6. Para exibir estrelas nas vitrines é necessário a inserção do código abaixo, no template que fica no caminho: elements > snippets > product.html

6.1. Abaixo de  "{{ product.name }}", (nome principal do produto no item da vitrine), inserir o código das estrelinhas:

<!-- Trustvox -->
<div class="trustvox-showcase">
  <div data-trustvox-product-code="{{ product.id }}"></div>
</div>
<!-- /Trustvox -->

Pronto! Agora basta publicar o template alterado e aguardar seu cache expirar. 

  

  

Passos opcionais: Caso você queira instalar também: " carousel com opiniões de loja" e " selo de opiniões verdadeiras", basta seguir os passos abaixo:
7. Selo de opiniões verdadeiras: 
Obs. para que você precisa ter no mínimo 10 opiniões, e tê-lo configurado, para isto veja aqui como fazer
7.1. Adicionar o código a seguir, antes do fechamento da tag </body>
em todas as páginas que deseja exibir o selo (ou em um template que se repita):
<!-- Trustvox -->
<script type="text/javascript" src="//certificate.trustvox.com.br/widget.js"></script>
<!-- /Trustvox --><br>
		

7.2. Com o script acima você terá a opção de selo flutuante já funcionando, porém caso queira exibir o selo fixo em um local apropriado para selos, 
será necessário então incluir o código abaixo, exatamente onde o mesmo deve carregar:

<!-- Trustvox -->
<div data-trustvox-certificate-fixed="data-trustvox-certificate-fixed"></div>
<!-- /Trustvox -->

E pronto! Com isto você realizou a instalação do selo de opiniões verdadeiras!

  

  

8. Carousel com opiniões de loja:

8.1. Inserir no HTML de seu template ou no local apropriado para tal, posicionado antes ou logo na abertura da tag  body, os scripts responsáveis pelo Carousel:

Obs: Não esquecer de trocar o ID-DA-LOJA.

<!-- Trustvox -->
<script type="text/javascript" src="//colt.trustvox.com.br/colt.min.js"></script> 
<script>
  var _trustvox_colt = _trustvox_colt || [];
  _trustvox_colt.push(['_storeId', 'ID-DA-LOJA'], ['_limit', '7']);
</script>
<!-- /Trustvox -->

8.2. Inserir a div responsável por carregar o carousel no local em que o carousel deve ser carregado:

<div id="_trustvox_colt"></div>

Feito! Agora você tem um carousel com opiniões de loja sendo exibido, desde que é claro: você tenha no mínimo três opiniões de loja para serem carregadas. :)

Qualquer dúvida, entre em contato com a RA Trustvox através do chat 💬 ou formulário RA Trustvox 📝 disponíveis no menu 'Dúvidas e Suporte' do seu painel (de Segunda a Sexta das 9h às 17h - exceto feriados). Conte com a gente!