Modul Tur - Buat Tur Anda sendiri untuk Tema Kustom di Drupal 9

Diterbitkan: 2021-09-28

Apa yang bisa lebih baik daripada tur berpemandu saat Anda berada di tempat yang asing?

Pengalaman pengguna perlahan berubah menjadi titik fokus setiap bisnis. Menawarkan pengalaman yang membantu mengarahkan pengguna Anda ke arah yang benar melalui interaksi antarmuka pengguna dapat menjadi pengubah permainan untuk bisnis apa pun. Pada artikel ini kita akan menjelajahi modul Tour untuk Drupal 9. Dengan modul Tour, Anda tidak hanya dapat mengambil tur pra-bangun terpandu dari tampilan yang ada, Anda juga dapat mengintegrasikan modul Tour dalam tema khusus Anda (yang kami akan dijelaskan secara rinci nanti).

Modul Tur

Modul Tur Drupal 9

Anda ingin mengimplementasikan modul Drupal 9 Tour ketika Anda ingin pengguna Anda lebih fokus pada komponen tertentu di situs Anda yang tidak diketahui dengan mudah. Ini juga bagus ketika Anda ingin membawa pengguna Anda melalui alur kerja yang dipandu. Modul Tour termasuk dalam inti Drupal sejak Drupal 8.

Saat Anda mengaktifkan modul, modul ini menawarkan tur terpandu dari antarmuka situs web dengan bantuan tooltips. Untuk mengikuti Tur, Anda dapat mengedit Tampilan yang ada di

 /admin/structure/views

dan klik tautan "? Tur" di sudut kanan atas di bilah alat admin. Anda juga dapat mengunjungi

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

untuk memulai tur Tampilan secara otomatis.

Lihat Pengaturan

Di Drupal 8, modul Tour dibangun di atas plugin Joyride jQuery, yang tidak digunakan lagi di Drupal 9.2 dengan Shepherd.js.

Kami memiliki metode lain untuk menambahkan tur untuk modul dan antarmuka admin melalui file YML. Di sini, saya menambahkan tur dalam tema khusus.

Apa itu Shepherd.js?

Shepherd adalah pustaka JavaScript yang memungkinkan Anda membuat tur terpandu dari aplikasi atau situs web Anda dengan mudah. Ini memanfaatkan Popper.js, perpustakaan open source lain, untuk membuat dialog untuk setiap "langkah" tur.

Mengintegrasikan modul Tur dalam Tema Kustom

Di Drupal 9, kami memiliki beberapa jenis halaman konten untuk diintegrasikan:

  1. Tur Halaman
  2. Tur Node
  3. Lihat tur dll.

Mari kita asumsikan memiliki halaman dasbor yang memiliki banyak kartu untuk ditampilkan dengan semua grafik dan nilai di dalamnya seperti pada gambar di bawah ini. Di sini, tur akan memudahkan memandu pengguna melalui kartu dan menunjukkan beberapa detail.

Desain Dasbor

Kredit gambar: Desain dasbor

Membuat Perpustakaan Tur Dasbor

Persyaratan tur:

Diperlukan tur berpemandu untuk item/kartu di bawah ini

  1. Aktivitas Kebugaran
  2. Kursus Baru
  3. Membuat baru
  4. Keuntungan hari ini
  5. Anggota aktif
  6. Ulasan bulanan
  7. Poin
  8. Bayar Sekarang (Tombol Tindakan)

Sekarang, kami memiliki total 8 Langkah. Dalam contoh ini, saya akan membuat beberapa langkah untuk memulai, dan pola yang sama akan dilanjutkan untuk kartu lainnya.

Ayo mulai.

Langkah 1: Buat perpustakaan tur di THEME.libraries.yml

Saya membuat perpustakaan khusus untuk tur dasbor, sehingga kami dapat memasukkan ini ke halaman/templat dasbor. yaitu dashboard.html.twig

Perpustakaan Tema

