กริด

กริดคือการแสดงรายการซัพพลายเออร์และสินค้าคงคลัง พร้อมแสดงรายละเอียดผ่าน UI กริดที่โต้ตอบและจองได้
กริดรองรับการแสดงสินค้าคงคลังใด ๆ จากรายการที่คัดสรรหรือการค้นหาที่บันทึกไว้ของคุณ
ผู้ใช้โต้ตอบกับกริดในลักษณะเดียวกับที่โต้ตอบกับ การ์ด แต่มีฟีเจอร์เพิ่มเติมหนึ่งอย่าง:

เลื่อนดูกริดโดยคลิกปุ่ม แสดงเพิ่มเติม (เมื่อมีรายการเพิ่มเติม)

ด้านบนคือตัวอย่างกริดของเราที่แสดงรายการการ์ดประเภทห้องพัก

ส่วนที่เหลือของบทความนี้จะแนะนำวิธีสร้าง ปรับแต่ง และเผยแพร่กริดให้ผู้ใช้ของคุณ

ประเภทกริด

มีกริดสามประเภท:

กริดที่สร้างจาก รายการที่คัดสรร
กริดที่สร้างจาก การค้นหาที่บันทึกไว้
กริดที่สร้างจากตำแหน่งและเกณฑ์การจัดเรียง (เช่น กริดจัดอันดับ)

กริดจากรายการที่คัดสรร

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

สร้าง

ไปที่ Inventory > Curated Lists จากแถบนำทางหลัก สำหรับตัวอย่างนี้ เราจะใช้รายการ Favorites ของคุณ
หากคุณยังไม่ได้เพิ่มอะไรใน Favorites ให้ไปที่ Search เพื่อเรียนรู้วิธีการ

คลิกปุ่ม Actions บนรายการ Favorites
คลิกปุ่ม Create a grid
หน้าต่างใหม่จะปรากฏขึ้น ให้คุณตั้งชื่อกริดของคุณ ดูด้านล่าง
คลิกปุ่ม OK เพื่อดำเนินการต่อ

กริดของคุณถูกสร้างแล้ว ไปที่ Tools > Grids จากแถบนำทางหลัก และคลิกแท็บ Curated Grids เพื่อดูกริดใหม่ของคุณ

ปรับแต่ง

ฟอร์มนี้ให้คุณปรับแต่งกริดของคุณในวิธีดังนี้:

ตั้งชื่อเพื่อให้คุณจำได้ว่ากริดนี้เกี่ยวกับอะไร
เลือก Customization ที่คุณต้องการใช้กับกริดนี้
เลือกหน้าการ์ดเริ่มต้นที่คุณต้องการให้ผู้ใช้เห็นก่อน โดยค่าเริ่มต้นคือหน้าการ์ดดั้งเดิมของสินค้าคงคลังนั้น
เลือกตราสัญลักษณ์ที่คุณต้องการใช้บนการ์ด ตรานี้ช่วยให้ผู้ใช้เปรียบเทียบสินค้าคงคลังตามเกณฑ์รวม เช่น เป็นมิตรกับสิ่งแวดล้อม
เพิ่มคำสำคัญ คั่นด้วยเครื่องหมายจุลภาค ซึ่งจะถูกใช้โดย Web Crawlers
เพิ่มชื่อและคำอธิบายในภาษาที่คุณต้องการให้ผู้ใช้เห็น
คลิกปุ่ม Save เพื่อดำเนินการต่อ

แชร์

*รายการกริดจากรายการที่คัดสรรพร้อมเมนูการกระทำที่ย่อไว้*

ด้านบนแสดงภาพพร้อมการกระทำทั้งหมดที่มีสำหรับกริดของคุณ:

Update อัปเดตการตั้งค่ากริดของคุณ
Add to WinkLinks เพิ่มกริดนี้ไปยังบัญชี WinkLinks ของคุณ
Embed แสดงวิธีฝังกริดนี้เป็น Grid ลงในเว็บไซต์ของคุณ
Use with WordPress แสดงวิธีใช้ ปลั๊กอิน WordPress ของเราเพื่อฝังกริดนี้ลงในเว็บไซต์ของคุณ

เราจะอธิบายตัวเลือกเหล่านี้อย่างละเอียดเพิ่มเติมด้านล่าง

