<cb-multi-property-date-picker> เป็นเว็บคอมโพเนนต์สำหรับที่พักที่อยู่ภายใต้ องค์กร Cloudbeds เดียวกัน โดยจะแสดงตัวเลือกดรอปดาวน์สำหรับเลือกที่พัก ช่องเลือกวัน และปุ่มค้นหา ผู้เข้าพักสามารถเลือกที่พัก เลือกวันที่เช็กอินและวันที่เช็กเอาต์ แล้วคลิกค้นหาเพื่อไปยังเครื่องมือการจองหรือ URL ที่กำหนดเองสำหรับที่พักนั้นๆ ครับ
คอมโพเนนต์นี้ต้องการแอตทริบิวต์ sub-domain โดยค่าที่ใส่ต้องเป็นซับโดเมนขององค์กร Cloudbeds ของคุณ ไม่ใช่โดเมนเว็บไซต์ของที่พักหรือ URL เครื่องมือการจองของที่พักแต่ละแห่งครับ
ภาพรวม
โหมดหลายที่พักเหมาะสำหรับเว็บไซต์ที่ต้องแสดงตัวเลือกวันที่สำหรับที่พักหลายแห่งภายในองค์กร Cloudbeds เดียวกัน เช่น แบรนด์ กลุ่ม หรือคอลเลกชันที่พัก เหมาะกับการใช้งานใน:
- หน้าแรกขององค์กรหรือแบรนด์
- ส่วน “เลือกที่พัก” พร้อมตัวเลือกค้นหาวัน
- แลนดิ้งเพจที่แสดงรายการที่พักหลายแห่งและส่งผู้เข้าพักเข้าสู่กระบวนการจองสำหรับที่พักที่เลือก
- หน้าที่ผู้เข้าพักต้องเลือกที่พักก่อน แล้วจึงเลือกวัน
คอมโพเนนต์จะโหลดรายการที่พักขององค์กร แสดงดรอปดาวน์ที่ค้นหาได้ และหลังจากผู้เข้าพักเลือกที่พักและวันแล้ว จะพาไปยังเครื่องมือการจองแบบ Immersive Experience (หรือ URL ที่กำหนดเอง) สำหรับที่พักนั้นครับ
ก่อนเริ่มต้น
ก่อนติดตั้ง Multi-property Date Picker โปรดยืนยันดังนี้ครับ:
- ที่พักของคุณอยู่ภายใต้ องค์กร Cloudbeds เดียวกัน
- คุณมีซับโดเมนขององค์กรสำหรับ URL เครื่องมือการจองกลุ่ม
- บทบาทผู้ใช้งานของคุณมีสิทธิพิเศษในการเข้าถึงและจัดการ การตั้งค่าเครื่องมือการจอง ภายใต้ สิทธิพิเศษบทบาทผู้ใช้งาน
- แพ็กเกจของคุณรวมการเข้าถึง พรีเมียมเอ็มเบด หรือที่พักของคุณเปิดใช้งานพรีเมียมเอ็มเบดแล้ว
เคล็ดลับ: หากคุณเห็นตัวเลือก ติดต่อฝ่ายขาย ในส่วนพรีเมียมเอ็มเบด แสดงว่าแพ็กเกจของคุณอาจรวมเฉพาะเบสิกเอ็มเบดเท่านั้น ให้ใช้ตัวเลือกที่แสดงใน Cloudbeds เพื่อติดต่อฝ่ายขายเกี่ยวกับการเข้าถึงพรีเมียมเอ็มเบดครับ
สำคัญ: หากที่พักของคุณมีเพียงลิงก์เครื่องมือการจองแยกกัน เช่น hotels.cloudbeds.com/reservation/PROPERTYCODE แสดงว่ายังไม่ได้ใช้เครื่องมือการจองแบบกลุ่ม
เพื่อใช้ตัวเลือกวันที่สำหรับหลายที่พัก ที่พักต้องเชื่อมต่อภายใต้ องค์กร Cloudbeds ก่อน ติดต่อ การสนับสนุนของ Cloudbeds เพื่อขอสร้างองค์กร
เมื่อขอสร้างองค์กร กรุณาเตรียมข้อมูลดังนี้:
- ชื่อองค์กรและซับโดเมนที่ต้องการ เช่น mygroup.cloudbeds.com
- ชื่อและนามสกุลของเจ้าขององค์กร
- อีเมลของเจ้าขององค์กร
- ชื่อที่พักและรหัส MFD ของแต่ละที่พัก
หากคุณไม่ใช่เจ้าของที่พักที่ลงทะเบียนสำหรับที่พักทั้งหมด การสนับสนุนของ Cloudbeds อาจขอหลักฐานกรรมสิทธิ์เพิ่มเติมหรือหนังสือรับรองเป็นลายลักษณ์อักษรก่อนสร้างองค์กร
ขั้นตอนที่ 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"
- จัดประเภทสคริปต์ด้านล่างนี้เป็น "จำเป็น" ในแผงผู้ดูแลระบบ CMP ซึ่งอาจแตกต่างกันในแต่ละแพลตฟอร์ม
<script src="https://static1.cloudbeds.com/booking-engine/latest/static/js/immersive-experience/cb-immersive-experience.js" type="text/javascript"></script>ขั้นตอนที่ 2: เพิ่มสคริปต์ตัวเลือกวันที่ในปฏิทิน
สำหรับโหมดหลายที่พัก คุณต้องส่งซับโดเมนขององค์กรในองค์ประกอบ:
<cb-multi-property-date-picker sub-domain="YOUR_SUB_DOMAIN"></cb-multi-property-date-picker>โดยใช้เพียงซับโดเมน คอมโพเนนต์จะแสดงปุ่ม “ค้นหา” ค่าเริ่มต้น และใช้ภาษารวมถึงสกุลเงินค่าเริ่มต้นของแต่ละที่พักเมื่อมีการเลือกที่พักแล้ว
หมายเหตุ: สำหรับปฏิทินหลายที่พัก จะเลือกภาษาอังกฤษเป็นภาษาหลักและสกุลเงินดอลลาร์สหรัฐ (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 |
ไม่ | ค่าเริ่มต้นของที่พัก | รหัสภาษาสำหรับอินเตอร์เฟส (เช่น en, es) ครับ/ค่ะ |
currency |
ไม่ | ค่าเริ่มต้นของที่พัก | รหัสสกุลเงินสำหรับแสดงอัตรา เช่น 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 ที่กำหนดเอง) พร้อมที่พักที่เลือก, วันที่เช็กอิน, วันที่เช็กเอาต์, ภาษา และพารามิเตอร์อื่นๆ (เช่น โปรโมชั่น, การวิเคราะห์)
การค้นหา Subdomain ขององค์กรของคุณ
ค่าของ ซับโดเมน คือซับโดเมนขององค์กรคุณ คุณสามารถหาได้จาก URL ของเครื่องมือการจองกลุ่มของคุณ ซึ่งเป็นข้อความที่อยู่ก่อน .cloudbeds.com
ในตัวอย่างด้านล่าง URL ของเครื่องมือการจองกลุ่มคือ alona.cloudbeds.com/manage ซับโดเมนขององค์กรคือ alona
คุณจะเพิ่มลงในส่วนประกอบแบบนี้:
<cb-multi-property-date-picker sub-domain="alona"></cb-multi-property-date-picker>ซับโดเมนขององค์กร ไม่ใช่ โดเมนเว็บไซต์สาธารณะของคุณ เช่น www.examplehotel.com และไม่ใช่ลิงก์เครื่องมือการจองของที่พักแต่ละแห่ง เช่น hotels.cloudbeds.com/reservation/PROPERTYCODE
ลำดับขั้นตอนของผู้ใช้งาน
- ผู้เข้าพักเห็นตัวเลือกที่พัก, แถบวันที่ (เช็กอิน, เช็กเอาต์) และปุ่มค้นหาบนหน้าของคุณ
- ผู้เข้าพักเลือกที่พักจากดรอปดาวน์ (สามารถพิมพ์เพื่อค้นหาหรือกรองได้)
- ผู้เข้าพักคลิกที่ช่องวันที่ → ปฏิทินแบบป๊อปโอเวอร์จะเปิดขึ้น
- ผู้เข้าพักเลือกวันที่เช็กอิน → ปฏิทินจะแสดงวันที่เช็กเอาต์ที่มีให้เลือก
- ผู้เข้าพักเลือกวันที่เช็กเอาต์ → ปุ่มค้นหาจะใช้งานได้
- ผู้เข้าพักคลิกปุ่มค้นหา → จะถูกเปลี่ยนเส้นทาง (แท็บเดียวกันหรือแท็บใหม่) ไปยังเครื่องมือการจอง (หรือ 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-multi-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="โรงแรมดาวน์ทาวน์"
data-property-name-2SI0CT="รีสอร์ทริมชายหาด"
data-property-name-PROP003="ล็อดจ์บนภูเขา"
></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>การแก้ไขปัญหา
ทำไมตัวเลือกวันที่หลายที่พักจึงไม่แสดงบนเว็บไซต์ของฉัน?
หากส่วนประกอบไม่แสดง ให้ตรวจสอบดังนี้:
- สคริปต์ของ Cloudbeds ถูกติดตั้งบนหน้าเว็บหรือในส่วน
<head>ของเว็บไซต์คุณแล้ว - ส่วนประกอบไม่ได้ถูกวางไว้ภายใน iframe
- โดเมนเว็บไซต์ของคุณถูกเพิ่มในโดเมนที่อยู่ในไวต์ลิสต์ในแท็บฝัง
- ที่พักของคุณอยู่ในองค์กร Cloudbeds เดียวกัน
- ค่าของ
sub-domainตรงกับซับโดเมนขององค์กรคุณ
หากเครื่องมือสร้างเว็บไซต์ของคุณจำกัดการใช้สคริปต์หรือส่วนประกอบเว็บแบบกำหนดเอง ให้ติดต่อผู้ให้บริการเว็บไซต์หรือผู้พัฒนาเพื่อขอความช่วยเหลือในการวางโค้ดในพื้นที่โค้ดกำหนดเองที่รองรับ
ข้อคิดเห็น
โปรด ลงชื่อเข้าใช้ เพื่อแสดงข้อคิดเห็น