• Anasayfa
  • Nesne
  • SEO
  • Tur Modülü - Drupal 9'da Özel Bir Tema için kendi Turunuzu oluşturun

Tur Modülü - Drupal 9'da Özel Bir Tema için kendi Turunuzu oluşturun

Yayınlanan: 2021-09-28

Bilmediğiniz bir yerdeyken rehberli bir turdan daha iyi ne olabilir?

Kullanıcı deneyimi yavaş yavaş her işletmenin odak noktası haline geliyor. Kullanıcı arabirimi etkileşimleri aracılığıyla kullanıcınızı doğru yöne yönlendirmeye yardımcı olan bir deneyim sunmak, herhangi bir işletme için oyunun kurallarını değiştirebilir. Bu yazıda Drupal 9 için Tur modülünü keşfedeceğiz. Tur modülü ile, sadece mevcut bir görünümde önceden oluşturulmuş rehberli bir tur atmakla kalmaz, aynı zamanda Tur modülünü özel temanıza da entegre edebilirsiniz. daha sonra ayrıntılı olarak açıklanacaktır).

Tur Modülü

Drupal 9 Tur Modülü

Kullanıcınızın sitenizde kolayca fark edilmeyen belirli bileşenlere daha fazla odaklanmasını istediğinizde Drupal 9 Tour modülünü uygulamak istersiniz. Kullanıcınızı rehberli bir iş akışından geçirmek istediğinizde de harikadır. Tur modülü, Drupal 8'den beri Drupal çekirdeğine dahil edilmiştir.

Modülü etkinleştirdiğinizde, araç ipuçlarının yardımıyla web sitesi arayüzünde rehberli turlar sunar. Bir Tura katılmak için mevcut bir Görünümü şurada düzenleyebilirsiniz:

 /admin/structure/views

ve yönetici araç çubuğunun sağ üst köşesindeki "? Tur" bağlantısını tıklayın. Ayrıca ziyaret edebilirsiniz

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

Görünümler turunu otomatik olarak başlatmak için

Ayarı Görüntüle

Drupal 8'de, Tur modülü, Drupal 9.2'de Shepherd.js ile kullanımdan kaldırılan Joyride jQuery eklentisi üzerine kurulmuştur.

YML dosyası üzerinden modüller ve yönetici arayüzü için bir tur eklemek için başka bir yöntemimiz var. Burada, özel bir temada bir tur ekliyorum.

Shepherd.js nedir?

Shepherd, uygulamanız veya web siteniz için kolayca rehberli turlar oluşturmanıza olanak tanıyan bir JavaScript kitaplığıdır. Her tur "adımı" için diyaloglar oluşturmak için başka bir açık kaynak kitaplığı olan Popper.js'den yararlanır.

Tur modülünü Özel Temaya Entegre Etme

Drupal 9'da, entegre edilecek birden çok içerik sayfamız var:

  1. Sayfa Turu
  2. Düğüm Turu
  3. Turu görüntüle vb.

Aşağıda gösterilen resimde olduğu gibi, içindeki tüm grafikler ve değerlerle birlikte gösterilecek birden fazla kartı olan bir gösterge panosu sayfasına sahip olduğumuzu varsayalım. Burada tur, kullanıcılara kartlar arasında rehberlik etmeyi ve bazı detayları göstermeyi kolaylaştıracak.

Pano Tasarımı

Resim kredisi : Pano tasarımı

Pano Tur Kitaplığı Oluşturma

Tur gereksinimleri:

Aşağıdaki öğeler/kartlar için rehberli bir tur gereklidir

  1. Fitness Aktivitesi
  2. Yeni Kurslar
  3. Yeni oluşturmak
  4. Bugün Kazanç
  5. Aktif üye
  6. Aylık inceleme
  7. Puan
  8. Şimdi Öde (İşlem Düğmesi)

Şimdi, toplam 8 Adımımız var. Bu örnekte, başlamak için bazı adımlar oluşturacağım ve geri kalan kartlar için aynı desen devam edecek.

Hadi başlayalım.

Adım 1: THEME.libraries.yml üzerinde bir tur kitaplığı oluşturun

Bunu pano sayfasına/şablona dahil edebilmemiz için bir pano turu için özel bir kitaplık oluşturuyorum. yani, dashboard.html.twig

