Comment afficher les avis produits dans ma boutique ?

Les avis produits que vous recueillez via la plateforme d’évaluation eTrusted peuvent bien entendu être affichés dans votre boutique ou sur votre site web. Pour vos clients, les avis produits ne prennent toute leur valeur que lorsqu’ils peuvent être lus. Pour afficher les avis produits et les classements par étoiles, vous avez le choix entre plusieurs options, que nous détaillerons dans cet article.

Sticker avis produit

Avec la vignette avis produit, vous pouvez afficher les avis produits individuels que vos clients ont donnés sur la page de détail du produit. Ainsi, vos clients peuvent examiner vos produits de manière encore plus approfondie et prendre leur décision d’achat en toute autonomie.

Voici à quoi ressemble la vignette avis produit avec les paramètres par défaut :

20160502_product-reviews_shop_en.png

La base de la vignette avis produit est le code suivant, que vous devez intégrer à l’endroit de la page de détails de votre produit où vous souhaitez que vos clients puissent lire les avis :

<div id="productreviewsticker"></div>
<script type="text/javascript">
  _tsProductReviewsConfig = {
        tsid: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
        sku: ['ART-123'],
        variant: 'productreviews',
        /* optional */
        borderColor: '#0DBEDC',
        backgroundColor: '#ffffff',
       locale: 'fr_FR',
        starColor: '#FFDC0F',
        commentBorderColor: '#dad9d5',
        commentHideArrow: 'false',
        starSize: 15px
        ratingSummary: 'false',
        maxHeight: 1200px
        hideEmptySticker: 'false',
        filter: 'true',
        element: '#productreviewsticker',
        introtext: "Ce que disent nos clients :'
  };
  var scripts = document.getElementsByTagName('SCRIPT'),
  me = scripts[scripts.length - 1];
  var _ts = document.createElement('SCRIPT');
  _ts.type = 'text/javascript';
  _ts.async = true;
  _ts.charset = 'utf-8';
  _ts.src ='//widgets.trustedshops.com/reviews/tsSticker/tsProductSticker.js';
  me.parentNode.insertBefore(_ts, me);
  _tsProductReviewsConfig.script = _ts;
</script>

Vous pouvez effectuer certaines configurations dans le code pour adapter la vignette avis produits aux conditions de votre boutique. À cet effet, nous allons maintenant expliquer les différents paramètres et leurs options de configuration.

  • tsid: Entrez l'identifiant Trusted Shops de votre boutique en ligne dans ce paramètre.
  • sku: La référence du produit doit être indiquée ici. À ce stade, utilisez la variable employée dans votre système de boutique si vous incluez le code dans le modèle de votre page de détails de produit. Cela garantit que l'UGS est remplie de manière dynamique et que la vignette avis produits appropriée est donc affichée sur chaque page de détails du produit. Il est en outre possible d'afficher de façon groupée les évaluations laissées pour un produit qui existe en plusieurs variantes, par exemple en différentes couleurs ou tailles. Pour ce faire, ouvrez la page de détails du produit correspondant et entrez les différentes SKU pour l’article en question dans le code comme suit : ['produit1sku', 'produit2sku', 'produit3sku']
  • variant: Ce paramètre est fixe et ne doit pas être modifié.

