Importante usar o SKU, assim o carregamento será mais rápido que via JS.
<!--Adicionar depois da tag com o skujson -->
<script type="text/javascript">
window._trustvox = [];
_trustvox.push(['_storeId', 'ID-Loja']);
_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>
Script carregando variáveis via javascript SKU Porém SEM usar a CDN
<script type="text/javascript">
$(document).ready(function() {
window._trustvox = [];
_trustvox.push(['_storeId', 'Id-Loja']);
_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>
Script carregando variáveis via javascript
<script type="text/javascript">
$(document).ready(function() {
window._trustvox = [];
_trustvox.push(['_storeId', 'Id-Loja']);
_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>
Div para imprimir o widget principal
<div id="_trustvox_widget"></div>
Esse script pode e deve ficar o mais alto possível na DOM
###Script (ANTIGO)
<script type="text/javascript">
var _trustvox_shelf_rate = _trustvox_shelf_rate || [];
_trustvox_shelf_rate.push(['_storeId', '1610']);
_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>
###Script (NOVO)
<script type="text/javascript">
var _trustvox_shelf_rate = _trustvox_shelf_rate || [];
_trustvox_shelf_rate.push(['_storeId', 'ID-Loja']);
_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>
###Prateleira
$product.Id
seja válida.<div class="trustvox-widget-rating" data-trustvox-product-code="$product.Id"></div>
###Pagina de produto
<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>
<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-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>
###Link para CSS caminho padrão da Vtex
<link rel="stylesheet" type="text/css" href="/arquivos/trustvox-widget.css" />
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 class="osg_all" itemscope="" itemtype="http://schema.org/Product">
<div class="osp_nome">
<h1 itemprop="name">
<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>