Tema Kitaplıkları

THEME.libraries.yml

2. Adım: Pano tur kitaplığını özel pano sayfasına veya düğüm şablonuna dahil edin

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

Artık tur bağımlılıklarını temamıza ekledik.

3. Adım: Shepherd.js'yi kullanmaya başlama

Hızlı bir başlangıç ​​için buradan örnek bir kod alabilirsiniz https://shepherdjs.dev/

Shepherd başlatılıyor

Dashboard.js'de, başlatma kodunu aşağıdaki gibi ekleyin

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

pano.js

defaultStepOptions seçeneği, varsayılan olarak bu turun tüm adımlarına uygulanması gereken herhangi bir seçeneği belirlemenize izin verir.

useModalOverlay ekleyebileceğiniz başka bir seçenektir. Daha fazla Tur seçeneğini buradan kontrol edebilirsiniz.

Giriş Adımları Oluşturma

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

pano.js

Bu bir karşılama turu açılır penceresidir, bu nedenle herhangi bir öğe hedefi (sınıf veya kimlik gibi) atmıyoruz. Bu, sayfanın ortasında bir karşılama mesajı açılır penceresi olarak görünecektir.

Bir sonraki adımda daha derine inecek daha fazla tur yöntemimiz var.

İkinci Adımı Oluşturma - Fitness Aktivitesi

 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 birçok yöntem sunar. Bazı temel ADIM SEÇENEKLERİ'nde biraz daha ileri gidelim

  • id: Adımın kimliği olarak kullanılacak dize. Bir kimlik iletilmezse bir oluşturulur.
  • metin: Adımın gövdesindeki metin. Üç türden biri olabilir:

◦ HTML dizesi
◦ HTMLElement nesnesi
◦ Adım oluşturulduğunda yürütülecek işlev . Yukarıdaki iki seçenekten birini döndürmelidir.

  • başlık: Adımın başlığı. Adımın başında h3 olur.
  • ataşman: Sayfada adımın ekleneceği öğe. Özellikler öğesi ve açık olan bir nesne.

◦ öğe: Bir öğe seçici dizesi veya bir DOM öğesi.
◦ açık: Popper araç ipucunu öğeye göre yerleştirmek için isteğe bağlı yön.

  • Olası dize değerleri: 'auto', 'auto-start', 'auto-end', 'top', 'top-start', 'üst-end', 'alt', 'alt-start', 'alt-end' ', 'sağ', 'sağdan başlangıç', 'sağdan uç', 'sol', 'soldan başlangıç', 'sol uç'
Eklemek

Bir ek belirtmezseniz , öğe ekranın ortasında görünecektir.

  • CancelIcon İptal simgesi için seçenekler

◦ etkin Adımın başlığında bir iptal “✕” gösterilmeli mi?
◦ etiket Aria etiketi için eklenecek etiket

  • sınıflar: Adımın içerik öğesine eklenecek fazladan sınıflar dizisi.
  • düğmeler: Adıma eklenecek bir dizi düğme. Bunlar, ana gövde metninin altındaki bir altbilgide gösterilecektir. Dizideki her düğme şu biçimde bir nesnedir:

◦ metin: Düğmenin HTML metni
◦ sınıflar: <a> sınıfına uygulanacak ek sınıflar
◦ eylem: Düğmeye tıklandığında yürütülen bir işlev. Adımın ilişkilendirildiği tura otomatik olarak bağlanır, bu nedenle this.next gibi şeyler eylemin içinde çalışır.

Bu Sonraki

Üçüncü Adımın Oluşturulması: Yeni Dersler

Bu makaleyi kısa tutmak için, buraya daha fazla adım eklemiyorum. Burada gereken sayıda adım oluşturmak için yukarıdaki adımları takip edebiliriz. Tüm adımları oluşturduktan sonra nihayet tura başlayacağız.

Turu başlatmak için Tur örneğinizde start'ı aramanız yeterlidir:

 tour.start();

Şerefe!! Şimdi kontrol paneli için bir tur ekledik.

Not: Daha etkileşimli bir Çoban Turu elde etmek için mevcut tüm yöntemleri, etkinlikleri ve seçenekleri gözden geçirin ve izleyin.