Il est nécessaire de remplir ces trois paramètres pour que la vignette avis produits remplisse sa fonction. Les paramètres suivants, en revanche, servent à intégrer la vignette dans votre boutique le plus harmonieusement possible et à l'adapter à vos besoins. Il est donc fortement recommandé de remplir ces champs, même s’il ne s’agit pas d’un paramètre indispensable pour l’efficacité de cette fonctionnalité.

  • borderColor: La vignette avis produits est encadrée par une bordure. Par défaut, celle-ci est de couleur turquoise. Si vous souhaitez une couleur différente, remplacez la valeur dans le code par la valeur hexadécimale de la couleur de votre choix.
  • backgroundColor: Ce paramètre vous permet de définir la couleur de fond de la vignette qui transparaît entre les différents commentaires. Elle est réglée sur « blanc » par défaut. Si vous souhaitez une couleur différente, vous devez également saisir ici la valeur hexadécimale de la couleur souhaitée.
  • locale: ce paramètre détermine la langue du contenu non généré par vos clients et le format de la date. La langue française et le format habituel en France sont préréglés. La valeur pour locale doit être au format language_LAND. Les appellations suivent les codes ISO-639 et ISO-3166. Par exemple : la valeur appropriée pour le Royaume-Uni serait en_GB.
  • starColor: ce paramètre détermine la couleur des étoiles dans les commentaires. Par défaut, celle-ci est jaune, mais vous pouvez également en changer la couleur en entrant une valeur hexadécimale différente.
  • commentBorderColor: chaque commentaire est entouré d’un encadrement. Vous pouvez utiliser ce paramètre pour modifier la couleur de cette bordure. Par défaut, les bordures des commentaires sont grises, mais en entrant une valeur hexadécimale différente, vous pouvez également ajuster cette couleur.
  • commentHideArrow: par défaut, chaque commentaire de la vignette est affiché comme une bulle de texte. Si vous préférez afficher les commentaires dans un simple cadre, réglez la valeur de ce paramètre sur true.
  • starSize: ce paramètre définit la taille des étoiles d'évaluation affichées. Le réglage par défaut est de 15 px. Toutefois, vous pouvez ajuster cette valeur de manière flexible si nécessaire.
  • ratingSummary: lorsque ce paramètre est activé, le score global et les étoiles du produit est affichés à nouveau de dessous du nom du produit dans la vignette. Cette fonction est désactivée par défaut. Entrez true comme valeur pour ce paramètre si vous voulez l'activer.
  • maxHeight: ce paramètre vous permet de régler avec souplesse la hauteur de la vignette avis produits. Le réglage par défaut est de 1 200 px. Il suffit d'entrer la hauteur souhaitée comme valeur de ce paramètre pour régler la hauteur. Veuillez noter : ce paramètre n'a aucune influence sur le nombre d’avis affichés. Si le nombre d'avis n'est pas compatible avec la hauteur souhaitée de la vignette, une option de défilement est mise en place.
  • hideEmptySticker: Ce paramètre vous permet de masquer la vignette avis produits tant qu'il n'y a pas d’avis pour le produit concerné. Si vous voulez masquer la vignette, réglez la valeur de ce paramètre sur true.
  • filtre: filtre ce paramètre est utilisé pour intégrer une fonctionnalité dans la vignette qui permet à vos clients de filtrer les avis affichés en fonction du nombre d'étoiles attribuées. Ainsi, vos clients peuvent n'afficher p. ex. que des avis à cinq étoiles. Cette option de filtrage est activée par défaut. Si vous voulez la désactiver, entrez false comme valeur pour ce paramètre.
  • element: Ce paramètre relie le code JavaScript à l'élément DIV défini dans la première ligne de code. Bien entendu, vous pouvez déterminer vous-même l'identifiant de l'élément DIV. Si vous souhaitez modifier l'ID, n'oubliez pas de l'ajuster à la fois dans l'élément DIV et dans le paramètre 'element'. N’oubliez d’ajouter un # dans le paramètre.
  • introtext: grâce à ce paramètre, vous pouvez intégrer un court texte d'introduction sous le nom du produit dans la vignette avis produits. Le réglage par défaut est « Ce que disent nos clients : ». Si vous souhaitez un texte différent ou pas de texte à ce stade, il vous suffit de modifier ou de supprimer le texte.

Copiez maintenant l'élément DIV et le code JavaScript préparé et collez-les tous les deux directement dans le fichier modèle de vos pages de détails produits où la vignette avis produits du produit doit être affichée, de manière à ce qu'elle soit affichée sur toutes les pages de détails des produits en question.

Étoiles d’avis produit

Indépendamment de la vignette avis produits, vous pouvez afficher les étoiles de notation globale sur la page de détails produit. Placées en évidence, les étoiles d’évaluation donnent à vos clients une impression immédiate du classement du produit.

product-reviews_stars_fr.png

Si vous souhaitez intégrer les étoiles d’évaluation des produits dans votre boutique, le code JavaScript suivant est votre point de départ.

<div id="reviewstars"></div>
<script type="text/javascript" src="//widgets.trustedshops.com/reviews/tsSticker/tsProductStickerSummary.js"></script>
<script>
var summaryBadge = new productStickerSummary();
summaryBadge.showSummary(
{
'tsId': 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
'sku': ['9990004'],
'element': '#reviewstars',
'starColor' : '#FFDC0F',
'starSize' : '14px',
'fontSize' : '12px',
'showRating' : 'true',
'scrollToReviews' : 'false',
'enablePlaceholder' : 'false'
}
);
</script>