ฝัง

<html>
  <head>
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link>
  </head>
  <body>
    <wink-content-loader
       layout="LIST"
       id="9a212b5e-62a7-11ef-ac3f-42004e494300"
    ></wink-content-loader>

    <script src="https://elements.wink.travel/elements.js" type="module" defer></script>

    <wink-app-loader
      client-id="YOUR CLIENT ID GOES HERE"
      configuration-id="YOUR CUSTOMIZATION ID GOES HERE"
    ></wink-app-loader>
  </body>
</html>

นี่คือวิธีฝังกริดของคุณลงในเว็บไซต์:

บรรทัดที่ 3 แสดงวิธีฝังสไตล์ Wink ลงในเว็บไซต์ของคุณ
บรรทัดที่ 6 ถึง 9 แสดงวิธีใช้ wink-content-loader Web Component และบอกให้ดึงกริดสำหรับโค้ดของคุณ
บรรทัดที่ 11 แสดงวิธีฝัง Javascript ของเราในเว็บไซต์ของคุณ
บรรทัดที่ 13 แสดงวิธีฝัง wink-app-loader Web Component และบอกให้ดึงการตั้งค่าระดับหน้าเพจของคุณ

กริดจากการค้นหาที่บันทึกไว้

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

สร้าง

ไปที่ Inventory > Saved searches จากแถบนำทางหลัก
หากคุณยังไม่ได้สร้างการค้นหาที่บันทึกไว้ ให้ไปที่ Search เพื่อเรียนรู้วิธีการ

คลิกปุ่ม Actions บนการค้นหาที่บันทึกไว้ของคุณ
คลิกปุ่ม Create a grid
หน้าต่างใหม่จะปรากฏขึ้น ให้คุณตั้งชื่อกริดของคุณ ดูด้านล่าง

คลิกปุ่ม OK เพื่อดำเนินการต่อ

กริดของคุณถูกสร้างแล้ว ไปที่ Tools > Grids จากแถบนำทางหลัก และคลิกแท็บ Saved Search Grids เพื่อดูกริดใหม่ของคุณ

ปรับแต่ง

ฟอร์มนี้ให้คุณปรับแต่งกริดของคุณในวิธีดังนี้:

ตั้งชื่อเพื่อให้คุณจำได้ว่ากริดนี้เกี่ยวกับอะไร
เลือก Customization ที่คุณต้องการใช้กับกริดนี้
เลือกหน้าการ์ดเริ่มต้นที่คุณต้องการให้ผู้ใช้เห็นก่อน โดยค่าเริ่มต้นคือหน้าการ์ดดั้งเดิมของสินค้าคงคลังนั้น
เลือกตราสัญลักษณ์ที่คุณต้องการใช้บนการ์ด ตรานี้ช่วยให้ผู้ใช้เปรียบเทียบสินค้าคงคลังตามเกณฑ์รวม เช่น เป็นมิตรกับสิ่งแวดล้อม
เพิ่มคำสำคัญ คั่นด้วยเครื่องหมายจุลภาค ซึ่งจะถูกใช้โดย Web Crawlers
เพิ่มชื่อและคำอธิบายในภาษาที่คุณต้องการให้ผู้ใช้เห็น
คลิกปุ่ม Save เพื่อดำเนินการต่อ

แชร์

*รายการกริดจากการค้นหาที่บันทึกไว้พร้อมเมนูการกระทำที่ย่อไว้*

ฝัง

<html>
  <head>
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link>
  </head>
  <body>
    <wink-content-loader
       layout="LIST"
       id="be3130d5-62a7-11ef-ac3f-42004e494300"
    ></wink-content-loader>

    <script src="https://elements.wink.travel/elements.js" type="module" defer></script>

    <wink-app-loader
      client-id="YOUR CLIENT ID GOES HERE"
      configuration-id="YOUR CUSTOMIZATION ID GOES HERE"
    ></wink-app-loader>
  </body>
</html>

นี่คือวิธีฝังกริดของคุณลงในเว็บไซต์:

