• Startseite
  • Artikel
  • SEO
  • Das Tour-Modul - Erstellen Sie Ihre eigene Tour für ein benutzerdefiniertes Thema in Drupal 9

Das Tour-Modul - Erstellen Sie Ihre eigene Tour für ein benutzerdefiniertes Thema in Drupal 9

Veröffentlicht: 2021-09-28

Was gibt es Schöneres als eine geführte Tour, wenn Sie an einem unbekannten Ort sind?

Die Benutzererfahrung wird langsam zum Mittelpunkt jedes Unternehmens. Das Anbieten einer Erfahrung, die Ihren Benutzern durch Interaktionen auf der Benutzeroberfläche hilft, die richtige Richtung zu weisen, kann für jedes Unternehmen von entscheidender Bedeutung sein. In diesem Artikel werden wir das Tour-Modul für Drupal 9 untersuchen. Mit dem Tour-Modul können Sie nicht nur eine geführte, vorgefertigte Tour durch eine vorhandene Ansicht machen, Sie können das Tour-Modul auch in Ihr benutzerdefiniertes Design integrieren (das wir wird später ausführlich erklärt).

Tour-Modul

Das Drupal 9 Tour-Modul

Sie möchten das Drupal 9 Tour-Modul implementieren, wenn Sie möchten, dass sich Ihre Benutzer mehr auf bestimmte Komponenten auf Ihrer Website konzentrieren, die leicht unbemerkt bleiben. Es ist auch großartig, wenn Sie Ihren Benutzer durch einen geführten Workflow führen möchten. Das Tour-Modul ist seit Drupal 8 im Drupal-Kern enthalten.

Wenn Sie das Modul aktivieren, bietet es Führungen durch die Website-Oberfläche mit Hilfe von Tooltips an. Um an einer Tour teilzunehmen, können Sie eine vorhandene Ansicht unter bearbeiten

 /admin/structure/views

und klicken Sie auf den "? Tour"-Link in der oberen rechten Ecke in der Admin-Toolbar. Sie können auch besuchen

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

um die Views-Tour automatisch zu starten.

Ansichtseinstellung

In Drupal 8 basiert das Tour-Modul auf dem Joyride jQuery-Plugin, das in Drupal 9.2 mit Shepherd.js veraltet ist.

Wir haben eine andere Methode, um eine Tour für Module und die Verwaltungsschnittstelle über die YML-Datei hinzuzufügen. Hier füge ich eine Tour in einem benutzerdefinierten Thema hinzu.

Was ist Shepherd.js?

Shepherd ist eine JavaScript-Bibliothek, mit der Sie auf einfache Weise Führungen durch Ihre App oder Website erstellen können. Es nutzt Popper.js, eine weitere Open-Source-Bibliothek, um Dialoge für jeden "Schritt" der Tour zu rendern.

Integrieren des Tour-Moduls in ein benutzerdefiniertes Design

In Drupal 9 müssen wir mehrere Arten von Inhaltsseiten integrieren:

  1. Seitentour
  2. Knotentour
  3. Besichtigung ansehen usw.

Gehen wir davon aus, dass Sie eine Dashboard-Seite haben, die mehrere Karten mit allen Grafiken und Werten enthält, wie in der Abbildung unten gezeigt. Hier wird die Tour es einfach machen, Benutzer durch die Karten zu führen und einige Details zu zeigen.

Dashboard-Design

Bildnachweis: Dashboard-Design

Erstellen einer Dashboard-Tour-Bibliothek

Touranforderungen:

Für die folgenden Artikel/Karten ist eine geführte Tour erforderlich

  1. Fitness-Aktivität
  2. Neue Kurse
  3. Erstelle neu
  4. Heute gewinnen
  5. Aktives Mitglied
  6. Monatlicher Rückblick
  7. Punkte
  8. Jetzt bezahlen (Aktionsschaltfläche)

Jetzt haben wir insgesamt 8 Schritte. In diesem Beispiel werde ich zunächst einige Schritte erstellen, und das gleiche Muster wird für den Rest der Karten fortgesetzt.

Lasst uns beginnen.

Schritt 1: Erstellen Sie eine Tourbibliothek auf THEME.libraries.yml

Ich erstelle eine benutzerdefinierte Bibliothek für eine Dashboard-Tour, damit wir diese in die Dashboard-Seite/Vorlage aufnehmen können. dh dashboard.html.twig

Themenbibliotheken