Comme pour la vignette avis produits, trois des paramètres sont obligatoires et doivent être remplis.

  • tsId: Veuillez saisir l'ID Trusted Shops de votre boutique comme valeur pour ce paramètre.
  • sku: parallèlement à la vignette avis produits, le SKU (= la référence) du produit doit être saisi dans ce paramètre. À ce stade, utilisez la variable employée dans votre système de boutique si vous incluez le code dans le modèle de votre page de détails de produit. Cela permet de s'assurer que les SKU sont remplis de façon dynamique et que les étoiles d’évaluation des produits sont correctement affichées sur chaque page de détails produit. Il est également possible d'afficher les étoiles d’évaluation collectivement pour un produit qui est disponible dans différentes variantes telles que la couleur ou la taille. Pour ce faire, ouvrez la page de détails du produit correspondant et entrez les différentes SKU pour l’article en question dans le code comme suit : ['produit1sku', 'produit2sku', 'produit3sku']
  • element: ce paramètre relie le code JavaScript à l'élément DIV défini dans la première ligne de code. Bien entendu, vous pouvez déterminer vous-même l'identifiant de l'élément DIV. Si vous souhaitez modifier l'ID, n'oubliez pas de l'ajuster à la fois dans l'élément DIV et dans le paramètre 'element'. N’oubliez d’ajouter un # dans le paramètre.

En plus de ces trois paramètres obligatoires, le code JavaScript offre quelques options de configuration supplémentaires pour personnaliser les étoiles d’évaluation des produits de votre boutique.

  • starColor: vous utilisez ce paramètre pour définir la couleur des étoiles d'évaluation. La couleur réglée par défaut est jaune. Si vous voulez changer cette couleur, il suffit de remplacer la valeur hexadécimale dans le code par celle de la couleur de votre choix.
  • starSize: ce paramètre détermine la taille des étoiles d'évaluation. Le réglage par défaut est de 14 px. Cependant, vous pouvez ajuster cette valeur de manière flexible.
  • fontSize: ce paramètre détermine la taille de la police des données numériques derrière les étoiles d'évaluation, qui fournissent des informations sur le nombre d'avis reçus et la note globale. Par défaut, la taille de police est fixée à 12 px, mais vous pouvez également ajuster cette valeur de manière flexible.
  • showRating: vous utilisez ce paramètre pour désactiver l'affichage de la note globale derrière les étoiles d'évaluation. Cet affichage est activé par défaut. Si vous voulez le désactiver, vous devez entrer false comme valeur pour ce paramètre.
  • scrollToReviews: ce paramètre vous permet de définir un lien d'ancrage vers la vignette avis produits. Les clients qui cliquent sur les étoiles lorsque le paramètre est activé sont automatiquement dirigés vers la vignette avis produits sur la même page. Cette fonction est désactivée par défaut. Si vous voulez l'activer, veuillez changer la valeur du paramètre sur true.
  • enablePlaceholder: vous pouvez utiliser ce paramètre pour afficher des étoiles grisées en guise d'emplacement par défaut dans votre boutique si aucun avis n'a été reçu pour le produit. Cette fonction est désactivée par défaut. Pour l'activer, vous devez changer la valeur du paramètre sur true.

Une fois que vous avez préparé le code JavaScript selon vos souhaits, vous pouvez placer les étoiles d’évaluation produits sur vos pages de détails produits. Pour ce faire, copiez le code préparé en incluant l'élément DIV dans la première ligne de code et allez dans le fichier modèle de vos pages de détails produits. Insérez le code à l'endroit où vous souhaitez que les étoiles d’évaluation produits apparaissent. Nous vous recommandons d'insérer les étoiles d’évaluation sous le titre du produit.

Vous avez maintenant intégré avec succès les étoiles d’avis produit dans votre page de détail du produit.

Vous pouvez trouver d’autres articles sur les avis produits ici :
- Comment utiliser les avis produits ?
- Comment ajouter des avis produits à mon intégration Trustbadge ?
- À quoi ressemblent les questionnaires d’avis produits ?

 


Cet article a-t-il été utile ?

Utilisateurs qui ont trouvé cela utile : 0 sur 0