Il modulo Tour - Crea il tuo tour per un tema personalizzato in Drupal 9

Cosa c'è di meglio di una visita guidata quando ci si trova in un luogo sconosciuto?

L'esperienza utente si sta lentamente trasformando nel punto focale di ogni azienda. Offrire un'esperienza che aiuti a indirizzare l'utente nella giusta direzione attraverso le interazioni dell'interfaccia utente può essere un punto di svolta per qualsiasi azienda. In questo articolo esploreremo il modulo Tour per Drupal 9. Con il modulo Tour, non solo puoi fare un tour guidato predefinito di una vista esistente, puoi anche integrare il modulo Tour nel tuo tema personalizzato (che noi spiegherò in dettaglio più avanti).

Il modulo Tour Drupal 9

Vorresti implementare il modulo Drupal 9 Tour quando desideri che il tuo utente si concentri maggiormente su determinati componenti del tuo sito che passano facilmente inosservati. È anche ottimo quando vuoi portare il tuo utente attraverso un flusso di lavoro guidato. Il modulo Tour è incluso nel core di Drupal da Drupal 8.

Quando abiliti il ​​modulo offre visite guidate dell'interfaccia del sito Web con l'aiuto di suggerimenti. Per partecipare a un tour, puoi modificare una vista esistente su

 /admin/structure/views

e fai clic sul collegamento "? Tour" nell'angolo in alto a destra nella barra degli strumenti di amministrazione. Puoi anche visitare

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

per avviare automaticamente il tour Views.

In Drupal 8, il modulo Tour è basato sul plugin Joyride jQuery, che è deprecato in Drupal 9.2 con Shepherd.js.

Abbiamo un altro metodo per aggiungere un tour per i moduli e l'interfaccia di amministrazione tramite il file YML. Qui, sto aggiungendo un tour in un tema personalizzato.

Cos'è Shepherd.js?

Shepherd è una libreria JavaScript che ti consente di creare facilmente visite guidate della tua app o del tuo sito web. Sfrutta Popper.js, un'altra libreria open source, per eseguire il rendering delle finestre di dialogo per ogni "passo" del tour.

Integrazione del modulo Tour in un tema personalizzato

In Drupal 9 abbiamo più tipi di pagine di contenuto da integrare:

1. Giro di pagina
2. Giro del nodo
3. Visualizza tour ecc.

Supponiamo di avere una pagina dashboard che ha più schede da mostrare con tutti i grafici e i valori come nell'immagine mostrata di seguito. Qui, il tour renderà facile guidare gli utenti attraverso le schede e mostrare alcuni dettagli.

Crediti immagine: design del cruscotto

Creazione di una libreria di tour del dashboard

Requisiti del tour:

È richiesta una visita guidata per gli articoli/carte sottostanti

1. Attività di fitness
2. Nuovi Corsi
3. Creare nuovo
4. Oggi Guadagno
5. Membro attivo
6. Revisione mensile
7. Punti
8. Paga ora (pulsante di azione)

Ora abbiamo un totale di 8 passaggi. In questo esempio creerò alcuni passaggi per iniziare e lo stesso schema verrà continuato per il resto delle carte.

Iniziamo.

Passaggio 1: crea una libreria di tour su THEME.libraries.yml

Sto creando una libreria personalizzata per un tour del dashboard, in modo da poterlo includere nella pagina/modello del dashboard. cioè dashboard.html.twig

TEMA.librerie.yml

Passaggio 2: includi la libreria del tour del dashboard nella pagina del dashboard personalizzata o nel modello di nodo

 {# In a Twig template we attach the library. #}

 {{ attach_library('THEME/dashboard-tour') }}​

Ora, abbiamo incluso le dipendenze del tour nel nostro tema.

Passaggio 3: iniziare con Shepherd.js

Per iniziare rapidamente, puoi ottenere un codice di esempio qui https://shepherdjs.dev/

Inizializzazione Pastore

In dashboard.js, aggiungi il codice di inizializzazione come di seguito

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

dashboard.js

L'opzione defaultStepOptions ti consente di specificare qualsiasi opzione che dovrebbe essere applicata a tutti i passaggi di questo tour per impostazione predefinita.

useModalOverlay è un'altra opzione che puoi aggiungere. Puoi controllare più opzioni del tour qui.

Creazione di passaggi introduttivi

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

dashboard.js

Questo è un popup del tour di benvenuto, quindi non stiamo assegnando alcun elemento target (come una classe o un id). Questo apparirà come un messaggio di benvenuto popup al centro della pagina.

Abbiamo più metodi di tour che approfondiranno nel passaggio successivo.

Creazione del secondo passaggio: attività di fitness

 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 Fornisce molti metodi. Andiamo un po' oltre in alcune OPZIONI STEP di base

• id: la stringa da utilizzare come ID per il passaggio. Se un ID non viene passato, ne verrà generato uno.
• testo: il testo nel corpo del passaggio. Può essere di tre tipi:

◦ Stringa HTML
◦ Oggetto HTMLElement
◦ Funzione da eseguire in fase di costruzione del passo. Deve restituire una delle due opzioni precedenti.

• title: il titolo del passaggio. Diventa un h3 in cima al gradino.
• attachTo: l'elemento a cui il passaggio deve essere collegato nella pagina. Un oggetto con un elemento delle proprietà e via.

◦ elemento: una stringa di selezione dell'elemento o un elemento DOM.
◦ on: la direzione facoltativa per posizionare la descrizione comando Popper relativa all'elemento.

• Possibili valori di stringa: 'auto', 'auto-start', 'auto-end', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end ', 'destra', 'inizio-destra', 'fine-destra', 'sinistra', 'inizio-sinistra', 'fine-sinistra'

Se non specifichi un attachTo , l'elemento apparirà al centro dello schermo.

• cancelIcon Opzioni per l'icona di annullamento

◦ abilitato Dovrebbe essere visualizzato un "✕" di annullamento nell'intestazione del passaggio?
◦ label L'etichetta da aggiungere per aria-label

• classi: una stringa di classi extra da aggiungere all'elemento di contenuto del passaggio.
• pulsanti: una serie di pulsanti da aggiungere al passaggio. Questi verranno visualizzati in un piè di pagina sotto il testo del corpo principale. Ogni pulsante nell'array è un oggetto del formato:

◦ testo: il testo HTML del pulsante
◦ classi: classi extra da applicare alla <a>
◦ azione: una funzione eseguita quando si fa clic sul pulsante. È automaticamente associato al tour a cui è associato il passaggio, quindi cose come this.next funzioneranno all'interno dell'azione.

Creazione del terzo passaggio: nuovi corsi

Per mantenere questo articolo breve, non sto aggiungendo gli ulteriori passaggi qui. Possiamo seguire i passaggi precedenti, per creare tutti i passaggi richiesti qui. Dopo aver creato tutti i passaggi, inizieremo finalmente il tour.

Per iniziare il tour, chiama start sulla tua istanza Tour:

 tour.start();

Saluti!! Ora abbiamo aggiunto un tour per la dashboard.

Nota: esamina e segui tutti i metodi, gli eventi e le opzioni disponibili per ottenere uno Shepherd Tour più interattivo.