THEMA.libraries.yml

Schritt 2: Binden Sie die Dashboard-Tour-Bibliothek in die benutzerdefinierte Dashboard-Seite oder Knotenvorlage ein

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

Jetzt haben wir die Tour-Abhängigkeiten in unser Thema aufgenommen.

Schritt 3: Erste Schritte mit Shepherd.js

Für einen schnellen Einstieg erhalten Sie hier einen Beispielcode https://shepherdjs.dev/

Shepherd wird initialisiert

Fügen Sie in dashboard.js den Initialisierungscode wie unten hinzu

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

Dashboard.js

Mit der Option defaultStepOptions können Sie eine beliebige Option angeben, die standardmäßig auf alle Schritte dieser Tour angewendet werden soll.

useModalOverlay ist eine weitere Option, die Sie hinzufügen können. Weitere Touroptionen finden Sie hier.

Einführungsschritte erstellen

 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

Dies ist ein Willkommens-Tour-Popup, daher weisen wir kein Elementziel (wie eine Klasse oder ID) zu. Dies wird als Willkommensnachricht-Popup in der Mitte der Seite angezeigt.

Wir haben weitere Tourmethoden, die im nächsten Schritt tiefer gehen werden.

Erstellen des zweiten Schritts - Fitness-Aktivität

 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 Bietet viele Methoden. Lassen Sie uns bei einigen grundlegenden SCHRITTOPTIONEN noch etwas weiter gehen

  • id: Die Zeichenfolge, die als ID für den Schritt verwendet werden soll. Wenn keine ID übergeben wird, wird eine generiert.
  • text: Der Text im Hauptteil des Schritts. Es kann einer von drei Typen sein:

◦ HTML-String
◦ HTMLElement- Objekt
◦ Funktion , die ausgeführt werden soll, wenn der Schritt erstellt wird. Es muss eine der beiden oben genannten Optionen zurückgegeben werden.

  • title: Der Titel des Schrittes. Es wird zu einem h3 am oberen Ende der Stufe.
  • AttachTo: Das Element, an das der Schritt auf der Seite angehängt werden soll. Ein Objekt mit Eigenschaftenelement und an.

◦ element: Eine Elementauswahlzeichenfolge oder ein DOM-Element.
◦ on: Die optionale Richtung, um den Popper-Tooltip relativ zum Element zu platzieren.

  • Mögliche Stringwerte: 'auto', 'auto-start', 'auto-end', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end' ', 'rechts', 'rechts-anfang', 'rechts-ende', 'links', 'links-anfang', 'links-ende'
Anhängen an

Wenn Sie kein AttachTo angeben, wird das Element in der Mitte des Bildschirms angezeigt.

  • cancelIcon Optionen für das Abbruchsymbol

◦ aktiviert Soll in der Kopfzeile des Schritts ein Abbruch „✕“ angezeigt werden?
◦ label Das Label, das für aria-label hinzugefügt werden soll

  • Klassen: Eine Zeichenfolge zusätzlicher Klassen, die dem Inhaltselement des Schritts hinzugefügt werden sollen.
  • buttons: Ein Array von Buttons, die dem Schritt hinzugefügt werden. Diese werden in einer Fußzeile unter dem Haupttext gerendert. Jede Schaltfläche im Array ist ein Objekt des Formats:

◦ Text: Der HTML-Text der Schaltfläche
◦ Klassen: Zusätzliche Klassen für das <a>
◦ Aktion: Eine Funktion, die ausgeführt wird, wenn auf die Schaltfläche geklickt wird. Es ist automatisch an die Tour gebunden, der der Schritt zugeordnet ist, sodass Dinge wie this.next innerhalb der Aktion funktionieren.

Dies als nächstes

Erstellen des dritten Schritts: Neue Kurse

Um diesen Artikel kurz zu halten, füge ich die weiteren Schritte hier nicht hinzu. Wir können den obigen Schritten folgen, um so viele Schritte wie hier erforderlich zu erstellen. Nachdem wir alle Schritte erstellt haben, starten wir endlich die Tour.

Um die Tour zu starten, rufen Sie einfach start in Ihrer Tour-Instanz auf:

 tour.start();

Prost!! Wir haben jetzt eine Tour für das Dashboard hinzugefügt.

Hinweis: Gehen Sie alle verfügbaren Methoden, Veranstaltungen und Optionen durch und befolgen Sie sie, um eine interaktivere Shepherd Tour zu erhalten.