กริด

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

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

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

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

ประเภทกริด

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

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

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

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

สร้าง

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

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

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

ปรับแต่ง

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

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

แชร์

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

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

อัปเดต อัปเดตการตั้งค่ากริดของคุณ
เพิ่มไปยัง WinkLinks เพิ่มกริดไปยังบัญชี WinkLinks ของคุณ
ฝัง แสดงวิธีฝังกริดนี้เป็น Grid ลงในเว็บไซต์ของคุณ
ใช้กับ 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 และบอกให้ดึงการตั้งค่าระดับหน้าเพจของคุณ

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

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

สร้าง

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

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

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

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

ปรับแต่ง

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

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

แชร์

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

ฝัง

<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 และบอกให้ดึงการตั้งค่าระดับหน้าเพจของคุณ

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

สร้าง

สร้างกริดจัดอันดับโดยไปที่ กริด และคลิกแท็บ จัดอันดับ คลิกปุ่ม สร้างกริดจัดอันดับ

ปรับแต่ง

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

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

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

แชร์

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

อัปเดต อัปเดตการตั้งค่ากริดของคุณ
เพิ่มไปยัง WinkLinks เพิ่มกริดจัดอันดับไปยังบัญชี WinkLinks ของคุณ
ฝัง แสดงวิธีฝังกริดนี้เป็น Grid ลงในเว็บไซต์ของคุณ
ใช้กับ 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

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

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

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