The Tour Module - Stwórz własną wycieczkę dla niestandardowego motywu w Drupal 9

Opublikowany: 2021-09-28

Co może być lepszego niż wycieczka z przewodnikiem, gdy jesteś w nieznanym miejscu?

Doświadczenie użytkownika powoli staje się centralnym punktem każdej firmy. Oferowanie doświadczenia, które pomaga wskazać użytkownikowi właściwy kierunek poprzez interakcje w interfejsie użytkownika, może zmienić zasady gry dla każdej firmy. W tym artykule przyjrzymy się modułowi Tour dla Drupala 9. Dzięki modułowi Tour możesz nie tylko odbyć gotową wycieczkę z przewodnikiem po istniejącym widoku, ale także zintegrować moduł Tour w swoim niestandardowym motywie (który my wyjaśnię szczegółowo później).

Moduł wycieczki

Moduł wycieczki Drupal 9

Zaimplementuj moduł Drupal 9 Tour, gdy chcesz, aby Twój użytkownik skupił się bardziej na niektórych komponentach Twojej witryny, które łatwo pozostają niezauważone. Jest to również świetne, gdy chcesz przeprowadzić użytkownika przez przepływ pracy z przewodnikiem. Moduł Tour jest zawarty w rdzeniu Drupala od wersji Drupal 8.

Po włączeniu modułu oferuje on wycieczki z przewodnikiem po interfejsie witryny za pomocą podpowiedzi. Aby wziąć udział w wycieczce, możesz edytować istniejący widok w

 /admin/structure/views

i kliknij link „? Tour” w prawym górnym rogu paska narzędzi administratora. Możesz również odwiedzić

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

aby automatycznie uruchomić wycieczkę po widokach.

Zobacz ustawienie

W Drupal 8 moduł Tour jest zbudowany na wtyczce Joyride jQuery, która jest przestarzała w Drupal 9.2 z Shepherd.js.

Mamy inną metodę dodawania przewodnika po modułach i interfejsie administratora poprzez plik YML. Tutaj dodaję wycieczkę w niestandardowym motywie.

Co to jest Shepherd.js?

Shepherd to biblioteka JavaScript, która umożliwia łatwe tworzenie wycieczek z przewodnikiem po Twojej aplikacji lub witrynie. Wykorzystuje Popper.js, inną bibliotekę typu open source, do renderowania okien dialogowych dla każdego „kroku” wycieczki.

Integracja modułu Tour w niestandardowym motywie

W Drupal 9 mamy do zintegrowania wiele typów stron z treścią:

  1. Przegląd strony
  2. Wycieczka po węzłach
  3. Zobacz wycieczkę itp.

Załóżmy, że posiadasz stronę pulpitu nawigacyjnego, która ma wiele kart do wyświetlenia ze wszystkimi wykresami i wartościami, jak na poniższym obrazku. Tutaj wycieczka ułatwi poprowadzenie użytkowników przez karty i pokaże niektóre szczegóły.

Projekt deski rozdzielczej

Kredyty obrazkowe: Projekt deski rozdzielczej

Tworzenie biblioteki wycieczek w panelu

Wymagania dotyczące wycieczki:

Wycieczka z przewodnikiem wymagana dla poniższych przedmiotów / kart

  1. Aktywność fizyczna
  2. Nowe kursy
  3. Tworzyć nowe
  4. Dzisiaj zyskać
  5. Aktywny członek
  6. Przegląd miesięczny
  7. Zwrotnica
  8. Zapłać teraz (przycisk akcji)

Teraz mamy w sumie 8 kroków. W tym przykładzie stworzę kilka kroków na początek, a ten sam wzór będzie kontynuowany dla pozostałych kart.

Zaczynajmy.

Krok 1: Utwórz bibliotekę wycieczek na THEME.libraries.yml

Tworzę niestandardową bibliotekę dla wycieczki po pulpicie nawigacyjnym, abyśmy mogli uwzględnić ją na stronie/szablonie pulpitu nawigacyjnego. czyli dashboard.html.twig

Biblioteki tematyczne

THEME.biblioteki.yml

