Este artigo mostra os passos necessários para instalar os elementos visuais da Trustvox em sua loja virtual, caso seu template seja customizado.
⚠️ A adição dos elementos visuais ocorre de forma automática quando a loja utiliza temas padrões da plataforma. Caso o template seja customizado, é necessário adicionar os scripts da RA Trustvox no html da loja, de forma manual.
Os elementos visuais da RA Trustvox são: o Widget de Opiniões e Perguntas, Carrossel de opiniões da loja, estrelas nas prateleiras e na página de produto.
Importante: Antes de prosseguir verifique se o app RA Trustvox está instalado e ativo em sua loja.
Você já instalou o RA Trustvox em sua plataforma e agora deseja acessar os elementos visuais para corrigir ou mesmo customizar algo?
Vamos lá!
Primeiramente, garanta que o acesso por FTP a sua loja esteja aberto. Veja como pode fazer isto aqui. Com o FTP aberto, vamos ao que interessa.
1. Widget de opiniões do produto
O Widget é o principal responsável por exibir as opiniões e perguntas na página do produto.
Para exibi-lo corretamente, insira a propriedade data-store="product-image-{{ product.id }}" no elemento <div> que contém o seguinte trecho de código: {% include 'snipplets/product/product-image.tpl %}.
Por padrão, esta implementação está presente no arquivo templates/product.tpl do seu FTP Veja um exemplo do código:
{# Payments details #}
<div id="single-product" class="js-has-new-shipping js-product-detail js-product-container js-shipping-calculator-container" data-variants="{{product.variants_object | json_encode }}">
<div class="container">
<div class="row section-single-product">
<div class="col-12 col-md-7 px-0 px-md-3" data-store="product-image-{{ product.id }}">
{% include 'snipplets/product/product-image.tpl' %}
</div>
<div class="col" data-store="product-info-{{ product.id }}">
{% include 'snipplets/product/product-form.tpl' %}
</div>
</div>
{% if settings.show_product_fb_comment_box %}
<div class="fb-comments section-fb-comments" data-href="{{ product.social_url }}" data-num-posts="5" data-width="100%"></div>
{% endif %}
<div id="reviewsapp"></div>
</div>
</div>
{# Related products #}
{% include 'snipplets/product/product-related.tpl' %}
Caso tudo tenha dado certo, o widget irá aparecer dentro da página de um produto:
2. Estrelas nas prateleiras e página do produto
É possível exibir a nota de cada produto nas prateleiras (listagem dos produtos) e também na página de produto próximo ao nome do mesmo.
Primeiro, vamos as prateleiras!
Insira a propriedade data-store='product-item-name-{{ product.id }}' na <div> que está englobada pelo <a href="{{ product_url_with_selected_variant }}" title="{{ product.name }}" class="item-link"> localizado no arquivo snipplets/grid/item.tpl do seu FTP.
Veja um exemplo do código:
<div class="item-description" data-store="product-item-info-{{ product.id }}">
<a href="{{ product_url_with_selected_variant }}" title="{{ product.name }}" class="item-link">
<div class="js-item-name item-name mb-1" data-store="product-item-name-{{ product.id }}">{{ product.name }}</div>
{% if product.display_price %}
<div class="item-price-container mb-1" data-store="product-item-price-{{ product.id }}">
<span class="js-compare-price-display price-compare" {% if not product.compare_at_price or not product.display_price %}style="display:none;"{% else %}style="display:inline-block;"{% endif %}>
{{ product.compare_at_price | money }}
</span>
<span class="js-price-display item-price">
{{ product.price | money }}
</span>
</div>
{% endif %}
</a>
</div>
E este deve ser o resultado:
Já para mostrar as estrelas na página do produto, insira a propriedade {% if template == "product" %}data-store="product-name-{{ product.id }}"{% endif %}> no elemento <h1> localizado no arquivo snipplets/page-header.tpl
No código você terá algo como:
<h1 {% if template == 'product' %}class="js-product-name" data-store="product-name-{{ product.id }}"{% endif %} >{% block page_header_text %}{% endblock %}</h1>
Tendo o seguinte como resultado:
3. Carrossel de opiniões de loja
Para exibir o carrossel com as opiniões de sua loja, insira a propriedade data-store="products-home-featured" no elemento <section> localizado em snipplets/home/home-featured-products.tpl. Exemplo do código:
{% if sections.primary.products %}
<section class="section-featured-home" data-store="products-home-featured">
<div class="container">
<div class="row">
{% if settings.featured_products_title %}
<div class="col-12 text-center">
<h3>{{ settings.featured_products_title }}</h3>
</div>
{% endif %}
E de como será exibido:
DICAS ÚTEIS
As propriedades ditas neste arquivo devem ser sempre as mesmas, independente de seu tema. Porém o arquivo onde está encontrada pode variar de tema para tema.
Para localizar facilmente as propriedades, você pode fazer download da raiz do seu FTP e abrir o diretório baixado com um programa como o VSCode que é capaz de fazer busca em todos arquivos dentro de um diretório. Exemplo:
Procure pela função "Find in Files" do VSCode e digite a propriedade que deseja encontrar. Logo será exibido a ocorrência do buscado e em que arquivo foi encontrada.
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! 💚