โมดูลทัวร์ - สร้างทัวร์ของคุณเองสำหรับธีมที่กำหนดเองใน Drupal 9

อะไรจะดีไปกว่าไกด์ทัวร์เมื่อคุณอยู่ในสถานที่ที่ไม่คุ้นเคย

ประสบการณ์ของผู้ใช้ค่อยๆ กลายเป็นจุดสนใจของทุกธุรกิจ การเสนอประสบการณ์ที่ช่วยชี้นำผู้ใช้ของคุณไปสู่ทิศทางที่ถูกต้องผ่านการโต้ตอบกับส่วนต่อประสานกับผู้ใช้สามารถเป็นตัวเปลี่ยนเกมสำหรับธุรกิจใดๆ ในบทความนี้ เราจะมาสำรวจโมดูลการทัวร์ชมสำหรับ Drupal 9 ด้วยโมดูลทัวร์ชม คุณไม่เพียงแต่สามารถชมการทัวร์ชมที่มีอยู่แล้วพร้อมไกด์ที่สร้างไว้ล่วงหน้าได้เท่านั้น คุณยังสามารถรวมโมดูลทัวร์ชมในธีมที่คุณกำหนดเองได้อีกด้วย (ซึ่งเรา จะอธิบายโดยละเอียดในภายหลัง)

โมดูลทัวร์ Drupal 9

คุณต้องการใช้งานโมดูล Drupal 9 Tour เมื่อคุณต้องการให้ผู้ใช้ของคุณให้ความสำคัญกับองค์ประกอบบางอย่างในไซต์ของคุณมากขึ้นซึ่งไม่มีใครสังเกตเห็นได้ง่าย นอกจากนี้ยังเหมาะอย่างยิ่งเมื่อคุณต้องการนำผู้ใช้ของคุณผ่านเวิร์กโฟลว์ที่มีคำแนะนำ โมดูลทัวร์รวมอยู่ในแกนหลักของ Drupal ตั้งแต่ Drupal 8

เมื่อคุณเปิดใช้งานโมดูล โมดูลนี้จะมีการแนะนำส่วนต่อประสานเว็บไซต์ด้วยความช่วยเหลือจากคำแนะนำเครื่องมือ หากต้องการทัวร์ คุณสามารถแก้ไขมุมมองที่มีอยู่ได้ที่

 /admin/structure/views

และคลิกลิงก์ "? Tour" ที่มุมขวาบนในแถบเครื่องมือผู้ดูแลระบบ นอกจากนี้คุณยังสามารถเยี่ยมชม

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

เพื่อเริ่มทัวร์ชม Views โดยอัตโนมัติ

ใน Drupal 8 โมดูล Tour ถูกสร้างขึ้นบนปลั๊กอิน Joyride jQuery ซึ่งเลิกใช้งานใน Drupal 9.2 ด้วย Shepherd.js

เรามีวิธีการอื่นในการเพิ่มทัวร์ชมสำหรับโมดูลและส่วนต่อประสานผู้ดูแลระบบผ่านไฟล์ YML ฉันกำลังเพิ่มทัวร์ชมในธีมที่กำหนดเอง

Shepherd.js คืออะไร?

Shepherd คือไลบรารี JavaScript ที่ช่วยให้คุณสร้างทัวร์แนะนำของแอปหรือเว็บไซต์ของคุณได้อย่างง่ายดาย มันใช้ประโยชน์จาก Popper.js ซึ่งเป็นไลบรารีโอเพ่นซอร์สอื่นเพื่อแสดงกล่องโต้ตอบสำหรับ "ขั้นตอน" ของทัวร์แต่ละรายการ

การรวมโมดูลทัวร์ในธีมที่กำหนดเอง

ใน Drupal 9 เรามีหน้าเนื้อหาหลายประเภทที่จะรวม:

1. ทัวร์หน้า
2. ทัวร์โหนด
3. ดูทัวร์ ฯลฯ

