weslleymarques
4/18/2017 - 7:27 PM

Instalação

## Widget principal

### Com CDN - Usando SKU

```html
<!--Adicionar depois da tag com o skujson -->
<script type="text/javascript">
 window._trustvox =  [];
 _trustvox.push(['_storeId', 'XXXXXX']);

 _trustvox.push(['_productId',  skuJson.productId]);
 _trustvox.push(['_productName', skuJson.name]);
 _trustvox.push(['_productPhotos', [skuJson.skus[0].image]]);

  $(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>
<script async="true" type="text/javascript" src="//static.trustvox.com.br/assets/widget.js"></script>
```

### Sem CDN - Usando SKU

```html
<script type="text/javascript">
  $(document).ready(function() {
    window._trustvox =  [];
    _trustvox.push(['_storeId', 'XXXXXX']);
  
    _trustvox.push(['_productId',  skuJson.productId]);
    _trustvox.push(['_productName', skuJson.name]);
    _trustvox.push(['_productPhotos', [skuJson.skus[0].image]]);
  
    (function() {
      var tv = document.createElement('script'); tv.type = 'text/javascript'; tv.async = true;
      tv.src = '//trustvox-production-assets.s3.amazonaws.com/assets/trustvox.1.min.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(tv, s);
    })();
    $('.trustvox-fluid-jump').on('click', function(event) {
      event.preventDefault();
      var offset = $($(this).attr('href')).offset().top;
      $('html, body').animate({scrollTop:offset}, 500);
    });
  });
</script>
```

### Usando jQuery 

```html
<script type="text/javascript">
  $(document).ready(function() {
    window._trustvox =  [];
    _trustvox.push(['_storeId', 'XXXXXX']);
  
    _trustvox.push(['_productId',  $('#___rc-p-id').val()]);
    _trustvox.push(['_productName',$('.fn.productName').text()]);
    _trustvox.push(['_productPhotos', [$('#image-main').attr('src')]]);
  
    (function() {
      var tv = document.createElement('script'); tv.type = 'text/javascript'; tv.async = true;
      tv.src = '//trustvox-production-assets.s3.amazonaws.com/assets/trustvox.1.min.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(tv, s);
    })();
    $('.trustvox-fluid-jump').on('click', function(event) {
      event.preventDefault();
      var offset = $($(this).attr('href')).offset().top;
      $('html, body').animate({scrollTop:offset}, 500);
    });
  });
</script>
```

## Widget de Rating

### Script (ANTIGO)
```html
<script type="text/javascript">
  var _trustvox_shelf_rate = _trustvox_shelf_rate || [];
  _trustvox_shelf_rate.push(['_storeId', 'XXXXXX']);
  _trustvox_shelf_rate.push(['_productContainer', '.prateleira']);
  
  (function() {
      var tv = document.createElement('script');
      tv.type = 'text/javascript'; tv.async = true;
      tv.src = '//s3-sa-east-1.amazonaws.com/trustvox-rate-widget-js/widget.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(tv, s);
  })();
</script>
```

# Página de produto

## Head

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

```html
<style type="text/css">
    .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>
```

## Body 

_Esse script deve ser inserido logo após a abertura da tag `<body>`._

```html
<script type="text/javascript">
  $(document).ready(function() {
    window._trustvox =  [];
    _trustvox.push(['_storeId', 'XXXXXX']);
  
    _trustvox.push(['_productId',  skuJson.productId]);
    _trustvox.push(['_productName', skuJson.name]);
    _trustvox.push(['_productPhotos', [skuJson.skus[0].image]]);
  
    (function() {
      var tv = document.createElement('script'); tv.type = 'text/javascript'; tv.async = true;
      tv.src = '//trustvox-production-assets.s3.amazonaws.com/assets/trustvox.1.min.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(tv, s);
    })();
    $('.trustvox-fluid-jump').on('click', function(event) {
      event.preventDefault();
      var offset = $($(this).attr('href')).offset().top;
      $('html, body').animate({scrollTop:offset}, 500);
    });
  });
</script>
```

*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**:

```html
<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_

```html
<div class="trustvox-rating">
  <a class="trustvox-fluid-jump trustvox-widget-rating" href="#trustvox-reviews" title="Pergunte e veja opiniões de quem já comprou">
    <div class="trustvox-shelf-container" data-trustvox-product-code-js="dataLayer[0].productId" data-trustvox-should-skip-filter="true" 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_

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

# Div necessária para imprimir as estrelinhas

## Por padrão o código responsável pelos produtos ficam na pasta: Templates de Prateleira

```html
<div data-trustvox-product-code="$product.Id"></div>
```

# Script resposável por carregar as estrelinhas

## Por padrão os arquivos que são repetidos ficam na pasta: Sub Templates

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