ReviewDisplay2.0 PRX StyleGuide fr FR
Guide stylistique pour Review Display 2.0 (Affichage des évaluations) Express Customer Reviews (Évaluations des clients Express) Des retours de confiance qui incitent les gens à acheter
29 janvier 2013
Confidentiel Bazaarvoice
Avis de non-responsabilité Copyright © 2012-2013 Bazaarvoice. Tous droits réservés. Les informations contenues dans ce document :
Sont confidentielles et destinées aux clients de Bazaarvoice. Aucune partie de ce document ne peut être partagée avec quiconque en dehors de votre société ou des partenaires de votre société sans accord préalable de Bazaarvoice.
Sont fournies « telles quelles » sans garantie d'aucune sorte, expresse ou implicite, y compris, mais sans s'y limiter, les garanties implicites de qualité marchande, d'adéquation à un usage particulier ou de non-contrefaçon.
Sont périodiquement mises à jour pour être en phase avec les améliorations et / ou changements dans nos offres de produits.
Peuvent être modifiées sans préavis. Certains exemples décrits dans ce document sont fournis à titre d'illustration et ne garantissent pas de résultat particulier. Vous assumez le risque de l'utilisation de ce document.
Bazaarvoice n'est pas responsable des erreurs techniques ou typographiques qui pourraient être accidentellement présentes dans ce document. Bazaarvoice peut détenir des brevets et / ou demandes de brevet en instance couvrant le sujet du présent document. La remise de ce document ne vous donne aucun droit de licence sur ces brevets, ni aucun droit juridique à toute autre propriété intellectuelle dans un service ou produit Bazaarvoice. Tous les noms de marques et de produits Bazaarvoice sont des marques commerciales ou des marques déposées de Bazaarvoice aux États-Unis et peuvent être protégés en tant que marques ou marques déposées dans d'autres pays. Tous les autres noms de produits, services ou sociétés mentionnés ici sont des marques déposées et noms commerciaux de leurs propriétaires respectifs.
Contactez-nous : 3900 North Capital of Texas Highway Suite 300 Austin, Texas 78746, États-Unis Appel gratuit : (866) 522-9227 | Téléphone : (512) 551-6000 | Fax : (512) 551-6001 www.bazaarvoice.com
Historique des versions : Pour plus d'informations sur les révisions majeures qui ont été apportées à ce document, voir Annexe A, « Historique de révision ».
Dernière révision: 29 janvier 2013
Confidentiel Bazaarvoice
Sommaire Liste des figures ......................................................................................................... v Liste des tableaux ..................................................................................................... vii À propos de ce guide .................................................................................................. ix Public et objectif...................................................................................... x Organisation de ce guide ......................................................................... x Obtenir de l'aide .................................................................................... xi
Chapitre 1.
Introduction ........................................................................................... 1 Composantes de Review Display ...............................................................2 Snippet Display .................................................................................2 Review Display (Écran d’affichage des évaluations) ................................2 Gérer le style des éléments de Review Display ............................................3 Références en ligne .................................................................................4
Chapitre 2.
Gérer le style du Review Display............................................................. 5 Review Snippet (Snippet d'évaluation) .......................................................6 Snippet compact ...............................................................................6 Snippet minimaliste ...........................................................................7 Review Snapshot (Aperçu d'évaluation) .....................................................8 L'en-tête du snapshot ........................................................................9 Résumé d'évaluation .........................................................................9 Résumé des balises ........................................................................... 11 Résumé des attributs ........................................................................ 12 Lien Écrire une évaluation ................................................................. 12 Review Display (Écran d’affichage des évaluations) .................................... 14 En-tête de l'évaluation ..................................................................... 15 Profil de l'évaluateur ........................................................................ 15 Date de l'évaluation ......................................................................... 15 Balises d'évaluation ......................................................................... 16 Commentaires de l'évaluation ........................................................... 16 Attributs de l'évaluation ................................................................... 16 Pied de page de l'évaluation ............................................................. 16 Format en une colonne ........................................................................... 18
Chapitre 3.
Style des fonctionnalités d'évaluation optionnelles ................................. 19 Histogramme d'évaluation ..................................................................... 20 Badge .................................................................................................. 21 Acheteur certifié .............................................................................. 21 Évaluateur certifié ............................................................................ 21 Badge personnalisé ......................................................................... 22
Dernière révision: 29 janvier 2013
iii
Confidentiel Bazaarvoice
Chapitre 4.
Style d'une page Écrire une évaluation ...................................................23 Formulaire de soumission d'évaluation..................................................... 24 Page d'aperçu de l'évaluation ................................................................. 28 Page de remerciement d'évaluation......................................................... 29
Annexe A.
iv | Sommaire
Historique de révision........................................................................... 31
Dernière révision: 29 janvier 2013
Confidentiel Bazaarvoice
Liste des figures Figure 1.
Écran d’affichage typique des Snippets ........................................................2
Figure 2.
Review Snapshot (Aperçu d'évaluation) ........................................................3
Figure 3.
Exemple d'une évaluation individuelle .........................................................3
Figure 4.
Éléments d'un Review Snippet.....................................................................6
Figure 5.
Snippet compact ....................................................................................... 6
Figure 6.
Snippet minimaliste ...................................................................................7
Figure 7.
Sections Review Snapshot (Aperçu d'évaluation) ...........................................8
Figure 8.
Avant (étoiles par défaut) ............................................................................9
Figure 9.
Après (étoiles personnalisées) .....................................................................9
Figure 10.
Éventail complet d'étoiles d'évaluation personnalisées ................................ 10
Figure 11.
Avant (résumé des balises par défaut) .......................................................... 11
Figure 12.
Après (résumé des balises personnalisées) .................................................. 12
Figure 13.
Avant (lien Écrire une évaluation par défaut) ................................................ 13
Figure 14.
Après (bouton personnalisé pour lien Écrire une évaluation) .......................... 13
Figure 15.
Avant (lien Écrire une évaluation par défaut) ................................................ 13
Figure 16.
Après (bouton imité pour lien Écrire une évaluation) ..................................... 13
Figure 17.
Section Review display ............................................................................. 14
Figure 18.
Pied de page par défaut............................................................................ 17
Figure 19.
Avant (texte utile et de signalisation par défaut) ........................................... 17
Figure 20.
Après (pied de page d'évaluation et texte de signalisation séparés) ............... 17
Figure 21.
Review Display sous le format en une colonne ............................................. 18
Figure 22.
Fenêtre pop-up de l'histogramme d'évaluation ........................................... 20
Figure 23.
Icône de l'histogramme ............................................................................ 20
Figure 24.
Éléments Écrire une évaluation, partie 1 ...................................................... 24
Figure 25.
Éléments Écrire une évaluation, partie 2 ...................................................... 25
Figure 26.
Formulaire Écrire une évaluation personnalisé, partie 1 ................................. 26
Figure 27.
Formulaire Écrire une évaluation personnalisé, partie 2 ................................. 27
Dernière révision: 29 janvier 2013
Sommaire | v
Confidentiel Bazaarvoice
Figure 28.
Éléments de la page Aperçu d'évaluation ................................................... 28
Figure 29.
Éléments de la page de remerciement ........................................................ 29
vi | Sommaire
Dernière révision: 29 janvier 2013
Confidentiel Bazaarvoice
Liste des tableaux Tableau 1.
Formats de la date d'évaluation ................................................................. 16
Tableau 2. Historique de révision .............................................................................. 32
Dernière révision: 29 janvier 2013
Sommaire | vii
À propos de ce guide Express Customer Reviews™ (Évaluations client Express) est un service pleinement pris en charge qui permet aux détaillants de capturer, modérer et afficher les évaluations des clients sur leur site web. Ce contenu généré par l'utilisateur aide à faire converger les vendeurs et les acheteurs, et à attirer de nouveaux clients sur votre boutique en ligne. Cette section explique le contenu de ce guide et la manière dont il est organisé.
Dans cette section
Public et objectif
Organisation de ce guide
Obtenir de l'aide
Confidentiel Bazaarvoice
ix
Confidentiel Bazaarvoice
Public et objectif Ce guide est destiné aux commerçants qui intègrent Express Customer Reviews (Évaluations client Express) dans leur site web. Ce document explique comment gérer facilement le style de nombreux éléments de Review Display.
Organisation de ce guide Ce guide est organisé de la manière suivante :
Chapitre 1, “Introduction,” décrit les éléments d'affichage en général, donne des instructions générales pour personnaliser des éléments d'affichage, et dresse la liste des références utiles de l'industrie en relation avec les langages CSS et HTML.
Chapitre 2, “Gérer le style du Review Display,” fournit des informations détaillées sur les sections de Review Display (Écran d’affichage des évaluations) et sur les éléments dont vous pouvez choisir le style.
Chapitre 3, “Style des fonctionnalités d'évaluation optionnelles,” décrit les styles que vous pouvez appliquer aux fonctionnalités d'affichage d'évaluations optionnelles.
Chapitre 4, “Style d'une page Écrire une évaluation,” décrit les pages individuelles créées par la plateforme Write A Review iFrame (Écrire une évaluation iFrame) ainsi que les éléments de chaque page.
Si vous avez des questions, vous pouvez contacter un représentant du support technique en choisissant Support Soumettre ticket depuis la barre de menu du tableau de bord. IMPORTANT
x | À propos de ce guide
Dernière révision: 29 janvier 2013
Confidentiel Bazaarvoice
Obtenir de l'aide Il existe plusieurs façons d'obtenir de l'aide dans la cadre de votre intégration d'Express.
Afin d'accéder à une Aide contextuelle pendant que vous suivez l'assistant d'installation de l'intégration, déplacez votre souris sur les liens ?.
Pour obtenir des réponses à des questions spécifiques, choisissez Support Base de connaissances depuis la barre de menu du tableau de bord.
Pour contacter un représentant du support technique, choisissez Support Soumettre ticket depuis la barre de menu du tableau de bord. (Si vous n'arrivez pas à accéder au tableau de bord, envoyez votre demande de support à l'adresse : [email protected].)
Dernière révision: 29 janvier 2013
Obtenir de l'aide | xi
Chapitre 1.
Introduction
Review Display 2.0 propose un lifting visuel par rapport au Review Display d'origine (version 1.0). Non seulement Review Display 2.0 est visuellement plus attractif, mais il est également plus flexible, extensible et personnalisable. Ce chapitre décrit les éléments d'affichage en général, donne des instructions générales pour personnaliser des éléments d'affichage, et dresse la liste des références utiles de l'industrie en relation avec les langages CSS et HTML.
Aperçu du chapitre
Composantes de Review Display
Gérer le style des éléments de Review Display
Références en ligne
Confidentiel Bazaarvoice
1
Confidentiel Bazaarvoice
Composantes de Review Display Le “Review Display” comprend plusieurs écrans affichage distincts qui peuvent être disposés et stylisés, comme décrit dans les sections suivantes.
Snippet Display Le Review Snippet est une version condensée d'un contenu d'évaluation construit pour présenter un encombrement plus faible sur votre page web. Le Snippet, qui inclut un résumé des étoiles d'évaluation et le nombre d'avis correspondant au produit, peut être utilisé n'importe où sur votre site web (pages catégorie et/ou produit) mais est généralement présent au-dessus du "fold" (la portion d'une page web visible sans que l'on doive la faire défiler) sur une page de détails sur un produit, de façon à être immédiatement visible pour quiconque s'intéressant au produit.
Nous vous conseillons d'afficher les snippets à la fois sur la page catégorie et sur la page produit. ASTUCE La Figure 1 représente un Snippet typique.
Figure 1. Écran d’affichage typique des Snippets
Review Display (Écran d’affichage des évaluations) Le Review Display inclut un Review Snapshot® (Aperçu d'évaluation)(Figure 2) ainsi que toutes les évaluations individuelles d'un client (voir la Figure 3 pour un exemple). Les avantages, les inconvénients et les balises les mieux utilisées sont affichés sous forme de colonnes pour une lecture aisée et rapide. Le Review Display est généralement affiché en-dessous du "fold" ou dans un onglet de la page de détails d'un produit. Contrairement à un Snippet, le Review Display peut seulement être affiché une fois par page web.
2 | Chapitre 1 Introduction
Dernière révision: 29 janvier 2013
Confidentiel Bazaarvoice
Figure 2. Review Snapshot (Aperçu d'évaluation)
Figure 3. Exemple d'une évaluation individuelle
Gérer le style des éléments de Review Display Pour gérer le style de votre formulaire Write a review (Écrire une évaluation), utilisez la fonction de Personnalisation avancée (disponible depuis les sélections du menu du Personnaliser styles) pour ajouter vos propres tableau de bord Configuration styles ou mettre à jour les classes CSS existantes.
Dernière révision: 29 janvier 2013
Gérer le style des éléments de Review Display | 3
Confidentiel Bazaarvoice
Références en ligne Nous vous conseillons de consulter les références de l'industrie afin d'en apprendre davantage sur l'utilisation du langage CSS pour styliser les éléments de votre site web. Voici certaines des ressources suggérées :
CSS Sprites—http://www.alistapart.com/articles/sprites/
CSS overrides—http://www.yourhtmlsource.com/style sheets/advancedcss.html
Bases du float—http://css.maxdesign.com.au/floatutorial/introduction.htm
Images d'arrière-plan pour remplacer du texte— http://stopdesign.com/archive/2003/03/07/replace-text.html
Coins arrondis en CSS3—http://www.css3.info/preview/rounded-border/
Propriétés des bordures en CSS—http://www.w3schools.com/css/css_border.asp
(Vérification de la disponibilité des liens le 26 avril 2011)
4 | Chapitre 1 Introduction
Dernière révision: 29 janvier 2013
Chapitre 2. Gérer le style du Review Display Ce chapitre fournit des informations détaillées sur les sections Review Display (Écran d’affichage des évaluations) et sur les éléments dont vous pouvez gérer le style.
Aperçu du chapitre
Review Snippet (Snippet d'évaluation)
Review Snapshot (Aperçu d'évaluation)
Review Display (Écran d’affichage des évaluations)
Confidentiel Bazaarvoice
5
Confidentiel Bazaarvoice
Review Snippet (Snippet d'évaluation) Le Review Snippet peut être personnalisé pour s'afficher dans de nombreux formats différents. Le style de la version par défaut peut être personnalisé pour s'afficher de manière plus compacte (voir “Snippet compact,” below) et/ou avec un style minimaliste (voir “Snippet minimaliste” à la page 7.)
Figure 4. Éléments d'un Review Snippet
Snippet compact Le Snippet compact est généralement utilisé sur la page produit (hors de la section évaluation) est se trouve communément au-dessus du "fold" et près des informations relatives aux détails du produit et au prix.
Figure 5. Snippet compact Pour afficher le Snippet compact, ajoutez les lignes CSS suivantes à vos données de Personnalisation avancée (disponibles depuis les sélection du menu du tableau de bord Configuration Personnaliser styles) : .pr-snippet-wrapper { background-color: #FFF; border: 1px solid #CBCBCB; } .pr-snippet-stars { background: #FFF; border: none; float: none; margin: auto; width: 110px;
6 | Chapitre 2 Gérer le style du Review Display
Dernière révision: 29 janvier 2013
Confidentiel Bazaarvoice
} .pr-snippet-review-count { display: none; } .pr-snippet-read-write { background: none; border: none; } .pr-snippet-read-review, .pr-snippet-write-review { float: none; }
Le conteneur parent contrôle la largeur du Snippet. Pour fixer explicitement la largeur du Snippet, ajoutez une largeur à la classe pr-snippet et ajoutez la classe à vos données de Personnalisation avancée disponibles via les sélections du menu du tableau de bord Configuration Personnaliser styles).
Snippet minimaliste Le Snippet minimaliste est généralement utilisé sur les pages catégorie où de multiples produits sont visibles. Ces Snippets sont présents à côté de l'image et du nom du produit, et fournissent un petit aperçu de l'avis moyen (sous la forme d'étoiles) accompagné de sa moyenne numérique.
Figure 6. Snippet minimaliste Pour afficher le Snippet minimaliste, ajoutez les lignes CSS suivantes à vos données de Personnalisation avancée (disponibles depuis les sélection du menu du tableau de bord Configuration Personnaliser styles) : .pr-snippet { background: none; border: none; padding: 0; } .pr-snippet-stars { background: none; border: none; float: none; margin: auto;
Dernière révision: 29 janvier 2013
Review Snippet (Snippet d'évaluation) | 7
Confidentiel Bazaarvoice
padding: 0; width: 110px; } .pr-snippet-review-count { display: none; } .pr-snippet-read-write { display: none; }
Review Snapshot (Aperçu d'évaluation) Comme présenté dans la Figure 7, le Review Snapshot® comprend cinq sections principales :
L'en-tête du snapshot
Résumé d'évaluation
Résumé des balises
Résumé des attributs
Lien Écrire une évaluation
Figure 7. Sections Review Snapshot (Aperçu d'évaluation) Vous pouvez personnaliser le style du Review Snapshot pour le faire correspondre au look et à l'humeur de votre site web ; voir les sous-sections de ce sujet pour plus de détails.
8 | Chapitre 2 Gérer le style du Review Display
Dernière révision: 29 janvier 2013
Confidentiel Bazaarvoice
L'en-tête du snapshot L'en-tête du snapshot contient le texte du titre du Review Snapshot® et est composé de trois éléments principaux :
.pr-snapshot-head—Style de l'arrière-plan pour le conteneur de l'en-tête du
snapshot.
.pr-snapshot-title—Titre du Review Snapshot™.
.pr-snapshot-cobrand—Lien vers votre site web
Une manière simple de personnaliser l'en-tête est de modifier l'image d'arrière-plan en ajoutant les lignes CSS suivantes à vos données de Personnalisation avancée (disponibles depuis les sélection du menu du tableau de bord Configuration Personnaliser styles) : .pr-snapshot-head { background-image: url(/path/to/your/image.gif); background-repeat: repeat-x; }
Résumé d'évaluation Le résumé d'évaluation fournit les évaluations générales d'un produit. Voici ces éléments :
.pr-stars—Avis général (sous forme d'étoiles) du produit.
.pr-rating—Évaluation numérique générale du produit.
.pr-snapshot-average-based-on-text—Nombre d'évaluations utilisées pour
calculer les avis généraux par étoiles et numériques.
.pr-snapshot-consensus-value—Pourcentage moyen d'évaluateurs qui recommanderaient ce produit à un ami.
Une des personnalisations les plus populaires consiste à remplacer les étoiles par défaut par des étoiles personnalisées qui reflètent bien votre produit et/ou marque.
Figure 8. Avant (étoiles par défaut)
Figure 9. Après (étoiles personnalisées)
Dernière révision: 29 janvier 2013
Review Snapshot (Aperçu d'évaluation) | 9
Confidentiel Bazaarvoice
Exigences relatives aux images d'étoiles Il est primordial que vos nouvelles images d'étoiles répondent aux caractéristiques suivantes :
Format GIF ; nous vous conseillons d'utiliser la transparence.
Les grandes étoiles d'évaluation font 112 pixels de large et 250 pixels de haut; les petites étoiles d'évaluation font 83 pixels de large et 195 pixels de haut.
Trois (3) pixels entre les rangées.
Figure 10.Éventail complet d'étoiles d'évaluation personnalisées L'affichage des étoiles est implémenté en utilisant des Sprites CSS (voir http://www.alistapart.com/articles/sprites/). Nous utilisons une grande image d'étoile et une petite image d'étoile, et n'affichons qu'une petite portion de l'image à la fois via CSS. Placer les CSS overrides suivants dans vos données de Personnalisation avancée (disponibles depuis les sélection du menu du tableau de bord Configuration Personnaliser styles) pendant que vous référencez vos nouvelles images d'étoiles modifiera de façon effective toutes les images d'étoiles d'évaluation de votre site : .pr-snapshot-rating .pr-stars, div.prStars { background-image: url(http://www.yoursite.com/images/large_stars.gif); } .pr-stars-small, .pr-snippet-stars .pr-stars-small { background-image: url(http://www.yoursite.com/images/small_stars.gif); }
10 | Chapitre 2 Gérer le style du Review Display
Dernière révision: 29 janvier 2013
Confidentiel Bazaarvoice
Résumé des balises Le résumé des balises est une sélection des balises les plus populaires que les évaluateurs ont appliqué au produit. Les balises sont affichées sous forme de trois colonnes : Avantages, Inconvénients et Meilleures utilisations. L'exemple suivant montre le code HTML utilisé pour construire la colonne Avantages :
Par défaut, chaque conteneur possède une bordure extérieure grise d'un pixel, et le titre de chaque colonne possède un arrière-plan gris. Pour retirer à la fois la bordure et l'arrière-plan, ajoutez les lignes CSS suivantes à vos données de Personnalisation avancée (disponibles depuis les sélection du menu du tableau de bord Configuration Personnaliser styles) : .pr-attribute-key p { background-color: transparent; } .pr-review-points-attr-wrapper .pr-attribute-group { border: none; }
Figure 11. Avant (résumé des balises par défaut)
Dernière révision: 29 janvier 2013
Review Snapshot (Aperçu d'évaluation) | 11
Confidentiel Bazaarvoice
Figure 12. Après (résumé des balises personnalisées)
Résumé des attributs Le résumé des attributs est une sélection des attributs personnalisés utilisés par les évaluateurs pour marquer un produit. Le code consiste en une liste non ordonnée et en des éléments de liste :
.pr-other-attributes-list—L'élément
29 janvier 2013
Confidentiel Bazaarvoice
Avis de non-responsabilité Copyright © 2012-2013 Bazaarvoice. Tous droits réservés. Les informations contenues dans ce document :
Sont confidentielles et destinées aux clients de Bazaarvoice. Aucune partie de ce document ne peut être partagée avec quiconque en dehors de votre société ou des partenaires de votre société sans accord préalable de Bazaarvoice.
Sont fournies « telles quelles » sans garantie d'aucune sorte, expresse ou implicite, y compris, mais sans s'y limiter, les garanties implicites de qualité marchande, d'adéquation à un usage particulier ou de non-contrefaçon.
Sont périodiquement mises à jour pour être en phase avec les améliorations et / ou changements dans nos offres de produits.
Peuvent être modifiées sans préavis. Certains exemples décrits dans ce document sont fournis à titre d'illustration et ne garantissent pas de résultat particulier. Vous assumez le risque de l'utilisation de ce document.
Bazaarvoice n'est pas responsable des erreurs techniques ou typographiques qui pourraient être accidentellement présentes dans ce document. Bazaarvoice peut détenir des brevets et / ou demandes de brevet en instance couvrant le sujet du présent document. La remise de ce document ne vous donne aucun droit de licence sur ces brevets, ni aucun droit juridique à toute autre propriété intellectuelle dans un service ou produit Bazaarvoice. Tous les noms de marques et de produits Bazaarvoice sont des marques commerciales ou des marques déposées de Bazaarvoice aux États-Unis et peuvent être protégés en tant que marques ou marques déposées dans d'autres pays. Tous les autres noms de produits, services ou sociétés mentionnés ici sont des marques déposées et noms commerciaux de leurs propriétaires respectifs.
Contactez-nous : 3900 North Capital of Texas Highway Suite 300 Austin, Texas 78746, États-Unis Appel gratuit : (866) 522-9227 | Téléphone : (512) 551-6000 | Fax : (512) 551-6001 www.bazaarvoice.com
Historique des versions : Pour plus d'informations sur les révisions majeures qui ont été apportées à ce document, voir Annexe A, « Historique de révision ».
Dernière révision: 29 janvier 2013
Confidentiel Bazaarvoice
Sommaire Liste des figures ......................................................................................................... v Liste des tableaux ..................................................................................................... vii À propos de ce guide .................................................................................................. ix Public et objectif...................................................................................... x Organisation de ce guide ......................................................................... x Obtenir de l'aide .................................................................................... xi
Chapitre 1.
Introduction ........................................................................................... 1 Composantes de Review Display ...............................................................2 Snippet Display .................................................................................2 Review Display (Écran d’affichage des évaluations) ................................2 Gérer le style des éléments de Review Display ............................................3 Références en ligne .................................................................................4
Chapitre 2.
Gérer le style du Review Display............................................................. 5 Review Snippet (Snippet d'évaluation) .......................................................6 Snippet compact ...............................................................................6 Snippet minimaliste ...........................................................................7 Review Snapshot (Aperçu d'évaluation) .....................................................8 L'en-tête du snapshot ........................................................................9 Résumé d'évaluation .........................................................................9 Résumé des balises ........................................................................... 11 Résumé des attributs ........................................................................ 12 Lien Écrire une évaluation ................................................................. 12 Review Display (Écran d’affichage des évaluations) .................................... 14 En-tête de l'évaluation ..................................................................... 15 Profil de l'évaluateur ........................................................................ 15 Date de l'évaluation ......................................................................... 15 Balises d'évaluation ......................................................................... 16 Commentaires de l'évaluation ........................................................... 16 Attributs de l'évaluation ................................................................... 16 Pied de page de l'évaluation ............................................................. 16 Format en une colonne ........................................................................... 18
Chapitre 3.
Style des fonctionnalités d'évaluation optionnelles ................................. 19 Histogramme d'évaluation ..................................................................... 20 Badge .................................................................................................. 21 Acheteur certifié .............................................................................. 21 Évaluateur certifié ............................................................................ 21 Badge personnalisé ......................................................................... 22
Dernière révision: 29 janvier 2013
iii
Confidentiel Bazaarvoice
Chapitre 4.
Style d'une page Écrire une évaluation ...................................................23 Formulaire de soumission d'évaluation..................................................... 24 Page d'aperçu de l'évaluation ................................................................. 28 Page de remerciement d'évaluation......................................................... 29
Annexe A.
iv | Sommaire
Historique de révision........................................................................... 31
Dernière révision: 29 janvier 2013
Confidentiel Bazaarvoice
Liste des figures Figure 1.
Écran d’affichage typique des Snippets ........................................................2
Figure 2.
Review Snapshot (Aperçu d'évaluation) ........................................................3
Figure 3.
Exemple d'une évaluation individuelle .........................................................3
Figure 4.
Éléments d'un Review Snippet.....................................................................6
Figure 5.
Snippet compact ....................................................................................... 6
Figure 6.
Snippet minimaliste ...................................................................................7
Figure 7.
Sections Review Snapshot (Aperçu d'évaluation) ...........................................8
Figure 8.
Avant (étoiles par défaut) ............................................................................9
Figure 9.
Après (étoiles personnalisées) .....................................................................9
Figure 10.
Éventail complet d'étoiles d'évaluation personnalisées ................................ 10
Figure 11.
Avant (résumé des balises par défaut) .......................................................... 11
Figure 12.
Après (résumé des balises personnalisées) .................................................. 12
Figure 13.
Avant (lien Écrire une évaluation par défaut) ................................................ 13
Figure 14.
Après (bouton personnalisé pour lien Écrire une évaluation) .......................... 13
Figure 15.
Avant (lien Écrire une évaluation par défaut) ................................................ 13
Figure 16.
Après (bouton imité pour lien Écrire une évaluation) ..................................... 13
Figure 17.
Section Review display ............................................................................. 14
Figure 18.
Pied de page par défaut............................................................................ 17
Figure 19.
Avant (texte utile et de signalisation par défaut) ........................................... 17
Figure 20.
Après (pied de page d'évaluation et texte de signalisation séparés) ............... 17
Figure 21.
Review Display sous le format en une colonne ............................................. 18
Figure 22.
Fenêtre pop-up de l'histogramme d'évaluation ........................................... 20
Figure 23.
Icône de l'histogramme ............................................................................ 20
Figure 24.
Éléments Écrire une évaluation, partie 1 ...................................................... 24
Figure 25.
Éléments Écrire une évaluation, partie 2 ...................................................... 25
Figure 26.
Formulaire Écrire une évaluation personnalisé, partie 1 ................................. 26
Figure 27.
Formulaire Écrire une évaluation personnalisé, partie 2 ................................. 27
Dernière révision: 29 janvier 2013
Sommaire | v
Confidentiel Bazaarvoice
Figure 28.
Éléments de la page Aperçu d'évaluation ................................................... 28
Figure 29.
Éléments de la page de remerciement ........................................................ 29
vi | Sommaire
Dernière révision: 29 janvier 2013
Confidentiel Bazaarvoice
Liste des tableaux Tableau 1.
Formats de la date d'évaluation ................................................................. 16
Tableau 2. Historique de révision .............................................................................. 32
Dernière révision: 29 janvier 2013
Sommaire | vii
À propos de ce guide Express Customer Reviews™ (Évaluations client Express) est un service pleinement pris en charge qui permet aux détaillants de capturer, modérer et afficher les évaluations des clients sur leur site web. Ce contenu généré par l'utilisateur aide à faire converger les vendeurs et les acheteurs, et à attirer de nouveaux clients sur votre boutique en ligne. Cette section explique le contenu de ce guide et la manière dont il est organisé.
Dans cette section
Public et objectif
Organisation de ce guide
Obtenir de l'aide
Confidentiel Bazaarvoice
ix
Confidentiel Bazaarvoice
Public et objectif Ce guide est destiné aux commerçants qui intègrent Express Customer Reviews (Évaluations client Express) dans leur site web. Ce document explique comment gérer facilement le style de nombreux éléments de Review Display.
Organisation de ce guide Ce guide est organisé de la manière suivante :
Chapitre 1, “Introduction,” décrit les éléments d'affichage en général, donne des instructions générales pour personnaliser des éléments d'affichage, et dresse la liste des références utiles de l'industrie en relation avec les langages CSS et HTML.
Chapitre 2, “Gérer le style du Review Display,” fournit des informations détaillées sur les sections de Review Display (Écran d’affichage des évaluations) et sur les éléments dont vous pouvez choisir le style.
Chapitre 3, “Style des fonctionnalités d'évaluation optionnelles,” décrit les styles que vous pouvez appliquer aux fonctionnalités d'affichage d'évaluations optionnelles.
Chapitre 4, “Style d'une page Écrire une évaluation,” décrit les pages individuelles créées par la plateforme Write A Review iFrame (Écrire une évaluation iFrame) ainsi que les éléments de chaque page.
Si vous avez des questions, vous pouvez contacter un représentant du support technique en choisissant Support Soumettre ticket depuis la barre de menu du tableau de bord. IMPORTANT
x | À propos de ce guide
Dernière révision: 29 janvier 2013
Confidentiel Bazaarvoice
Obtenir de l'aide Il existe plusieurs façons d'obtenir de l'aide dans la cadre de votre intégration d'Express.
Afin d'accéder à une Aide contextuelle pendant que vous suivez l'assistant d'installation de l'intégration, déplacez votre souris sur les liens ?.
Pour obtenir des réponses à des questions spécifiques, choisissez Support Base de connaissances depuis la barre de menu du tableau de bord.
Pour contacter un représentant du support technique, choisissez Support Soumettre ticket depuis la barre de menu du tableau de bord. (Si vous n'arrivez pas à accéder au tableau de bord, envoyez votre demande de support à l'adresse : [email protected].)
Dernière révision: 29 janvier 2013
Obtenir de l'aide | xi
Chapitre 1.
Introduction
Review Display 2.0 propose un lifting visuel par rapport au Review Display d'origine (version 1.0). Non seulement Review Display 2.0 est visuellement plus attractif, mais il est également plus flexible, extensible et personnalisable. Ce chapitre décrit les éléments d'affichage en général, donne des instructions générales pour personnaliser des éléments d'affichage, et dresse la liste des références utiles de l'industrie en relation avec les langages CSS et HTML.
Aperçu du chapitre
Composantes de Review Display
Gérer le style des éléments de Review Display
Références en ligne
Confidentiel Bazaarvoice
1
Confidentiel Bazaarvoice
Composantes de Review Display Le “Review Display” comprend plusieurs écrans affichage distincts qui peuvent être disposés et stylisés, comme décrit dans les sections suivantes.
Snippet Display Le Review Snippet est une version condensée d'un contenu d'évaluation construit pour présenter un encombrement plus faible sur votre page web. Le Snippet, qui inclut un résumé des étoiles d'évaluation et le nombre d'avis correspondant au produit, peut être utilisé n'importe où sur votre site web (pages catégorie et/ou produit) mais est généralement présent au-dessus du "fold" (la portion d'une page web visible sans que l'on doive la faire défiler) sur une page de détails sur un produit, de façon à être immédiatement visible pour quiconque s'intéressant au produit.
Nous vous conseillons d'afficher les snippets à la fois sur la page catégorie et sur la page produit. ASTUCE La Figure 1 représente un Snippet typique.
Figure 1. Écran d’affichage typique des Snippets
Review Display (Écran d’affichage des évaluations) Le Review Display inclut un Review Snapshot® (Aperçu d'évaluation)(Figure 2) ainsi que toutes les évaluations individuelles d'un client (voir la Figure 3 pour un exemple). Les avantages, les inconvénients et les balises les mieux utilisées sont affichés sous forme de colonnes pour une lecture aisée et rapide. Le Review Display est généralement affiché en-dessous du "fold" ou dans un onglet de la page de détails d'un produit. Contrairement à un Snippet, le Review Display peut seulement être affiché une fois par page web.
2 | Chapitre 1 Introduction
Dernière révision: 29 janvier 2013
Confidentiel Bazaarvoice
Figure 2. Review Snapshot (Aperçu d'évaluation)
Figure 3. Exemple d'une évaluation individuelle
Gérer le style des éléments de Review Display Pour gérer le style de votre formulaire Write a review (Écrire une évaluation), utilisez la fonction de Personnalisation avancée (disponible depuis les sélections du menu du Personnaliser styles) pour ajouter vos propres tableau de bord Configuration styles ou mettre à jour les classes CSS existantes.
Dernière révision: 29 janvier 2013
Gérer le style des éléments de Review Display | 3
Confidentiel Bazaarvoice
Références en ligne Nous vous conseillons de consulter les références de l'industrie afin d'en apprendre davantage sur l'utilisation du langage CSS pour styliser les éléments de votre site web. Voici certaines des ressources suggérées :
CSS Sprites—http://www.alistapart.com/articles/sprites/
CSS overrides—http://www.yourhtmlsource.com/style sheets/advancedcss.html
Bases du float—http://css.maxdesign.com.au/floatutorial/introduction.htm
Images d'arrière-plan pour remplacer du texte— http://stopdesign.com/archive/2003/03/07/replace-text.html
Coins arrondis en CSS3—http://www.css3.info/preview/rounded-border/
Propriétés des bordures en CSS—http://www.w3schools.com/css/css_border.asp
(Vérification de la disponibilité des liens le 26 avril 2011)
4 | Chapitre 1 Introduction
Dernière révision: 29 janvier 2013
Chapitre 2. Gérer le style du Review Display Ce chapitre fournit des informations détaillées sur les sections Review Display (Écran d’affichage des évaluations) et sur les éléments dont vous pouvez gérer le style.
Aperçu du chapitre
Review Snippet (Snippet d'évaluation)
Review Snapshot (Aperçu d'évaluation)
Review Display (Écran d’affichage des évaluations)
Confidentiel Bazaarvoice
5
Confidentiel Bazaarvoice
Review Snippet (Snippet d'évaluation) Le Review Snippet peut être personnalisé pour s'afficher dans de nombreux formats différents. Le style de la version par défaut peut être personnalisé pour s'afficher de manière plus compacte (voir “Snippet compact,” below) et/ou avec un style minimaliste (voir “Snippet minimaliste” à la page 7.)
Figure 4. Éléments d'un Review Snippet
Snippet compact Le Snippet compact est généralement utilisé sur la page produit (hors de la section évaluation) est se trouve communément au-dessus du "fold" et près des informations relatives aux détails du produit et au prix.
Figure 5. Snippet compact Pour afficher le Snippet compact, ajoutez les lignes CSS suivantes à vos données de Personnalisation avancée (disponibles depuis les sélection du menu du tableau de bord Configuration Personnaliser styles) : .pr-snippet-wrapper { background-color: #FFF; border: 1px solid #CBCBCB; } .pr-snippet-stars { background: #FFF; border: none; float: none; margin: auto; width: 110px;
6 | Chapitre 2 Gérer le style du Review Display
Dernière révision: 29 janvier 2013
Confidentiel Bazaarvoice
} .pr-snippet-review-count { display: none; } .pr-snippet-read-write { background: none; border: none; } .pr-snippet-read-review, .pr-snippet-write-review { float: none; }
Le conteneur parent contrôle la largeur du Snippet. Pour fixer explicitement la largeur du Snippet, ajoutez une largeur à la classe pr-snippet et ajoutez la classe à vos données de Personnalisation avancée disponibles via les sélections du menu du tableau de bord Configuration Personnaliser styles).
Snippet minimaliste Le Snippet minimaliste est généralement utilisé sur les pages catégorie où de multiples produits sont visibles. Ces Snippets sont présents à côté de l'image et du nom du produit, et fournissent un petit aperçu de l'avis moyen (sous la forme d'étoiles) accompagné de sa moyenne numérique.
Figure 6. Snippet minimaliste Pour afficher le Snippet minimaliste, ajoutez les lignes CSS suivantes à vos données de Personnalisation avancée (disponibles depuis les sélection du menu du tableau de bord Configuration Personnaliser styles) : .pr-snippet { background: none; border: none; padding: 0; } .pr-snippet-stars { background: none; border: none; float: none; margin: auto;
Dernière révision: 29 janvier 2013
Review Snippet (Snippet d'évaluation) | 7
Confidentiel Bazaarvoice
padding: 0; width: 110px; } .pr-snippet-review-count { display: none; } .pr-snippet-read-write { display: none; }
Review Snapshot (Aperçu d'évaluation) Comme présenté dans la Figure 7, le Review Snapshot® comprend cinq sections principales :
L'en-tête du snapshot
Résumé d'évaluation
Résumé des balises
Résumé des attributs
Lien Écrire une évaluation
Figure 7. Sections Review Snapshot (Aperçu d'évaluation) Vous pouvez personnaliser le style du Review Snapshot pour le faire correspondre au look et à l'humeur de votre site web ; voir les sous-sections de ce sujet pour plus de détails.
8 | Chapitre 2 Gérer le style du Review Display
Dernière révision: 29 janvier 2013
Confidentiel Bazaarvoice
L'en-tête du snapshot L'en-tête du snapshot contient le texte du titre du Review Snapshot® et est composé de trois éléments principaux :
.pr-snapshot-head—Style de l'arrière-plan pour le conteneur de l'en-tête du
snapshot.
.pr-snapshot-title—Titre du Review Snapshot™.
.pr-snapshot-cobrand—Lien vers votre site web
Une manière simple de personnaliser l'en-tête est de modifier l'image d'arrière-plan en ajoutant les lignes CSS suivantes à vos données de Personnalisation avancée (disponibles depuis les sélection du menu du tableau de bord Configuration Personnaliser styles) : .pr-snapshot-head { background-image: url(/path/to/your/image.gif); background-repeat: repeat-x; }
Résumé d'évaluation Le résumé d'évaluation fournit les évaluations générales d'un produit. Voici ces éléments :
.pr-stars—Avis général (sous forme d'étoiles) du produit.
.pr-rating—Évaluation numérique générale du produit.
.pr-snapshot-average-based-on-text—Nombre d'évaluations utilisées pour
calculer les avis généraux par étoiles et numériques.
.pr-snapshot-consensus-value—Pourcentage moyen d'évaluateurs qui recommanderaient ce produit à un ami.
Une des personnalisations les plus populaires consiste à remplacer les étoiles par défaut par des étoiles personnalisées qui reflètent bien votre produit et/ou marque.
Figure 8. Avant (étoiles par défaut)
Figure 9. Après (étoiles personnalisées)
Dernière révision: 29 janvier 2013
Review Snapshot (Aperçu d'évaluation) | 9
Confidentiel Bazaarvoice
Exigences relatives aux images d'étoiles Il est primordial que vos nouvelles images d'étoiles répondent aux caractéristiques suivantes :
Format GIF ; nous vous conseillons d'utiliser la transparence.
Les grandes étoiles d'évaluation font 112 pixels de large et 250 pixels de haut; les petites étoiles d'évaluation font 83 pixels de large et 195 pixels de haut.
Trois (3) pixels entre les rangées.
Figure 10.Éventail complet d'étoiles d'évaluation personnalisées L'affichage des étoiles est implémenté en utilisant des Sprites CSS (voir http://www.alistapart.com/articles/sprites/). Nous utilisons une grande image d'étoile et une petite image d'étoile, et n'affichons qu'une petite portion de l'image à la fois via CSS. Placer les CSS overrides suivants dans vos données de Personnalisation avancée (disponibles depuis les sélection du menu du tableau de bord Configuration Personnaliser styles) pendant que vous référencez vos nouvelles images d'étoiles modifiera de façon effective toutes les images d'étoiles d'évaluation de votre site : .pr-snapshot-rating .pr-stars, div.prStars { background-image: url(http://www.yoursite.com/images/large_stars.gif); } .pr-stars-small, .pr-snippet-stars .pr-stars-small { background-image: url(http://www.yoursite.com/images/small_stars.gif); }
10 | Chapitre 2 Gérer le style du Review Display
Dernière révision: 29 janvier 2013
Confidentiel Bazaarvoice
Résumé des balises Le résumé des balises est une sélection des balises les plus populaires que les évaluateurs ont appliqué au produit. Les balises sont affichées sous forme de trois colonnes : Avantages, Inconvénients et Meilleures utilisations. L'exemple suivant montre le code HTML utilisé pour construire la colonne Avantages :
Pros
- Durable (26)
- Attractive design (17)
- Smooth (17)
- Ergonomic (12)
- High quality (12)
Par défaut, chaque conteneur possède une bordure extérieure grise d'un pixel, et le titre de chaque colonne possède un arrière-plan gris. Pour retirer à la fois la bordure et l'arrière-plan, ajoutez les lignes CSS suivantes à vos données de Personnalisation avancée (disponibles depuis les sélection du menu du tableau de bord Configuration Personnaliser styles) : .pr-attribute-key p { background-color: transparent; } .pr-review-points-attr-wrapper .pr-attribute-group { border: none; }
Figure 11. Avant (résumé des balises par défaut)
Dernière révision: 29 janvier 2013
Review Snapshot (Aperçu d'évaluation) | 11
Confidentiel Bazaarvoice
Figure 12. Après (résumé des balises personnalisées)
Résumé des attributs Le résumé des attributs est une sélection des attributs personnalisés utilisés par les évaluateurs pour marquer un produit. Le code consiste en une liste non ordonnée et en des éléments de liste :
.pr-other-attributes-list—L'élément
- .
- qui contient le label de l'attribut.
.pr-other-attributes-value—L'élément - qui contient l'attribut.
Pour écraser le marqueur de liste par défaut, ajoutez le CSS override suivant à vos données de Personnalisation avancée (disponibles depuis les sélection du menu du tableau de bord Configuration Personnaliser styles) : .pr-other-attributes-list li.pr-other-attribute-label { background-image: url(path/to/your/marker.gif); background-position: left center; background-repeat: no-repeat; padding: 0 0 0 0.7em; /* le padding varie selon la taille de l'image */ }
Lien Écrire une évaluation La section en bas du Review Snapshot est le lien Écrire une évaluation. Pour afficher le lien sous forme de bouton, vous devez soit référencer l'image d'un bouton personnalisé, soit imiter un bouton en ajoutant une couleur à l'arrière-plan, comme décrit ci-dessous.
Référencer un bouton personnalisé Pour transformer un lien en bouton personnalisé, ajoutez les lignes CSS suivantes à vos données de Personnalisation avancée (disponibles depuis les sélection du menu du tableau de bord Configuration Personnaliser styles) : .pr-snapshot-write-review { background-image: url("path/to/your/write_review.gif"); height: 25px;
12 | Chapitre 2 Gérer le style du Review Display
Dernière révision: 29 janvier 2013
Confidentiel Bazaarvoice
width: 10em; } .pr-snapshot-write-review span { display: none; }
Figure 13. Avant (lien Écrire une évaluation par défaut)
Figure 14. Après (bouton personnalisé pour lien Écrire une évaluation)
Imiter un bouton (Ajouter une couleur) Si vous préférez imiter un bouton au lieu d'utiliser l'image d'un bouton personnalisé, changez la couleur d'arrière-plan du contenu div, comme suit : .pr-snapshot-write-review { background-color: #000; color: #FFF; padding: 0.5em; width: 7em; /* fixez la largeur ; sinon il s'étendra sur toute la page */ }
Figure 15. Avant (lien Écrire une évaluation par défaut)
Figure 16. Après (bouton imité pour lien Écrire une évaluation)
Dernière révision: 29 janvier 2013
Review Snapshot (Aperçu d'évaluation) | 13
Confidentiel Bazaarvoice
Review Display (Écran d’affichage des évaluations) Comme présenté dans la Figure 17, le Review Snapshot® comprend les sections principales suivantes :
En-tête de l'évaluation
Profil de l'évaluateur
Date de l'évaluation
Balises d'évaluation
Commentaires de l'évaluation
Attributs de l'évaluation
Pied de page de l'évaluation
Figure 17. Section Review display Vous pouvez personnaliser le style du Review Snapshot pour le faire correspondre au look et à l'humeur de votre site web ; voir les sous-sections de ce sujet pour plus de détails.
14 | Chapitre 2 Gérer le style du Review Display
Dernière révision: 29 janvier 2013
Confidentiel Bazaarvoice
En-tête de l'évaluation L'en-tête de l'évaluation ressemble énormément au résumé d'évaluation, à la différence qu'il inclut le texte le plus utile (par exemple, “1 client sur 1 a trouvé ce commentaire utile”) et les petites étoiles d'évaluation. Pour plus d'informations sur l'utilisation des étoiles personnalisées, consultez “Résumé ” sur la page 9. Les éléments suivants constituent l'en-tête de l'évaluation :
.pr-review-most-helpful—Texte le plus utile.
.pr-stars—Évaluation par étoiles pour l'avis.
.pr-rating—Évaluation numérique pour l'avis.
Profil de l'évaluateur La section profil de l'évaluateur affiche les informations que les évaluateurs ont fournies pendant le processus Écrire une évaluation, dont leur nom, localisation et affinités. Le profil de l'évaluateur comprend les éléments suivants:
.pr-review-author-name—Nom de l'auteur pour l'évaluation.
.pr-review-author-location—Localisation de l'auteur.
.pr-review-author-affinités—Affinités fournies par l'auteur (il peut y avoir des
affinités multiples).
Date de l'évaluation La date de l'évaluation est un estampillage de la date du moment auquel l'évaluation a été soumise. Il existe plusieurs variations d'affichage du bloc de la date ; celui par défaut est par ligne (seulement numérique).
NOTE
Pour modifier le format de la date et remplacer le format en ligne par défaut (seulement numérique), ou pour changer son format (comme mm/jj, jj/mm/aaaa), contactez-nous. Si vous êtes toujours dans la phase initiale d'intégration, prévenez votre ingénieur d'intégration ; sinon, soumettez un ticket de support via le tableau de bord.
Dernière révision: 29 janvier 2013
Review Display (Écran d’affichage des évaluations) | 15
Confidentiel Bazaarvoice
Tableau 1. Formats de la date d'évaluation En ligne (seulement numérique)
En ligne (alphanumérique)
En bloc
Balises d'évaluation Le résumé des balises d'évaluation est identique au résumé des balises dans l'en-tête du snapshot. Pour obtenir des informations sur la personnalisation des balises d'évaluation, consultez “Résumé des balises” à la page 11.
Commentaires de l'évaluation Les commentaires de l'évaluation sont le cœur de l'évaluation d'un client car ils affichent les commentaires fournis durant le processus Écrire une évaluation. Cette section comprend les éléments suivants :
.pr-comments-header—Nom du produit évalué.
.pr-comments—Texte commentaire de l'évaluation actuelle.
Attributs de l'évaluation Les attributs de l'évaluation sont une sélection des attributs avec lesquels l'évaluateur a marqué le produit durant le processus Écrire une évaluation. Le concept est identique que pour le résumé des attributs décrit dans “Résumé des attributs” à la page 12.
Pied de page de l'évaluation Le pied de page de l'évaluation est la section finale de l'évaluation du client. Il contient l'avis essentiel et les éléments des outils d'évaluation :
.pr-review-bottom-line-wrapper—Avis essentiel stipulant si un évaluateur
recommanderait le produit.
.pr-review-helpful-text—Liens pour que les clients puissent marquer si
l'évaluation était utile ou pas.
.pr-review-report-issue—Liens pour que les clients puissent signaler une évaluation comme étant offensante ou incorrecte.
16 | Chapitre 2 Gérer le style du Review Display
Dernière révision: 29 janvier 2013
Confidentiel Bazaarvoice
Figure 18. Pied de page par défaut Une personnalisation typique consiste à diviser le “texte utile” de l'évaluation et “signaler ce texte d'évaluation” (Figure 19) en deux lignes distinctes (Figure 20) en ajoutant ce qui suit à vos données de Personnalisation avancée (disponibles via les sélections du menu du tableau de bord Configuration Personnaliser styles) : .pr-review-tools p { display: block; } .pr-review-report-issue-hyphen { display: none; }
Figure 19. Avant (texte utile et de signalisation par défaut)
Figure 20.
Après (pied de page d'évaluation et texte de signalisation séparés)
Dernière révision: 29 janvier 2013
Review Display (Écran d’affichage des évaluations) | 17
Confidentiel Bazaarvoice
Format en une colonne Le Review Display (Écran d’affichage des évaluations) par défaut se présente sous la forme de deux colonnes : la première colonne contient le profil de l'évaluateur et la deuxième colonne contient tout le reste. Néanmoins, si vous avez peu de place pour afficher vos évaluations, vous pouvez facilement modifier le Review Display pour passer au format en une colonne qui reprendra tous les éléments affichés (voir Figure 21). Ajoutez les lignes suivantes à vos données de Personnalisation avancée (disponibles depuis les sélection du menu du tableau Configuration Personnaliser styles) : .pr-review-author p { display: inline; } .pr-review-rating-wrapper, .pr-review-main-wrapper { float: none; width: 100%; } .pr-review-author float: none; width: 100%; }
{
Figure 21. Review Display sous le format en une colonne
18 | Chapitre 2 Gérer le style du Review Display
Dernière révision: 29 janvier 2013
Chapitre 3. Style des fonctionnalités d'évaluation optionnelles À mesure que nous continuons à innover et à ajouter de nouvelles caractéristiques et fonctionnalités à notre Review Display, des styles supplémentaires sont mis à disposition et vous pouvez les utiliser pour personnaliser le look et l'humeur de ces fonctionnalités. Ce chapitre décrit les styles que vous pouvez appliquer aux fonctionnalités d'évaluation optionnelles.
Aperçu du chapitre
Histogramme d'évaluation
Badge
Confidentiel Bazaarvoice
19
Confidentiel Bazaarvoice
Histogramme d'évaluation L'histogramme d'évaluation est une fenêtre pop-up modale qui affiche la répartition des avis pour un produit : nombre d'évaluations pour chaque avis (étoiles). L'histogramme offre une rapide représentation visuelle du pourcentage d'évaluations ayant reçu une certaine note (nombre d'étoiles), et le nombre exact d'évaluations pour chaque avis est fourni entre parenthèses dans le coin droit de la fenêtre d'affichage. (S'il n'existe aucune évaluation pour une note donnée, la barre est toute grise et le nombre affiché est “(0)”, comme c'est le cas pour l'avis 2 étoiles dans la Figure 22.)
Figure 22.
Fenêtre pop-up de l'histogramme d'évaluation
La fenêtre pop-up est activée lorsqu'un acheteur se déplace au-dessus de l'icône de l'histogramme dans un Review Snapshot, comme indiqué dans la Figure 23.
Figure 23.
Icône de l'histogramme
20 | Chapitre 3 Style des fonctionnalités d'évaluation optionnelles
Dernière révision: 29 janvier 2013
Confidentiel Bazaarvoice
Les éléments suivants sont disponibles pour la gestion du style :
.pr-snapshot-histogram-header—En-tête de l'histogramme.
.pr-histogram-label—Label de l'étoile (à savoir, 5 étoiles, 4 étoiles, etc.)
.pr-ratings-histogram-bar—Contrôle la barre de répartition de l'histogramme.
.pr-histogram-count—Compte pour chaque avis (sous forme d'étoiles).
Badge Lorsque vous créez des badges personnalisés, leur nom doit correspondre avec leur nom de classe CSS. En plus d'écraser les noms de classe, vous pouvez aussi personnaliser/gérer le style à la fois pour les badges personnalisables et les badges standard. Consultez les sous-sections de ce sujet pour des exemples détaillés.
Acheteur certifié Pour personnaliser le badge d'un acheteur certifié, ajoutez le code suivant à vos données de Personnalisation avancée (disponibles depuis les sélection du menu du tableau de bord Configuration Personnaliser styles) (et modifiez-le si nécessaire) : .pr-review-author-verified-buyer-wrapper.pr-review-author-verified-buyeren_US a { display: none; } .pr-review-author-verified-buyer-wrapper { background: url("http://www.yourSite.com/images/verifiedBuyer.gif") no-repeat; height: 21px; }
Évaluateur certifié Pour personnaliser le badge d'un évaluateur certifié, ajoutez le code suivant à vos données de Personnalisation avancée (disponibles depuis les sélection du menu du tableau de bord Configuration Personnaliser styles) et modifiez-le si nécessaire : .pr-review-author-verified.pr-review-author-verified-en_US a { display: none; } .pr-review-author-verified { background: url("http://www.yourSite.com/images/verifiedReviewer.gif")
Dernière révision: 29 janvier 2013
Badge | 21
Confidentiel Bazaarvoice
no-repeat; height: 21px; }
Badge personnalisé En plus des badges d'acheteur et évaluateur personnalisés, vous pouvez aussi ajouter des badges personnalisés ; par exemple pour les meilleurs contributeurs, la catégorie expert etc. Les évaluations "j'aime" et les badges personnalisés sont partagés parmi tous les marchands d'un groupe de marchands. Cependant, vous pouvez personnaliser l'apparence des badges au niveau du marchand en usant les CSS overrides : .pr-review-author-topContributor-wrapper.pr-review-author-topContributorwrapper-en_US { background: url("http://www.yourSite.com/images/merchantName_topContributor.gif") no-repeat; } .pr-review-author-topContributor-wrapper.pr-review-author-topContributorwrapper-en_US img { visibility: hidden; } .pr-profile-author-container .pr-profile-badge-wrapper { width: 85px; margin-left: 65px; }
Le code donné en exemple dans cette section part du principe que “topContributor” (meilleur contributeur) est le label de badge spécifié lorsque vous avez créé le badge personnalisé via le tableau de bord. NOTE
22 | Chapitre 3 Style des fonctionnalités d'évaluation optionnelles
Dernière révision: 29 janvier 2013
Chapitre 4. Style d'une page Écrire une évaluation À la manière d'un Snippet ou Review Display, la formulaire Écrire une évaluation peut être stylisé à l'aide du CSS afin de correspondre au look et à l'humeur de votre site web. Ce chapitre fournit des informations sur les pages individuelles crées par la plateforme Écrire une évaluation iFrame (Write A Review iFrame), ainsi que les éléments de chaque page.
Aperçu du chapitre
Formulaire de soumission d'évaluation
Page d'aperçu de l'évaluation
Page de remerciement d'évaluation
Confidentiel Bazaarvoice
23
Confidentiel Bazaarvoice
Formulaire de soumission d'évaluation Le formulaire de soumission d'évaluation est la page principale du processus Écrire une évaluation. Il s'agit de la première page du processus de soumission, laquelle contient les champs que les clients (acheteurs) utilisent pour entrer leur évaluation.
Figure 24.
Éléments Écrire une évaluation, partie 1
24 | Chapitre 4 Style d'une page Écrire une évaluation
Dernière révision: 29 janvier 2013
Confidentiel Bazaarvoice
Figure 25.
Éléments Écrire une évaluation, partie 2
Exemples Figure 26 et la Figure 27 représentent un formulaire de soumission Écrire une évaluation très personnalisé.
Dernière révision: 29 janvier 2013
Formulaire de soumission d'évaluation | 25
Confidentiel Bazaarvoice
Figure 26.
Formulaire Écrire une évaluation personnalisé, partie 1
26 | Chapitre 4 Style d'une page Écrire une évaluation
Dernière révision: 29 janvier 2013
Confidentiel Bazaarvoice
Figure 27.Formulaire Écrire une évaluation personnalisé, partie 2
Dernière révision: 29 janvier 2013
Formulaire de soumission d'évaluation | 27
Confidentiel Bazaarvoice
Page d'aperçu de l'évaluation Lorsqu'un client complète le formulaire de soumission d 'évaluation, il/elle peut visionner un aperçu de l'évaluation (voir la page Aperçu d'évaluation) avant de le soumettre. Vous pouvez styliser/personnaliser l'aperçu d'évaluation grâce au CSS ; les éléments disponibles sont repris dans la Figure 28.
Figure 28.
Éléments de la page Aperçu d'évaluation
28 | Chapitre 4 Style d'une page Écrire une évaluation
Dernière révision: 29 janvier 2013
Confidentiel Bazaarvoice
Page de remerciement d'évaluation La page finale du processus de soumission d'évaluation est la page de remerciement. Cette page confirme au client qu'il a soumis son évaluation avec succès dans le système et le redirige vers la page d'accueil ou la page produit. Figure 29 reprend les éléments disponibles pour la gestion du style.
Figure 29.
Éléments de la page de remerciement
Dernière révision: 29 janvier 2013
Page de remerciement d'évaluation | 29
Annexe A.
Historique de révision
Cette annexe décrit les révision principales apportées à ce document au fil du temps.
Aperçu de l'annexe
Tableau 2, “Historique de révision”
Confidentiel Bazaarvoice
31
Confidentiel Bazaarvoice
Le Tableau 2 décrit les révisions principales apportées à ce document.
Tableau 2.
Historique de révision
Date
Révisions
27 février 2012
Sur base de la dernière version (v5), ce document a été à nouveau reformaté, et une section à été ajoutée au chapitre sur les badges.
12 mars 2012
Noms de produit mis à jour.
30 novembre 2012
Nouveau nom pour Bazaarvoice.
21 décembre 2012
Traduit en français.
29 janvier 2013
Corrections mineures de traduction.
32 | Annexe A Historique de révision
Dernière révision: 29 janvier 2013
.pr-other-attributes-label—L'élément
