Modulul Tur - Creează-ți propriul tur pentru o temă personalizată în Drupal 9

Publicat: 2021-09-28

Ce poate fi mai bun decât un tur ghidat atunci când vă aflați într-un loc necunoscut?

Experiența utilizatorului se transformă încet în punctul focal al fiecărei afaceri. Oferirea unei experiențe care vă ajută să vă îndrepte utilizatorul în direcția corectă prin interacțiunile cu interfața utilizatorului poate schimba jocul pentru orice afacere. În acest articol vom explora modulul Tur pentru Drupal 9. Cu modulul Tur, nu puteți doar să faceți un tur ghidat pre-construit al unei vizualizări existente, ci și să integrați modulul Tur în tema dvs. personalizată (pe care am va explica în detaliu mai târziu).

Modul Tur

Modulul Drupal 9 Tur

Ați dori să implementați modulul Drupal 9 Tour atunci când doriți ca utilizatorul să se concentreze mai mult pe anumite componente de pe site-ul dvs. care trec ușor neobservate. De asemenea, este grozav atunci când doriți să vă conduceți utilizatorul printr-un flux de lucru ghidat. Modulul Tur este inclus în nucleul Drupal începând cu Drupal 8.

Când activați modulul, acesta oferă tururi ghidate ale interfeței site-ului web cu ajutorul unor sfaturi cu instrumente. Pentru a face un tur, puteți edita o vizualizare existentă la

 /admin/structure/views

și faceți clic pe linkul „? Tur” din colțul din dreapta sus în bara de instrumente de administrare. De asemenea, puteți vizita

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

pentru a porni automat turul Vizualizări.

Vizualizare setare

În Drupal 8, modulul Tour este construit pe pluginul Joyride jQuery, care este depreciat în Drupal 9.2 cu Shepherd.js.

Avem o altă metodă de a adăuga un tur pentru module și interfață de administrare prin fișierul YML. Aici, adaug un tur într-o temă personalizată.

Ce este Shepherd.js?

Shepherd este o bibliotecă JavaScript care vă permite să creați cu ușurință tururi ghidate ale aplicației sau ale site-ului dvs. web. Utilizează Popper.js, o altă bibliotecă open source, pentru a reda dialogurile pentru fiecare „etapă” a turului.

Integrarea modulului Tur într-o temă personalizată

În Drupal 9, avem mai multe tipuri de pagini de conținut de integrat:

  1. Turul paginii
  2. Turul nodului
  3. Vezi turul etc.

Să presupunem că avem o pagină de tablou de bord care are mai multe carduri de afișat cu toate graficele și valorile din ea, ca în imaginea de mai jos. Aici, turul va ușura ghidarea utilizatorilor prin carduri și afișarea unor detalii.

Design tablou de bord

Credite imagine: design tablou de bord

Crearea unei biblioteci de tur de tablou de bord

Cerințe pentru tur:

Este necesar un tur ghidat pentru articolele/cardurile de mai jos

  1. Activitate de fitness
  2. Cursuri noi
  3. Creaza nou
  4. Azi Câștigă
  5. Membru activ
  6. Revizuire lunară
  7. Puncte
  8. Plătiți acum (butonul de acțiune)

Acum avem un total de 8 pași. În acest exemplu, voi crea câțiva pași pentru a începe, iar același model va fi continuat pentru restul cărților.

Să începem.

Pasul 1: Creați o bibliotecă de tur pe THEME.libraries.yml

Creez o bibliotecă personalizată pentru un tur al tabloului de bord, astfel încât să putem include aceasta în pagina/șablonul tabloului de bord. adică dashboard.html.twig

Biblioteci tematice

THEME.biblioteci.yml

Pasul 2: Includeți biblioteca de tur al tabloului de bord în pagina personalizată a tabloului de bord sau în șablonul de nod

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

Acum, am inclus dependențele turului în tema noastră.

Pasul 3: Începeți cu Shepherd.js

Pentru un început rapid, puteți obține un exemplu de cod aici https://shepherdjs.dev/

Inițializarea Shepherd

În dashboard.js, adăugați codul de inițializare ca mai jos

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

dashboard.js

Opțiunea defaultStepOptions vă permite să specificați orice opțiune care ar trebui aplicată tuturor pașilor acestui tur în mod implicit.

useModalOverlay este o altă opțiune pe care o puteți adăuga. Puteți verifica mai multe opțiuni de tur aici.

Crearea pașilor introductivi

 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

Acesta este un pop-up de tur binevenit, așa că nu atribuim niciun element țintă (cum ar fi o clasă sau un id). Acesta va apărea ca un mesaj pop-up de bun venit în centrul paginii.

Avem mai multe metode de tur care vor aprofunda în următorul pas.

Crearea celui de-al doilea pas - Activitate de 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' } ] });

Tur Oferă multe metode. Să mergem puțin mai departe în câteva OPȚIUNI DE PASI de bază

  • id: șirul de folosit ca id pentru pas. Dacă nu este transmis un ID, va fi generat unul.
  • text: textul din corpul pasului. Poate fi unul din trei tipuri:

◦ șir HTML
◦ obiect HTMLElement
◦ Funcție care trebuie executată când pasul este construit. Trebuie să returneze una dintre cele două opțiuni de mai sus.

  • titlu: titlul pasului. Devine un h3 în vârful treptei.
  • attachTo: elementul la care trebuie atașat pasul pe pagină. Un obiect cu element de proprietăți și activat.

◦ element: un șir selector de elemente sau un element DOM.
◦ on: Direcția opțională de plasare a indicației Popper în raport cu elementul.

  • Valori de șir posibile: „auto”, „auto-start”, „auto-end”, „top”, „top-start”, „top-end”, „bottom”, „bottom-start”, „bottom-end” „, „dreapta”, „început-dreapta”, „sfârșitul din dreapta”, „sfârșitul din stânga”, „începutul stânga”, „sfârșitul din stânga”
Atașează la

Dacă nu specificați o atașare , elementul va apărea în mijlocul ecranului.

  • cancelIcon Opțiuni pentru pictograma de anulare

◦ activat Ar trebui să fie afișat un „✕” de anulare în antetul pasului?
◦ label Eticheta de adăugat pentru aria-label

  • clase: un șir de clase suplimentare de adăugat la elementul de conținut al pasului.
  • butoane: o serie de butoane de adăugat la pas. Acestea vor fi redate într-un subsol sub textul corpului principal. Fiecare buton din matrice este un obiect de formatul:

◦ text: textul HTML al butonului
◦ clase: clase suplimentare de aplicat la <a>
◦ acțiune: O funcție executată atunci când se face clic pe butonul. Este legat automat de turul cu care este asociat pasul, așa că lucruri ca acesta.next vor funcționa în cadrul acțiunii.

Acest Următorul

Crearea celui de-al treilea pas: cursuri noi

Pentru a face acest articol scurt, nu adaug pașii suplimentari aici. Putem urma pașii de mai sus, pentru a crea cât mai mulți pași necesari aici. După ce am creat toți pașii, vom începe în sfârșit turul.

Pentru a începe turul, trebuie doar să sunați la start pe instanța dvs. de tur:

 tour.start();

Noroc!! Am adăugat acum un tur pentru tabloul de bord.

Notă: parcurgeți și urmați toate metodele, evenimentele și opțiunile disponibile pentru a obține un tur al ciobanului mai interactiv.