<cb-multi-property-date-picker> เป็นคอมโพเนนต์เว็บสำหรับหลายที่พักภายในองค์กร คุณต้องใส่แอตทริบิวต์ sub-domain ที่จำเป็น คอมโพเนนต์จะแสดงตัวเลือกดรอปดาวน์สำหรับเลือกที่พัก ช่องเลือกวันที่ และปุ่มค้นหา ผู้เข้าพักจะเลือกที่พัก เลือกวันที่เช็กอินและวันที่เช็กเอาต์ จากนั้นคลิกค้นหาและจะถูกเปลี่ยนเส้นทางไปยังเครื่องมือการจอง (หรือ URL ที่กำหนดเอง) สำหรับที่พักนั้น
ภาพรวม
โหมดหลายที่พักเหมาะสำหรับการผสานรวมที่แสดง หลายที่พักภายในองค์กรเดียวกัน (เช่น แบรนด์หรือกลุ่ม) โดยทำงานได้ดีใน:
- หน้าแรกขององค์กรหรือแบรนด์
- ส่วน “เลือกที่พัก” + การค้นหาด้วยวันที่
- แลนดิ้งเพจที่แสดงรายการที่พักหลายแห่งและส่งผู้เข้าพักเข้าสู่กระบวนการจองสำหรับที่พักที่เลือก
- หน้าที่ผู้เข้าพักต้องเลือกที่พักก่อน แล้วจึงเลือกวัน
คอมโพเนนต์จะโหลดรายการที่พักขององค์กร แสดงดรอปดาวน์ที่ค้นหาได้ และหลังจากผู้เข้าพักเลือกที่พักและวันแล้ว จะเปลี่ยนเส้นทางไปยัง Immersive Experience เครื่องมือการจอง (หรือ URL ที่กำหนดเอง) สำหรับที่พักนั้น
ขั้นตอนที่ 1: เพิ่มสคริปต์ Cloudbeds
เพิ่มสคริปต์ต่อไปนี้ภายใน <head> ของเว็บไซต์ของคุณ:
หมายเหตุ: แท็กสคริปต์ทั้งหมดในขั้นตอนที่หนึ่งเหมือนกันสำหรับ Immersive Experience 2.0 และวิดเจ็ตทั้งหมด หากคุณติดตั้งไว้แล้วจากการฝังก่อนหน้า ไม่จำเป็นต้องติดตั้งซ้ำ เพียงติดตั้งครั้งเดียวใน <head> (ระดับทั่วโลก) ของเว็บไซต์
โหลดสคริปต์ใน <head> หรือก่อนคอมโพเนนต์ใน <body> เพื่อให้สคริปต์ทำงานก่อนที่แท็กคอมโพเนนต์จะถูกแยกวิเคราะห์
สำคัญ: หลีกเลี่ยงการใช้แท็กคอมโพเนนต์ Immersive Experience 2.0 ภายใน iframe
การตั้งค่านี้อาจทำให้เกิดปัญหาการเลื่อนหน้า และต้องมีการอนุญาตรายการทั้งหมดในโซ่ iframe ซึ่งเป็นการตั้งค่าที่ ไม่แนะนำ
รายการแนวทางปฏิบัติที่ดีที่สุดเมื่อผู้ใช้งานใช้ CMP:
- เพิ่ม Immersive Experience ที่จุดเริ่มต้นของ
<head>ก่อนแท็ก CMP และใส่แอตทริบิวต์ที่ป้องกันไม่ให้ถูกบล็อก ซึ่งอาจแตกต่างกันตามแพลตฟอร์ม- Cookiebot: data-cookieconsent="ignore"
- OneTrust: data-ignore-consent="true"
- Quantcast: data-quantcast-ignore="true"
- จัดประเภทสคริปต์ด้านล่างเป็น Necessary ในแผงผู้ดูแลระบบ CMP ซึ่งอาจแตกต่างกันในแต่ละแพลตฟอร์ม
<script src="https://static1.cloudbeds.com/booking-engine/latest/static/js/immersive-experience/cb-immersive-experience.js" type="text/javascript"></script>ขั้นตอนที่ 2: เพิ่มสคริปต์ตัวเลือกวันที่ปฏิทิน
สำหรับโหมดหลายที่พัก คุณต้องใส่ subdomain ขององค์กรในองค์ประกอบ:
<cb-multi-property-date-picker sub-domain="YOUR_SUB_DOMAIN"></cb-multi-property-date-picker>เมื่อระบุเพียง sub-domain คอมโพเนนต์จะแสดงปุ่ม “ค้นหา” ค่าเริ่มต้น และใช้ภาษารวมถึงสกุลเงินค่าเริ่มต้นของแต่ละที่พักเมื่อมีการเลือกที่พักแล้ว
หมายเหตุ: สำหรับปฏิทินหลายที่พัก จะตั้งค่าภาษาเป็นภาษาอังกฤษและสกุลเงินเป็นดอลลาร์สหรัฐ (USD) เป็นค่าเริ่มต้น เว้นแต่จะมีการกำหนดค่าใหม่ผ่านพารามิเตอร์ที่กำหนดเองตามที่อธิบายไว้ด้านล่าง
ไม่มีแอตทริบิวต์ custom-url แบบทั่วโลก URL ที่กำหนดเองจะตั้งค่าต่อที่พักโดยใช้ data-property-url-{code} หากที่พักใดไม่มี URL กำหนดเอง จะใช้ URL ของเครื่องมือจองที่โฮสต์เป็นค่าเริ่มต้น
แอตทริบิวต์
| แอตทริบิวต์ | จำเป็น | ค่าเริ่มต้น | คำอธิบาย |
sub-domain |
ใช่ | — | ซับโดเมนสำหรับองค์กรของคุณ โหลดและแสดงรายการที่พักขององค์กรนั้น |
button-label |
ไม่ใช่ | "ค้นหา" | ข้อความบนปุ่มค้นหา (เช่น "ตรวจสอบสถานะห้องว่าง", "ค้นหาห้องพัก") |
layout |
ไม่ใช่ | "แนวนอน" | เลย์เอาต์: horizontal (ตัวเลือกที่พัก, วัน และปุ่มเรียงในแถวเดียว) หรือ vertical (เรียงซ้อนกัน) |
open-in-new-tab |
ไม่ใช่ | "false" | กำหนดว่าจะเปิด เครื่องมือการจอง ในแท็บใหม่หรือไม่ ใช้ค่า "true" หรือ "false" เป็นสตริง |
lang |
ไม่ | ค่าเริ่มต้นของที่พัก | รหัสภาษาสำหรับอินเตอร์เฟส (e.g. en, es) |
currency |
ไม่ | ค่าเริ่มต้นของที่พัก | รหัสสกุลเงินสำหรับอัตราที่แสดง (e.g. usd, eur) |
class-name |
ไม่ | — | ชื่อคลาส CSS ที่ใช้กับคอมโพเนนต์เพื่อปรับแต่งสไตล์ |
property-order |
ไม่ | — | ลำดับของที่พักในดรอปดาวน์ รหัสแยกด้วยเครื่องหมายเซมิโคลอน เช่น "CODE1;CODE2" |
data-property-url-{code} |
ไม่ | — | URL ที่กำหนดเองสำหรับที่พัก {code} เช่น data-property-url-O2YXd0="https://example.com/downtown" |
data-property-name-{code} |
ไม่ | — | ชื่อแสดงผลที่กำหนดเองสำหรับที่พัก {code} เช่น data-property-name-O2YXd0="Downtown Hotel"
|
ส่วนประกอบสร้างอะไรขึ้นบ้าง
-
เมื่อโหลด: ตัวเลือกที่พัก (ดรอปดาวน์ค้นหาได้), ช่องวันที่เช็กอินและเช็กเอาต์ และปุ่มค้นหา (จัดเรียงแนวนอนหรือแนวตั้งตาม
เลย์เอาต์) ดรอปดาวน์จะแสดงรายชื่อที่พักทั้งหมดขององค์กร การแตะ/คลิกที่ช่องวันที่จะเปิดปฏิทินแบบป๊อปโอเวอร์ - หลังจากเลือกที่พัก: ตัวเลือกวันที่และปฏิทินจะใช้การตั้งค่าของที่พักนั้น (สถานะห้องว่าง, ข้อจำกัด, กฎวันเดียวกัน ฯลฯ)
-
เมื่อค้นหา (คลิกปุ่ม): ผู้เข้าพักจะถูกเปลี่ยนเส้นทาง (แท็บเดียวกันหรือแท็บใหม่ตาม
เปิดในแท็บใหม่) ไปยังเครื่องมือการจอง (หรือ URL ที่กำหนดเอง) พร้อมที่พักที่เลือก, วันที่เช็กอิน, วันที่เช็กเอาต์, ภาษา และพารามิเตอร์อื่น ๆ (เช่น โปรโมชั่น, การวิเคราะห์)
การหาชื่อซับโดเมนของคุณ
นี่คือซับโดเมนขององค์กรคุณ คุณสามารถหาได้โดยเข้าไปที่ CRM หรือเครื่องมือการจองกลุ่มของคุณ ชื่อซับโดเมนคือชื่อองค์กรของคุณก่อนคำว่า "cloudbeds.com" ตามที่แสดงใน URL
ลำดับขั้นตอนของผู้ใช้งาน
- ผู้เข้าพักเห็นตัวเลือกที่พัก, แถบวันที่ (เช็กอิน, เช็กเอาต์) และปุ่มค้นหาบนหน้าเว็บของคุณ
- ผู้เข้าพักเลือกที่พักจากดรอปดาวน์ (สามารถพิมพ์เพื่อค้นหาหรือกรองได้)
- ผู้เข้าพักคลิกที่ช่องวันที่ → ปฏิทินแบบป๊อปโอเวอร์จะเปิดขึ้น
- ผู้เข้าพักเลือกวันที่เช็กอิน → ปฏิทินจะแสดงวันที่เช็กเอาต์ที่มีห้องว่าง
- ผู้เข้าพักเลือกวันที่เช็กเอาต์ → ปุ่มค้นหาจะใช้งานได้
- ผู้เข้าพักคลิกปุ่มค้นหา → จะถูกเปลี่ยนเส้นทาง (แท็บเดียวกันหรือแท็บใหม่) ไปยังเครื่องมือการจอง (หรือ URL ของคุณ) สำหรับที่พักและวันที่ที่เลือก เพื่อเลือกห้องและทำการจองให้เสร็จสมบูรณ์
ฟีเจอร์สำหรับหลายที่พัก
- ดรอปดาวน์เลือกที่พักค้นหาได้: ผู้เข้าพักสามารถพิมพ์เพื่อกรองที่พักตามชื่อได้
-
ลำดับที่กำหนดเอง: ใช้
property-orderเพื่อควบคุมลำดับที่พักในดรอปดาวน์ -
ชื่อที่กำหนดเอง: ใช้
data-property-name-{code}เพื่อแสดงชื่อที่เป็นมิตรสำหรับแต่ละที่พัก -
URL ที่กำหนดเอง: ใช้
data-property-url-{code}เพื่อส่งผู้เข้าพักไปยัง URL ต่าง ๆ ตามแต่ละที่พัก -
เลย์เอาต์:
horizontal(ค่าเริ่มต้น) หรือverticalให้ตรงกับเลย์เอาต์ของหน้าเว็บคุณ - เมื่อไม่มีที่พักโหลดขึ้นมา: ส่วนประกอบยังคงแสดงผล; ดรอปดาวน์เลือกที่พักจะถูกปิดใช้งานและแสดงเคล็ดลับเครื่องมือ “ไม่พบข้อมูล” เมื่อเลื่อนเมาส์
ตัวอย่างการใช้งาน
พื้นฐาน (เฉพาะซับโดเมนองค์กร)
นี่คือซับโดเมนขององค์กรคุณ เรากำลังดำเนินการเพิ่ม ID นี้ในหน้าที่พักขององค์กรเพื่อให้เข้าถึงได้ง่ายขึ้น ในระหว่างนี้ กรุณาติดต่อฝ่ายสนับสนุนเพื่อขอรับ ID ขององค์กรได้ทันทีครับ/ค่ะ
<cb-multi-property-date-picker sub-domain="dcmcu2"></cb-property-date-picker>พร้อมแอตทริบิวต์ไม่บังคับ
<cb-multi-property-date-picker
sub-domain="dcmcu2"
button-label="ตรวจสอบสถานะห้องว่าง"
layout="vertical"
lang="es"
currency="eur"
class-name="my-multi-date-picker">
</cb-multi-property-date-picker>เปิดเครื่องมือการจองในแท็บใหม่
<cb-multi-property-date-picker
sub-domain="dcmcu2"
open-in-new-tab="true"
></cb-multi-property-date-picker>ลำดับที่พักแบบกำหนดเอง
ลำดับที่พักในดรอปดาวน์แบบกำหนดเอง โดยใช้รหัสที่พักแยกด้วยเครื่องหมายเซมิโคลอน ที่พักในรายการนี้จะแสดงก่อนตามลำดับที่ระบุ ส่วนที่พักที่เหลือจะถูกจัดเรียงตามลำดับตัวอักษร
<cb-multi-property-date-picker
sub-domain="dcmcu2"
property-order="2SI0CT;O2YXd0;PROP003"
></cb-multi-property-date-picker>ชื่อที่พักแบบกำหนดเอง
ชื่อแสดงแบบกำหนดเองสำหรับแต่ละที่พัก ใช้แอตทริบิวต์ data-property-name-{code} โดยที่ {code} คือรหัสที่พัก จะกำหนดค่าทับชื่อที่พักค่าเริ่มต้นในดรอปดาวน์
<cb-multi-property-date-picker
sub-domain="dcmcu2"
data-property-name-O2YXd0="Downtown Hotel"
data-property-name-2SI0CT="Beach Resort"
data-property-name-PROP003="Mountain Lodge"
></cb-multi-property-date-picker>เปลี่ยนเส้นทาง URL แบบกำหนดเอง
URL เปลี่ยนเส้นทางแบบกำหนดเองสำหรับแต่ละที่พัก ใช้แอตทริบิวต์ data-property-url-{code} โดยที่ {code} คือรหัสที่พัก เมื่อเลือกที่พัก หากมีแอตทริบิวต์ที่ตรงกัน URL นั้นจะถูกใช้สำหรับการเปลี่ยนเส้นทาง มิฉะนั้นจะใช้ URL เครื่องมือการจองที่โฮสต์โดยค่าเริ่มต้น
<cb-multi-property-date-picker
sub-domain="dcmcu2"
data-property-url-O2YXd0="https://example.com/downtown"
data-property-url-2SI0CT="https://example.com/beach"
></cb-multi-property-date-picker>
ข้อคิดเห็น
โปรด ลงชื่อเข้าใช้ เพื่อแสดงข้อคิดเห็น