Krok 2: Dołącz bibliotekę prezentacji pulpitu nawigacyjnego do niestandardowej strony pulpitu nawigacyjnego lub szablonu węzła

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

Teraz w naszym motywie uwzględniliśmy zależności trasy.

Krok 3: Pierwsze kroki z Shepherd.js

Aby szybko rozpocząć, możesz pobrać przykładowy kod tutaj https://shepherdjs.dev/

Inicjowanie Pasterza

W dashboard.js dodaj kod inicjujący jak poniżej

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

dashboard.js

Opcja defaultStepOptions umożliwia określenie dowolnej opcji, która powinna być domyślnie zastosowana do wszystkich kroków tej wycieczki.

useModalOverlay to kolejna opcja, którą możesz dodać. Więcej opcji wycieczki możesz sprawdzić tutaj.

Tworzenie kroków wstępnych

 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

To jest wyskakujące okienko powitalne, więc nie przypisujemy żadnego elementu docelowego (takiego jak klasa lub id). Pojawi się jako wyskakujące okienko powitalne na środku strony.

Mamy więcej metod zwiedzania, które zagłębią się w następnym kroku.

Tworzenie drugiego kroku — Aktywność fizyczna

 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 Udostępnia wiele metod. Pójdźmy trochę dalej w niektórych podstawowych OPCJACH KROKU

  • id: ciąg znaków, który będzie używany jako identyfikator kroku. Jeśli identyfikator nie zostanie przekazany, zostanie on wygenerowany.
  • tekst: tekst w treści kroku. Może to być jeden z trzech typów:

◦ciąg HTML
◦Obiekt HTMLElement
◦ Funkcja do wykonania po zbudowaniu stopnia. Musi zwrócić jedną z dwóch powyższych opcji.

  • title: Tytuł kroku. Na górze stopnia staje się h3 .
  • attachTo: Element, do którego krok powinien być dołączony na stronie. Obiekt z elementem properties i włączonym.

◦ element: ciąg selektora elementu lub element DOM.
◦ on: Opcjonalny kierunek umieszczania podpowiedzi Poppera względem elementu.

  • Możliwe wartości ciągu: „auto”, „auto-start”, „auto-end”, „top”, „top-start”, „top-end”, „bottom”, „bottom-start”, „bottom-end” ', 'prawo', 'prawo-początek', 'prawo-koniec', 'lewo', 'lewo-początek', 'lewy-koniec'
Dołączyć do

Jeśli nie określisz attachTo , element pojawi się na środku ekranu.

  • cancelIcon Opcje dla ikony anulowania

◦ włączone Czy anulowanie „✕” powinno być wyświetlane w nagłówku kroku?
◦ label Etykieta do dodania do etykiety aria

  • klasy: ciąg dodatkowych klas do dodania do elementu zawartości kroku.
  • przyciski: tablica przycisków do dodania do kroku. Zostaną one wyrenderowane w stopce pod głównym tekstem. Każdy przycisk w tablicy jest obiektem formatu:

◦ tekst: tekst HTML przycisku
◦ Zajęcia: Dodatkowe zajęcia, które należy zgłosić do <a>
◦ akcja: Funkcja wykonywana po kliknięciu przycisku. Jest automatycznie powiązany z trasą , z którą powiązany jest krok, więc takie rzeczy jak ten.next będą działać wewnątrz akcji.

Ten następny

Tworzenie trzeciego kroku: nowe kursy

Aby ten artykuł był krótki, nie dodaję tutaj dalszych kroków. Możemy postępować zgodnie z powyższymi krokami, aby utworzyć tyle kroków wymaganych tutaj. Po utworzeniu wszystkich kroków w końcu rozpoczniemy zwiedzanie.

Aby rozpocząć wycieczkę, po prostu wywołaj start w swojej instancji Tour:

 tour.start();

Twoje zdrowie!! Dodaliśmy teraz wycieczkę po desce rozdzielczej.

Uwaga: Przejrzyj i postępuj zgodnie ze wszystkimi dostępnymi metodami, wydarzeniami i opcjami , aby uzyskać bardziej interaktywną wycieczkę pasterską.