บรรทัดที่ 3 แสดงวิธีฝังสไตล์ Wink ลงในเว็บไซต์ของคุณ
บรรทัดที่ 6 ถึง 9 แสดงวิธีใช้ wink-content-loader Web Component และบอกให้ดึงกริดสำหรับโค้ดของคุณ
บรรทัดที่ 11 แสดงวิธีฝัง Javascript ของเราในเว็บไซต์ของคุณ
บรรทัดที่ 13 แสดงวิธีฝัง wink-app-loader Web Component และบอกให้ดึงการตั้งค่าระดับหน้าเพจของคุณ

กริดจัดอันดับ

สร้าง

สร้างกริดจัดอันดับโดยไปที่ Tools > Grids และคลิกแท็บ Ranked Grid จากนั้นคลิกปุ่ม Create ranked grid

ปรับแต่ง

ฟอร์มนี้ให้คุณปรับแต่งกริดจัดอันดับของคุณในวิธีดังนี้:

เลือกจุดหมายปลายทาง เช่น โตเกียว
ตั้งชื่อเพื่อให้คุณจำได้ว่ากริดนี้เกี่ยวกับอะไร เช่น โรงแรมที่เป็นมิตรกับสิ่งแวดล้อมในโตเกียว
เลือก Customization ที่คุณต้องการใช้กับกริดนี้
เลือกหน้าการ์ดเริ่มต้นที่คุณต้องการให้ผู้ใช้เห็นก่อน โดยค่าเริ่มต้นคือหน้าการ์ดดั้งเดิมของสินค้าคงคลังนั้น
เลือกลักษณะที่ใช้จัดเรียงที่พัก เช่น ความเป็นมิตรกับสิ่งแวดล้อม
เพิ่มคำสำคัญ คั่นด้วยเครื่องหมายจุลภาค ซึ่งจะถูกใช้โดย Web Crawlers
เพิ่มชื่อและคำอธิบายในภาษาที่คุณต้องการให้ผู้ใช้เห็น
คลิกปุ่ม Save เพื่อดำเนินการต่อ

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

แชร์

ด้านบนแสดงภาพพร้อมการกระทำทั้งหมดที่มีสำหรับกริดจัดอันดับของคุณ:

Update อัปเดตการตั้งค่ากริดของคุณ
Add to WinkLinks เพิ่มกริดจัดอันดับนี้ไปยังบัญชี WinkLinks ของคุณ
Embed แสดงวิธีฝังกริดนี้เป็น Grid ลงในเว็บไซต์ของคุณ
Use with WordPress แสดงวิธีใช้ ปลั๊กอิน WordPress ของเราเพื่อฝังการ์ดนี้ลงในเว็บไซต์ของคุณ

เราจะอธิบายตัวเลือกเหล่านี้อย่างละเอียดเพิ่มเติมด้านล่าง

ฝัง

<html>
  <head>
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link>
  </head>
  <body>
    <wink-content-loader
       layout="RANKED"
       id="2483d55e-62a5-11ef-ac3f-42004e494300"
    ></wink-content-loader>

    <script src="https://elements.wink.travel/elements.js" type="module" defer></script>

    <wink-app-loader
      client-id="YOUR CLIENT ID GOES HERE"
      configuration-id="YOUR CUSTOMIZATION ID GOES HERE"
    ></wink-app-loader>
  </body>
</html>

นี่คือวิธีฝังกริดของคุณลงในเว็บไซต์:

บรรทัดที่ 3 แสดงวิธีฝังสไตล์ Wink ลงในเว็บไซต์ของคุณ
บรรทัดที่ 6 ถึง 9 แสดงวิธีใช้ wink-content-loader Web Component และบอกให้ดึงกริดจัดอันดับสำหรับโค้ดของคุณ
บรรทัดที่ 11 แสดงวิธีฝัง Javascript ของเราในเว็บไซต์ของคุณ
บรรทัดที่ 13 แสดงวิธีฝัง wink-app-loader Web Component และบอกให้ดึงการตั้งค่าระดับหน้าเพจของคุณ

API

นักพัฒนาที่ต้องการจัดการกริดสามารถไปที่ Developers > API > Inventory

การอ่านเพิ่มเติม

เรียนรู้เพิ่มเติมเกี่ยวกับชุดของ Web Components
เรียนรู้เพิ่มเติมเกี่ยวกับ ปลั๊กอิน WordPress ของ Wink