Le module de visite - Créez votre propre visite pour un thème personnalisé dans Drupal 9

Publié: 2021-09-28

Quoi de mieux qu'une visite guidée lorsque l'on se trouve dans un lieu inconnu ?

L'expérience utilisateur devient lentement le point central de chaque entreprise. Offrir une expérience qui aide à orienter votre utilisateur dans la bonne direction grâce aux interactions de l'interface utilisateur peut changer la donne pour toute entreprise. Dans cet article, nous allons explorer le module Tour pour Drupal 9. Avec le module Tour, vous pouvez non seulement faire une visite guidée pré-construite d'une vue existante, vous pouvez également intégrer le module Tour dans votre thème personnalisé (que nous expliquerons en détail plus tard).

Module de visite

Le module de visite de Drupal 9

Vous voudriez implémenter le module Drupal 9 Tour lorsque vous souhaitez que votre utilisateur se concentre davantage sur certains composants de votre site qui passent facilement inaperçus. Il est également idéal lorsque vous souhaitez guider votre utilisateur dans un flux de travail guidé. Le module Tour est inclus dans le noyau Drupal depuis Drupal 8.

Lorsque vous activez le module, il propose des visites guidées de l'interface du site Web à l'aide d'info-bulles. Pour effectuer une visite, vous pouvez modifier une vue existante sur

 /admin/structure/views

et cliquez sur le lien "? Tour" dans le coin supérieur droit de la barre d'outils d'administration. Vous pouvez également visiter

 /admin/structure/views/view/frontpage?tour=1

pour démarrer automatiquement la visite des vues.

Afficher le paramètre

Dans Drupal 8, le module Tour est construit sur le plugin Joyride jQuery, qui est obsolète dans Drupal 9.2 avec Shepherd.js.

Nous avons une autre méthode pour ajouter une visite pour les modules et l'interface d'administration via le fichier YML. Ici, j'ajoute une visite dans un thème personnalisé.

Qu'est-ce que Shepherd.js ?

Shepherd est une bibliothèque JavaScript qui vous permet de créer facilement des visites guidées de votre application ou de votre site Web. Il exploite Popper.js, une autre bibliothèque open source, pour rendre les dialogues pour chaque "étape" de la visite.

Intégrer le module Tour dans un thème personnalisé

Dans Drupal 9, nous avons plusieurs types de pages de contenu à intégrer :

  1. Visite guidée
  2. Visite du nœud
  3. Voir la visite, etc.

Prenons l'hypothèse d'avoir une page de tableau de bord qui a plusieurs cartes à afficher avec tous les graphiques et valeurs comme dans l'image ci-dessous. Ici, la visite permettra de guider facilement les utilisateurs à travers les cartes et de montrer quelques détails.

Conception de tableau de bord

Crédits image : Conception du tableau de bord

Création d'une bibliothèque de visites de tableaux de bord

Conditions de visite :