สมมติให้มีหน้าแดชบอร์ดซึ่งมีการ์ดหลายใบที่จะแสดงพร้อมกราฟและค่าทั้งหมดในหน้าดังภาพที่แสดงด้านล่าง ที่นี่ ทัวร์นี้จะทำให้ง่ายต่อการแนะนำผู้ใช้ผ่านการ์ดและแสดงรายละเอียดบางอย่าง

เครดิตรูปภาพ : การออกแบบแดชบอร์ด

การสร้างห้องสมุด Dashboard Tour

ข้อกำหนดทัวร์:

จำเป็นต้องมีไกด์นำเที่ยวสำหรับรายการ/การ์ดด้านล่าง

1. กิจกรรมออกกำลังกาย
2. หลักสูตรใหม่
3. สร้างใหม่
4. วันนี้ได้รับ
5. สมาชิกที่ใช้งานอยู่
6. รีวิวประจำเดือน
7. คะแนน
8. ชำระเงินทันที (ปุ่มดำเนินการ)

ตอนนี้ เรามีทั้งหมด 8 ขั้นตอน ในตัวอย่างนี้ ฉันจะสร้างขั้นตอนบางอย่างเพื่อเริ่มต้น และรูปแบบเดียวกันจะดำเนินต่อไปสำหรับการ์ดที่เหลือ

เริ่มกันเลย.

ขั้นตอนที่ 1: สร้างห้องสมุดทัวร์บน THEME.libraries.yml

ฉันกำลังสร้างไลบรารีแบบกำหนดเองสำหรับการทัวร์ชมแดชบอร์ด เพื่อให้เราสามารถรวมสิ่งนี้ไว้ในหน้าแดชบอร์ด/เทมเพลต เช่น Dashboard.html.twig

THEME.libraries.yml

