Intégrer les composants Trustt Reviews dans les pages Shopify

Ce document s’adresse à des personnes ayant un profil d’intégrateur web Shopify.

Sommaire

Fiche produit

Statistiques d’avis
Surcharge des rich snippets
Affichage des avis

Aperçu produit
Formulaire d’un produit

Pour intégrer les composantes, vous devez déjà avoir créé un jeton d'accès API Shopify.

Si vous souhaitez utiliser Trustt Reviews sans afficher les avis, vous ne devez pas intégrer les composantes. Il vous suffit de créer le jeton d'accès.

Avant de commencer

Aller dans Boutiques en lignes > Themes

Puis cliquer sur le bouton “ …” puis sur le sous-menu “Modifier le code“ :

Fiche produit

Statistiques d’avis

Dans le fichier main.product.liquid (fiche produit), sous la balise h1 du nom du produit veuillez ajouter le code suivant pour afficher la note moyenne (étoiles) et le nombre d’avis :

 {%- if product.metafields.trusttreviews.avgRating.value != blank -%}
<div class="trusttreviews-product-extrablock">
<a href="#avis-produit">
<div class="avgrating"> 
<div class=""> 
<img src="{{ product.metafields.trusttreviews.urlRating.value }}" width="84" alt="Note moyenne">
</div>
</div>
<div class="nbreviews">({{ product.metafields.trusttreviews.nbReviews.value }} avis)</div>
</a>
</div>
{%- endif -%}

Par exemple :

 <h1 class="product__title" {{ block.shopify_attributes }}>
{{ product.title | escape }}
</h1>
{%- if product.metafields.trusttreviews.avgRating.value != blank -%}
<div class="trusttreviews-product-extrablock">
<a href="#avis-produit">
<div class="avgrating"> 
<div class="">
<img src="{{ product.metafields.trusttreviews.urlRating.value }}" width="84" alt="Note moyenne"> 
</div>
</div>
<div class="nbreviews">({{ product.metafields.trusttreviews.nbReviews.value }} avis)</div>
</a>
</div>
{%- endif -%}

Si votre produit a des avis et que le nombre d’avis reste à 0, veuillez re-enregistrer le jeton d’API dans Trustt pour relancer la synchronisation des données produits

Si les changements ne sont pas effectifs immédiatement sur votre page produit, veuillez recharger votre page (F5 ou Cmd+R) ou attendre environ 1 minute le temps que le cache de la page Shopify se réinitialise.

Surcharge des rich snippets

Pour surcharger les rich snippet, cherchez la ligne :

Et ajoutez le code suivant pour surcharger les rich snippets du produit scannés par les SERPs (Google, …) :

Par exemple :

<script type="application/ld+json">

Et ajoutez le code suivant pour surcharger les rich snippets du produit scannés par les SERPs (Google, …) :

 {%- if product.metafields.trusttreviews.nbReviews.value != blank -%}
"aggregateRating": [{"@type": "AggregateRating","ratingValue": "{{ product.metafields.trusttreviews.avgRating.value }}","reviewCount": "{{ product.metafields.trusttreviews.nbReviews.value }}", "worstRating": "1", "bestRating": "5"}],
{%- endif -%}

Par exemple :

  <script type="application/ld+json">
  {
    "@context": "http://schema.org/",
    "@type": "Product",
    "name": {{ product.title | json }},
    "url": {{ shop.url | append: product.url | json }},
    {% if seo_media -%}
      {%- assign media_size = seo_media.preview_image.width | append: 'x' -%}
      "image": [
        {{ seo_media | img_url: media_size | prepend: "https:" | json }}
      ],
    {%- endif %}
    "description": {{ product.description | strip_html | json }},
    {% if product.selected_or_first_available_variant.sku != blank -%}
      "sku": {{ product.selected_or_first_available_variant.sku | json }},
    {%- endif %}
    "brand": {
      "@type": "Thing",
      "name": {{ product.vendor | json }}
    },
  {% if product.metafields.trusttreviews.nbReviews.value != blank -%}
    "aggregateRating": [{"@type": "AggregateRating","ratingValue": "{{ product.metafields.trusttreviews.avgRating.value }}","reviewCount": "{{ product.metafields.trusttreviews.nbReviews.value }}", "worstRating": "1", "bestRating": "5"}],
  {%- endif %}  
  "offers": [
     {%- for variant in product.variants -%}
        {
          "@type" : "Offer",
          {%- if variant.sku != blank -%}
            "sku": {{ variant.sku | json }},
          {%- endif -%}
          "availability" : "http://schema.org/{% if variant.available %}InStock{% else %}OutOfStock{% endif %}",
          "price" : {{ variant.price | divided_by: 100.00 | json }},
          "priceCurrency" : {{ cart.currency.iso_code | json }},
          "url" : {{ shop.url | append: variant.url | json }}
        }{% unless forloop.last %},{% endunless %}
      {%- endfor -%}
    ]
  }
