Instalação da Trustvox na plataforma Ciashop

Esse documento demonstra como instalar o Widget da Trustvox na Ciashop.

1. Entrar na página Gerenciador do Portal e criar um widget com o script da Trustvox

Para criar um widget, coloque o mouse no menu  Widgets e escolha a opção Listar Widgets. Agora escolha e clique na opção Custom do seu jeito, conforme imagem abaixo:

Após clicar em Custom do seu jeito, você deve preencher os campos conforme imagem abaixo:

Copie o código abaixo e insira o ID da sua loja:
<script type="text/javascript">
    var _trustvox = _trustvox || [];
    _trustvox.push(['_storeId', 'IDENTIFICADOR DA SUA LOJA']);
    _trustvox.push(['_productId', '@Model.Product.Id']);
    _trustvox.push(['_productName', '@Model.Product.Name']);
    _trustvox.push(['_productPhotos', ['@Model.Product.Image']]);
    (function() {
        var tv = document.createElement('script');
        tv.type = 'text/javascript';
        tv.async = true;
        tv.charset = "UTF-8";
        tv.src = '//static.trustvox.com.br/assets/widget.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>
<br>

3. Inserir o widget na página de produto

Para editar a página de produto, coloque o mouse no menu  Layouts e clique na opção Editar layout padrão. Agora procure pelo arquivo Produtos.

Agora que você está editando o template de Produtos, precisamos inserir alguns códigos.

Procure pela tag </head> e acima dela vamos inserir os códigos abaixo:

Lembre-se de inserir o ID da sua loja
<!-- Esse código é responsável por gerar o código criado no widget -->
<componente name="ciac:widget" id="trustvoxWidgetJs" />

<!-- Esse CSS é responsável por ajustar o link "Clique aqui" na frente das estrelinhas -->
<style type="text/css">
    .trustvox-widget-rating,
    .trustvox-widget-rating .ts-shelf-container,
    .trustvox-widget-rating .trustvox-shelf-container {
        display: inline-block;
        text-decoration: none;
    }
    .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>

Agora é necessário inserir o código onde o Widget da Trustvox será exibido. Nesse caso você precisa encontrar o melhor lugar dentro do seu código e inserir o código abaixo:

<div class="trustvox-container">
   <!-- Recomendamos inserir esse título -->
   <h3 id="trustvox-reviews">Pergunte e veja opiniões de quem já comprou</h3>
   <!-- Essa div abaixo é onde será impresso o Widget da Trustvox -->
   <div id="_trustvox_widget"></div>
</div>

Pronto! :) 

O HTML básico da sua página de produto está finalizado, agora precisamos trabalhar com os componentes. 

Primeiramente você deve clicar em  Selecione um componente e escolha a opção Widget: trustvoxWidgetJs

Na tela seguinte você deve clicar em Configurações do Componente e escolher a opção trustvox-widget-js, exemplo:

Agora salve a alteração. ;)

Para inserir as estrelinhas abaixo do nome do produto, novamente clique em Selecione um componente e escolha a opção Produto Nome. Agora clique em Configurações do componente.

Encontre o lugar ideal dentro do código para inserir o código da Trustvox. Esse código irá gerar as notas de avaliação próximo ao nome do produto, conforme imagem abaixo:

Insira o seguinte código abaixo dentro deste componente:

<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="[A4]" data-trustvox-display-rate-schema="true"></div>
      <span class="rating-click-here">Clique e veja!</span>
   </a>
</div>
<!-- Importante o [A4] você deve ser o código responsável por imprimir o ID do Produto -->

Agora é só salvar! ;)

Ainda precisa de ajuda? Entre em contato Entre em contato