Une visite guidée est requise pour les éléments/cartes ci-dessous

  1. Activité de remise en forme
  2. Nouveaux cours
  3. Créer un nouveau
  4. Gain aujourd'hui
  5. Membre actif
  6. Bilan mensuel
  7. Points
  8. Payer maintenant (bouton d'action)

Maintenant, nous avons un total de 8 étapes. Dans cet exemple, je vais créer quelques étapes pour commencer, et le même schéma sera poursuivi pour le reste des cartes.

Commençons.

Étape 1 : Créer une bibliothèque de visites sur THEME.libraries.yml

Je crée une bibliothèque personnalisée pour une visite du tableau de bord, afin que nous puissions l'inclure dans la page/le modèle du tableau de bord. c'est-à-dire tableau de bord.html.twig

Bibliothèques thématiques

THÈME.bibliothèques.yml

Étape 2 : Incluez la bibliothèque de visites guidées du tableau de bord dans la page de tableau de bord personnalisée ou le modèle de nœud

 {# In a Twig template we attach the library. #}
 {{ attach_library('THEME/dashboard-tour') }}​

Maintenant, nous avons inclus les dépendances de la tournée dans notre thème.

Étape 3 : Démarrer avec Shepherd.js

Pour un démarrage rapide, vous pouvez obtenir un exemple de code ici https://shepherdjs.dev/

Initialisation de Shepherd

Dans dashboard.js, ajoutez le code d'initialisation comme ci-dessous

 const tour = new Shepherd.Tour({ defaultStepOptions: { cancelIcon: { enabled: true }, classes: 'shadow-md bg-purple-dark', scrollTo: { behavior: 'smooth', block: 'center' } }, useModalOverlay: true, });

tableau de bord.js

L'option defaultStepOptions vous permet de spécifier n'importe quelle option qui doit être appliquée à toutes les étapes de cette visite par défaut.

useModalOverlay est une autre option que vous pouvez ajouter. Vous pouvez consulter plus d'options de visite ici.

Création d'étapes d'introduction

 tour.addStep({ id: 'introduction', text: 'Welcome to Our Dashboard', classes: 'example-step-extra-class', buttons: [ { classes: 'btn btn-primary', text: 'Next', action: tour.next } ] });​

tableau de bord.js

Il s'agit d'une fenêtre contextuelle de bienvenue, nous n'attribuons donc aucune cible d'élément (comme une classe ou un identifiant). Cela apparaîtra comme un message de bienvenue au centre de la page.

Nous avons plus de méthodes de visite qui approfondiront à l'étape suivante.

Création de la deuxième étape - Activité de remise en forme

 tour.addStep( { id: 'activity', text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti.', attachTo: { element: '.class-activity', on: 'bottom' }, classes: 'example-step-extra-class', buttons: [ { action() { return this.back(); }, classes: 'btn btn-primary', text: 'Back' }, { action() { return this.next(); }, classes: 'btn btn-primary', text: 'Next' } ] });

Tour Fournit de nombreuses méthodes. Allons un peu plus loin dans quelques OPTIONS DE PAS de base

  • id : la chaîne à utiliser comme identifiant pour l'étape. Si un identifiant n'est pas passé, un sera généré.
  • text : Le texte dans le corps de l'étape. Il peut s'agir de l'un des trois types suivants :

◦ Chaîne HTML
◦ Objet HTMLElement
◦ Fonction à exécuter lors de la construction de l'étape. Il doit renvoyer l'une des deux options ci-dessus.

  • title : le titre de l'étape. Il devient un h3 en haut de la marche.
  • attachTo : l'élément auquel l'étape doit être attachée sur la page. Un objet avec un élément de propriétés et sur.

◦ élément : une chaîne de sélection d'élément ou un élément DOM.
◦ on : la direction facultative dans laquelle placer l'info-bulle Popper par rapport à l'élément.

  • Valeurs de chaîne possibles : 'auto', 'auto-start', 'auto-end', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end ', 'droite', 'début droite', 'extrémité droite', 'gauche', 'début gauche', 'extrémité gauche'
Attacher à

Si vous ne spécifiez pas un attachTo l'élément apparaîtra au milieu de l'écran.

  • cancelIcon Options pour l'icône d'annulation

◦ activé Un “✕” d'annulation doit-il apparaître dans l'en-tête de l'étape ?
◦ label L'étiquette à ajouter pour aria-label

  • classes : une chaîne de classes supplémentaires à ajouter à l'élément de contenu de l'étape.
  • boutons : un ensemble de boutons à ajouter à l'étape. Ceux-ci seront rendus dans un pied de page sous le corps du texte principal. Chaque bouton du tableau est un objet au format :

◦ text : Le texte HTML du bouton
◦ classes : classes supplémentaires à appliquer au <a>
◦ action : Une fonction exécutée lorsque le bouton est cliqué. Il est automatiquement lié à la visite à laquelle l'étape est associée, donc des choses comme this.next fonctionneront à l'intérieur de l'action.

Cette prochaine

Création de la troisième étape : nouveaux cours

Pour garder cet article court, je n'ajoute pas les étapes supplémentaires ici. Nous pouvons suivre les étapes ci-dessus pour créer autant d'étapes que nécessaire ici. Après avoir créé toutes les étapes, nous allons enfin commencer la visite.

Pour démarrer la visite, appelez simplement start sur votre instance Tour :

 tour.start();

Acclamations!! Nous avons maintenant ajouté une visite pour le tableau de bord.

Remarque : Parcourez et suivez toutes les méthodes, événements et options disponibles pour obtenir une visite plus interactive du berger.