</script>

Affichage des avis

Copiez le code suivant à la 1ère ligne du fichier product-recommandation.liquid pour afficher les avis sur la fiche produit :

 <div id="trustbeauty_review_thread"></div>
  <script>
  var trustbeauty_config = {
      apiKey : '{{ shop.metafields.trusttreviews.apiKey.value }}',
      productId : {{product.id}},
      lang : (Shopify.locale || 'FR').toUpperCase(), // code ISO2 [FR, EN, ..] shop_locale.iso_code: '{{shop_locale.iso_code}}' '{{shop.published_locales[0]}}'
      nbCols : 2,
      nbReviews : 6,
      order : 'date_desc'
  };

  (function() {
      var d = document, s = d.createElement('script');
     s.src = 'https://app.trustt.io/static/js/embed/trustbeauty-review.min.js';
      s.setAttribute('data-timestamp', +new Date());
      (d.head || d.body).appendChild(s);
  })();
  </script>
  <noscript>Merci d'activer Javascript pour afficher les avis produit</noscript>

Aperçu produit

Ouvrez le fichier product-card.liquid ou card-product.liquid (preview d’un produit, par exemple affiché sur la homepage ou dans la liste des produits d’une catégorie) et ajoutez le code suivant :

Sous le ou les H3 (fichier product-card) :

 {%- if product_card_product.metafields.trusttreviews.avgRating.value  != blank -%}
<div class="trusttreviews-product-extrablock">
    <div class="avgrating">  
        <div class="rating5-sm-r450"> 
            <img src="{{ product_card_product.metafields.trusttreviews.urlRating.value }}" width="84" alt="Note moyenne">
        </div>
    </div>
    <div class="nbreviews">({{ product_card_product.metafields.trusttreviews.nbReviews.value }} avis)</div>
</div>
{%- endif -%}

Si votre thème contient un fichier card-product :

 {%- if card_product.metafields.trusttreviews.avgRating.value  != blank -%}
<div class="trusttreviews-product-extrablock">
    <div class="avgrating">  
        <div class="rating5-sm-r450"> 
            <img src="{{ card_product.metafields.trusttreviews.urlRating.value }}" width="84" alt="Note moyenne">  
        </div>
    </div>
    <div class="nbreviews">({{ card_product.metafields.trusttreviews.nbReviews.value }} avis)</div>
</div>
{%- endif -%}

Par exemple :

 <h3 class="card-information__text h5">
    <a href="{{ product_card_product.url | default: '#' }}" class="full-unstyled-link">
        {{ product_card_product.title | escape }}
    </a>
</h3>
{%- if product_card_product.metafields.trusttreviews.avgRating.value  != blank -%}
<div class="trusttreviews-product-extrablock">
    <div class="avgrating">  
        <div class="rating5-sm-r450"> 
            <img src="{{ product_card_product.metafields.trusttreviews.urlRating.value }}" width="84" alt="Note moyenne">  
        </div>
    </div>
    <div class="nbreviews">({{ product_card_product.metafields.trusttreviews.nbReviews.value }} avis)</div>
</div>
{%- endif -%}

Formulaire d'un produit

Les métadonnées de vos produits propulsées par Trustt sont disponibles dans chacune de vos fiches produit