TEMA.libraries.yml

Langkah 2: Sertakan perpustakaan tur dasbor di halaman dasbor khusus atau templat simpul

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

Sekarang, kami telah menyertakan dependensi tur dalam tema kami.

Langkah 3: Memulai dengan Shepherd.js

Untuk memulai cepat, Anda bisa mendapatkan kode contoh di sini https://shepherdjs.dev/

Inisialisasi Shepherd

Di dashboard.js, tambahkan kode inisialisasi seperti di bawah ini

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

dashboard.js

Opsi defaultStepOptions memungkinkan Anda menentukan opsi apa pun yang harus diterapkan ke semua langkah tur ini secara default.

useModalOverlay adalah opsi lain yang dapat Anda tambahkan. Anda dapat memeriksa lebih banyak opsi Tur di sini.

Membuat Langkah Perkenalan

 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

Ini adalah popup tur selamat datang, jadi kami tidak menetapkan target elemen apa pun (seperti kelas atau id). Ini akan muncul sebagai popup pesan selamat datang di tengah halaman.

Kami memiliki lebih banyak metode tur yang akan mempelajari lebih dalam di langkah berikutnya.

Membuat Langkah kedua - Aktivitas Kebugaran

 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 Menyediakan banyak metode. Mari kita melangkah lebih jauh dalam beberapa PILIHAN LANGKAH dasar

  • id: String yang akan digunakan sebagai id untuk langkah. Jika sebuah id tidak dilewati, satu akan dibuat.
  • teks: Teks di badan langkah. Ini bisa menjadi salah satu dari tiga jenis:

string HTML
objek elemen HTML
Fungsi yang akan dieksekusi ketika langkah dibangun. Itu harus mengembalikan salah satu dari dua opsi di atas.

  • judul: Judul langkah. Ini menjadi h3 di bagian atas langkah.
  • attachTo: Elemen langkah yang harus dilampirkan pada halaman. Objek dengan elemen properti dan seterusnya.

elemen: String pemilih elemen atau elemen DOM.
on: Arah opsional untuk menempatkan tooltip Popper relatif terhadap elemen.

  • Kemungkinan nilai string: 'auto', 'auto-start', 'auto-end', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end ', 'kanan', 'mulai kanan', 'ujung kanan', 'kiri', 'mulai kiri', 'ujung kiri'
LampirkanKe

Jika Anda tidak menentukan attachTo , elemen akan muncul di tengah layar.

  • batalIkon Opsi untuk ikon batal

diaktifkan Haruskah pembatalan “✕” ditampilkan di header langkah?
label Label untuk ditambahkan ke aria-label

  • kelas: Serangkaian kelas tambahan untuk ditambahkan ke elemen konten langkah.
  • tombol: Serangkaian tombol untuk ditambahkan ke langkah. Ini akan ditampilkan di footer di bawah teks isi utama. Setiap tombol dalam array adalah objek dari format:

teks: Teks HTML tombol
kelas: Kelas tambahan untuk diterapkan ke <a>
aksi: Fungsi yang dijalankan saat tombol diklik. Itu secara otomatis terikat ke tur yang terkait dengan langkah, jadi hal-hal seperti ini. selanjutnya akan bekerja di dalam tindakan.

Ini Berikutnya

Membuat Langkah Ketiga : Kursus Baru

Untuk membuat artikel ini singkat, saya tidak menambahkan langkah lebih lanjut di sini. Kita bisa mengikuti langkah-langkah di atas, untuk membuat langkah-langkah sebanyak yang diperlukan di sini. Setelah membuat semua langkah, akhirnya kita akan memulai tur.

Untuk memulai tur, cukup panggil start pada instance Tur Anda:

 tour.start();

Bersulang!! Kami sekarang telah menambahkan tur untuk dasbor.

Catatan: Ikuti dan ikuti semua metode, acara, dan opsi yang tersedia untuk mendapatkan Tur Gembala yang lebih interaktif.