weslleymarques
4/20/2017 - 5:46 PM

Ciashop - Instalação.md

Instalação do widget na Ciashop

Página de produto

Head

<script type="text/javascript">
 var _trustvox_shelf_rate = _trustvox_shelf_rate || [];
 _trustvox_shelf_rate.push(['_storeId', 'XXXXXX']);
</script>
<script type="text/javascript" async="true" src="//s3-sa-east-1.amazonaws.com/trustvox-rate-widget-js/widget.js"></script>

CSS responsável pelo estilo nas estrelinhas com texto "Clique e veja!"

<style type="text/css">
  .trustvox-widget-rating,
  .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;
  }
  .trustvox-widget-rating:hover span.rating-click-here {text-decoration: underline;}
</style>

Body

SEO - Schema de produto

Para ter um bom resultado de Rich Snippets, precisamos inserir a nota do produto junto com as estrelinhas, mas para funcionar adequadamente, precisamos inserir também o itemtype

O itemtype deve englobar todo o produto como nome, descrição e claro nosso rate:

<div itemscope="" itemtype="http://schema.org/Product">
    <h1 itemprop="name">Nome do produto</h1>
</div>

Script responsável por exibir as estrelinhas, deve ficar próximo ao nome do produto

<div class="trustvox-rate">
  <a class="trustvox-fluid-jump trustvox-widget-rating" href="#trustvox-reviews" title="Pergunte e veja opiniões de quem já comprou">
    <div class="trustvox-widget-rating" data-trustvox-product-code-js="produtoId" data-trustvox-display-rate-schema="true"></div>
    <span class="rating-click-here">Clique e veja!</span>
  </a>
</div>
  • Código responsável por exibir o widget principal
<div class="heading-secundary">
  <h2 id="trustvox-reviews">Pergunte e veja opiniões de quem já comprou</h2>
</div>
<div id="_trustvox_widget"></div>

Esse script deve ficar antes de fechar a tag body

<script type="text/javascript">
  var _trustvox = _trustvox || [];
  _trustvox.push(['_storeId', 'ID-Loja']);

  _trustvox.push(['_productId',  produtoId]);
  _trustvox.push(['_productName',$('#lblNome').text()]);
  _trustvox.push(['_productPhotos', [$('#imgPrincipalProduto').attr('src')]]);

  (function() {
    var tv = document.createElement('script'); tv.type = 'text/javascript'; tv.async = true;
    tv.charset = "UTF-8";
    tv.src = '//trustvox-production-assets.s3.amazonaws.com/assets/trustvox.1.min.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(tv, s);
  })();
  $(document).ready(function() {
    $('.trustvox-fluid-jump').on('click', function(event) {
      event.preventDefault();
      var offset = $($(this).attr('href')).offset().top;
      $('html, body').animate({scrollTop:offset}, 500);
    });
  });
</script>