ขั้นตอนที่ 2: รวมไลบรารีการทัวร์ชมแดชบอร์ดในหน้าแดชบอร์ดที่กำหนดเองหรือเทมเพลตโหนด

 {# In a Twig template we attach the library. #}

 {{ attach_library('THEME/dashboard-tour') }}​

ตอนนี้ เราได้รวมการขึ้นต่อกันของทัวร์ชมไว้ในธีมของเราแล้ว

ขั้นตอนที่ 3: เริ่มต้นใช้งาน Shepherd.js

สำหรับการเริ่มต้นอย่างรวดเร็ว คุณสามารถรับโค้ดตัวอย่างได้ที่นี่ https://shepherdjs.dev/

กำลังเริ่มต้นคนเลี้ยงแกะ

ใน Dashboard.js ให้เพิ่มโค้ดเริ่มต้นดังนี้

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

Dashboard.js

ตัวเลือก defaultStepOptions ให้คุณระบุตัวเลือกใดๆ ที่ควรนำไปใช้กับขั้นตอนทั้งหมดของทัวร์นี้โดยค่าเริ่มต้น

useModalOverlay เป็นอีกตัวเลือกหนึ่งที่คุณสามารถเพิ่มได้ คุณสามารถตรวจสอบ ตัวเลือกทัวร์ เพิ่มเติมได้ที่นี่

การสร้างขั้นตอนการแนะนำ

 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

นี่คือป๊อปอัปการทัวร์ต้อนรับ ดังนั้นเราจึงไม่ได้กำหนดเป้าหมายองค์ประกอบใดๆ (เช่น คลาสหรือรหัส) ซึ่งจะปรากฏเป็นป๊อปอัปข้อความต้อนรับตรงกลางหน้า

เรามีวิธีการทัวร์เพิ่มเติมซึ่งจะเจาะลึกในขั้นตอนต่อไป

การสร้างขั้นตอนที่สอง - กิจกรรมฟิตเนส

 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' } ] });

ทัวร์ให้บริการหลายวิธี ไปต่ออีกหน่อยใน STEP OPTIONS ขั้น พื้นฐาน

• id: สตริงที่จะใช้เป็น รหัส สำหรับขั้นตอน หากไม่ผ่าน ID จะถูกสร้างขึ้น
• text: ข้อความในเนื้อหาของขั้นตอน สามารถเป็นหนึ่งในสามประเภท:

◦ สตริง HTML
◦ HTML วัตถุองค์ประกอบ
◦ ฟังก์ชั่น ที่จะดำเนินการเมื่อสร้างขั้นตอน ต้องส่งคืนหนึ่งในสองตัวเลือกข้างต้น

• title: ชื่อ ของขั้นตอน มันจะกลายเป็น h3 ที่ด้านบนของขั้นตอน
• AttachTo: องค์ประกอบที่ขั้นตอนควรแนบไปกับหน้า ออบเจ็กต์ที่มีอิลิเมนต์คุณสมบัติและเปิดอยู่

◦ องค์ประกอบ: สตริงตัวเลือกองค์ประกอบหรือองค์ประกอบ DOM
◦ เปิด: ทิศทางทางเลือกในการวางคำแนะนำเครื่องมือ Popper ที่สัมพันธ์กับองค์ประกอบ

• ค่าสตริงที่เป็นไปได้: 'auto', 'auto-start', 'auto-end', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end ', 'ขวา', 'เริ่มต้นขวา', 'ปลายขวา', 'ซ้าย', 'เริ่มต้นซ้าย', 'ปลายซ้าย'

หากคุณไม่ระบุการ แนบ ไปยังองค์ประกอบจะปรากฏตรงกลางหน้าจอ

• cancelIcon ตัวเลือกสำหรับไอคอนยกเลิก

◦ เปิดใช้งาน การยกเลิก “✕” ควรแสดงในส่วนหัวของขั้นตอนหรือไม่?
◦ label ฉลากที่จะเพิ่มสำหรับ aria-label

• คลาส: สตริงของคลาสพิเศษเพื่อเพิ่มไปยังองค์ประกอบเนื้อหาของขั้นตอน
• ปุ่ม: อาร์เรย์ของปุ่มที่จะเพิ่มไปยังขั้นตอน สิ่งเหล่านี้จะแสดงในส่วนท้ายด้านล่างข้อความเนื้อหาหลัก แต่ละปุ่มในอาร์เรย์เป็นอ็อบเจ็กต์ของรูปแบบ:

◦ ข้อความ: ข้อความ HTML ของปุ่ม
◦ คลาส: คลาสพิเศษที่จะนำไปใช้กับ <a>
◦ การกระทำ: ฟังก์ชั่นที่ทำงานเมื่อมีการคลิกปุ่ม มันถูกผูกไว้กับ ทัวร์ชม ขั้นตอนที่เกี่ยวข้องโดยอัตโนมัติ ดังนั้นสิ่งนี้ .next จะทำงานภายในการดำเนินการ

การสร้างขั้นตอนที่สาม : หลักสูตรใหม่

เพื่อให้บทความนี้สั้น ฉันไม่ได้เพิ่มขั้นตอนเพิ่มเติมที่นี่ เราสามารถทำตามขั้นตอนข้างต้น เพื่อสร้างหลายขั้นตอนที่จำเป็นที่นี่ หลังจากสร้างขั้นตอนทั้งหมดแล้ว ในที่สุดก็จะเริ่มทัวร์

หากต้องการ เริ่ม ทัวร์ โปรดโทรไปที่อินสแตนซ์ทัวร์ของคุณ:

 tour.start();

ไชโย!! ตอนนี้เราได้เพิ่มทัวร์ชมสำหรับแดชบอร์ดแล้ว

หมายเหตุ: ทำตามและทำตาม วิธีการ กิจกรรม และ ตัวเลือก ที่มีทั้งหมดเพื่อรับ Shepherd Tour แบบอินเทอร์แอคทีฟมากขึ้น