Esse artigo mostra como exibir as opiniões (reviews) e inserir os scripts da RA Trustvox na plataforma Ciashop.
⚠️ Para que as opiniões coletadas pela RA Trustvox sejam exibidas em seu e-commerce, verifique se a integração das vendas e configuração completa da ferramenta já foram realizadas. Você pode saber mais aqui.
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! ;)
Ficou alguma dúvida?
Se você quer customizar algo que não está nesta lista, entre em contato com a RA Trustvox através do chat 💬 disponível no menu 'Dúvidas e Suporte' no símbolo de interrogação ❔ do seu painel (de Segunda a Sábado das 9h às 18h - exceto feriados ).
Conte com a gente! 💚