Afficher les variations depuis le layer de Doofinder

Objectif du tutoriel

Comme évoqué dans le titre, le but de ce tutoriel est de montrer plusieurs variantes d’un même produit dans le layer de Doofinder. Au lieu de montrer les variantes comme des produits indépendants, nous allons les montrer comme un seul produit. Lorsque la souris passera sur une circonférence colorée déterminée, les images des variantes changeront.
Pour ce faire, nous allons représenter les données dans le flux de façon à pouvoir modifier relativement facilement le HTML dont nous avons besoin dans la template du Layer.

Analyse du problème

Imaginons : nous venons de créer notre e-commerce de smartphone et nous disposons déjà de quelques modèles à la vente : un modèle noir, sobre et élégant, et un autre modèle que nous avons en différentes couleurs.
Pour les personnes qui souhaitent un téléphone coloré, il est certainement plus pratique de voir toutes les variantes dans un même résultat de recherche.
Pour un produit sans variante, on trouve généralement les champs suivants :

  • Numéro unique d’identification du produit
  • Nom du modèle du téléphone
  • Lien vers la page du produit
  • Lien vers l’image du produit
  • Marque
  • Prix
  • Couleur

Généralement, pour montrer les différentes variantes d’un produit, on répète ces champs pour chaque variante du produit, en changeant l’URL de la page du produit et celle de l’image.
Un modèle de téléphone en noir, doré et argenté s’exporterait ainsi 3 fois dans le flux (une fois pour chaque couleur) et apparaîtrait comme 3 résultats différents dans les résultats.
Pour qu’il soit montré comme un modèle unique dans le flux, nous allons :

  1. Faire en sorte que le champ “color” contienne toutes les valeurs possibles pour la couleur du téléphone.
  2. Ajouter un nouveau champ images qui contiendra les différentes images des variantes.

En résumé, nous devrons :

  1. Exporter l’information nécessaire dans le flux de données à un format qui soit facilement transformable par Javascript.
  2. Configurer le template du layer avec le HTML approprié.
  3. Ajouter les fonctions de template nécessaires pour transformer les champs vus dans les résultats de recherche, et faire en sorte que le HTML peint ait un sens, car la valeur brute ne sera pas très utile.
  4. Ajouter la gestion d’événements nécessaire afin que les images changent lorsque la souris se déplace sur le sélecteur de couleurs.

Couleurs et images dans le flux de données

Comme mentionné, nous allons ajouter les champs “color” et “images” aux champs habituels de notre flux de données.
Le champ color contient plusieurs valeurs, séparées par la barre oblique horizontale / (MAJ + 7). Dans notre exemple, les trois couleurs que nous allons manipuler sont :

  • black
  • silver
  • gold

Le champ images est un peu plus complexe : il faut associer chaque couleur disponible à une image différente, le tout dans un seul champ texte.
Pour ce faire, nous allons inventer un format qui permette d’extraire les valeurs dont nous avons besoin grâce à des séquences de caractères spécifiques.
Dans l’exemple suivant, une image est définie par une couleur (une de celles disponibles pour le produit), un séparateur :: et l’URL de l’image. Nous pouvons répéter ce schéma en séparant les différentes occurrences à l’aide du séparateur **.

Le flux pourrait ressembler à ça :

Le champ images, en plusieurs lignes pour une meilleure lisibilité :

Une fois ce flux traité, nous disposons de toutes les données nécessaires pour programmer notre template.

Variations dans le template de résultats

Nous supposons maintenant que vous disposez du Javascript établi par défaut. Si ce n’est pas le cas, vous pouvez créer un script à partir de votre panneau de contrôle Doofinder. Cela nous permet de nous concentrer seulement sur les changements à apporter.
L’étape suivante consiste à modifier le template de résultats pour inclure les images des différentes variantes de couleurs du produit et un sélecteur pour faire en sorte qu’elles s’alternent.
Commençons par peindre les images. Il y a 3 possibilités :

  1. Il y a effectivement plusieurs images situées dans le champ images.
  2. Il n’y a pas de champ images mais il y a un champ image_link (le champ par défaut dans un flux normal)
  3. Il n’y a pas d’image. Dans ce cas, on ne peindra rien.

Le code HTML qui illustre ces trois possibilités est assez simple :

Dans le code, on fait référence à une fonction remove-protocol et à une fonction image_variants.
La première est inclue avec le Layer et permet aux images d’avoir bonne apparence, que le Layer soit utilisé sur une page HTTP ou une page HTTPS.
Nous devrons rajouter la seconde pour peindre le HTML des images. Nous verrons comment faire par la suite.
Pour finir avec les modifications de la template, nous ajoutons le sélecteur de variante, dont le code est encore plus simple que le précédent:

Ici, nous déclarons une fonction color_selector qui reçoit la valeur du champ de couleur et peint le HTML du sélecteur.
La template complet sera inclus dans le site web au moyen d’une balise <script>avec un attribut type que le navigateur reconnaît comme du texte, afin qu’il n’essaie pas de l’interpréter comme du Javascript.
Voici le code complet du template à l’intérieur de la balise <script> :

Nous souhaitons enfin indiquer deux choses au layer :

  1. D’utiliser la template de résultats que nous venons de créer au lieu du modèle par défaut.
  2. De ne pas transmettre des résultats transformés lorsque l’on demande des résultats à partir du serveur Doofinder, afin que les champs configurés soient disponibles pour notre template nouvellement créé.

Nous allons le faire en ajoutant certaines options au layer :

Pour passer le template Layer, nous allons référencer la balise <script> que nous avons ajoutée au moyen de l’attribut id, afin d’obtenir le contenu de cette balise.

Transformation des données

L’étape suivante consiste à créer les fonctions que nous avons déclarées dans notre template et qui transformeront les données reçues de Doofinder en HTML.
Ces fonctions sont déclarées dans un objet Javascript dans les options du layer, à l’intérieur de templateFunctions.

Nous allons commencer par expliquer image_variants.
Souvenez-vous, le champ images contient une chaîne de texte qui représente les paires de couleurs et les URL séparées par ::. Chaque paire est séparée de la suivante par **.
La fonction consiste à diviser la chaîne pour obtenir chaque paire et ensuite, pour chaque paire, extraire la couleur, l’URL, et composer le HTML nécessaire pour peindre une image. La couleur est stockée dans un attribut data-image-variant de l’image.
Seule la première image sera affichée initialement, les autres resteront masquées par CSS.
La fonction color_selector  est encore plus simple, car elle récupère simplement les couleurs de la valeur du champ color grâce au séparateur / et peint le HTML que nous utiliserons pour sélectionner chaque variante. Dans ce cas, la couleur est également stockée dans un attribut data-image-variant.
Les balises HTML devraient être peintes correctement à ce stade, mais ça n’a probablement pas encore belle allure.
En appliquant un peu de CSS, nous pouvons rendre l’aperçu un peu moins rudimentaire:

Gestion d’événements

Si vous êtes arrivé jusqu’ici, vous avez remarqué que le sélecteur de couleur ne fonctionne pas.
Pour le faire fonctionner, nous devons capturer le moment où le pointeur de la souris passe sur les différentes couleurs pour lire l’attribut data-image-variant et utiliser la valeur pour afficher l’image de la variante et cacher les autres.
Mais nous ne pouvons pas déclarer cette capture d’événement avant que le layer ne soit initialisé. Nous devons donc attendre que le layer soit prêt. Pour ce faire, nous utiliserons le callback chargé depuis le layer.
Le code ci-dessous est un peu fastidieux à faire en Javascript pur, nous avons donc pris la liberté de l’écrire en supposant que la page utilise Linux. Si ce n’est pas le cas, vous savez …

Basiquement, le code détecte l’événement de survol du pointeur de la souris dans le calque et exécute une fonction si le pointeur passe spécifiquement au-dessus des éléments de classe .color-selector qui ont également un attribut data-image-variant.
C’est ce qu’on appelle la délégation d’événements et nous l’utilisons car elle permet de définir une seule fois la capture d’événement et de l’exécuter pour tous les résultats qui sont peints. Nous n’avons pas à nous soucier de le faire chaque fois que l’on reçoit de nouveaux résultats.
Lorsque l’événement désiré a été détecté dans le sélecteur de couleurs, la couleur de l’attribut data-image-variant est extraite et l’image est recherchée dans le même résultat, qui a la même valeur pour l’attribut. Cette image est alors affichée et les autres sont masquées.
Avec ces derniers changements, vous devriez obtenir un calque qui montre les variantes quand elles sont disponibles et l’image par défaut quand elles ne le sont pas.

Vous en souhaitez davantage ?

Si vous souhaitez améliorer davantage l’expérience, nous vous suggérons quelques exercices :

  1. Dans les produits avec variantes, faites en sorte que lorsque le curseur de la souris quitte une variante, l’image par défaut (celle de la zone image_link) apparaisse.
  2. Pour les produits avec variantes, faites en sorte qu’en cliquant sur l’un des sélecteurs, l’utilisateur accède à la page correspondant à cette variante. Selon le format des liens de votre page, vous pouvez utiliser le code couleur pour modifier l’URL d’origine de votre produit. Sinon, vous devrez peut-être ajouter un nouveau champ au flux de données.
  3. Le champ color n’a de sens que si vous avez l’intention de l’utiliser pour filtrer les résultats. Si vous le souhaitez, vous pouvez essayer de programmer cet exemple uniquement avec le champ images.