ग्रिड्स

एक ग्रिड आपूर्तिकर्ताओं और इन्वेंटरी की एक सूची का प्रतिनिधित्व करता है और इसे एक इंटरैक्टिव, बुक करने योग्य, ग्रिड UI के माध्यम से विवरण दिखाता है।
ग्रिड आपके क्यूरेटेड सूची या सहेजे गए खोज से किसी भी इन्वेंटरी को प्रदर्शित करने का समर्थन करता है।
एक उपयोगकर्ता ग्रिड के साथ उसी तरह इंटरैक्ट करता है जैसे वह एक व्यक्तिगत कार्ड के साथ करता है, एक अतिरिक्त सुविधा के साथ:

Show more बटन पर क्लिक करके ग्रिड में पेजिनेट करें (जब और आइटम उपलब्ध हों)।

Grid preview — *कई कमरे के प्रकार दिखाने वाला ग्रिड*

ऊपर हमारे ग्रिड का एक उदाहरण है जो कमरे के प्रकार के कार्ड की सूची दिखा रहा है।

इस लेख के बाकी हिस्से में हम आपको दिखाएंगे कि ग्रिड कैसे बनाएं, अनुकूलित करें और अपने उपयोगकर्ताओं के लिए प्रदर्शित करें।

ग्रिड के प्रकार

ग्रिड के तीन प्रकार हैं:

क्यूरेटेड सूची पर आधारित ग्रिड।
सहेजे गए खोज पर आधारित ग्रिड।
स्थान और सॉर्ट मानदंड पर आधारित ग्रिड (जैसे रैंक्ड ग्रिड)।

क्यूरेटेड सूची ग्रिड

यह एक ग्रिड है जो आपने अपनी क्यूरेटेड सूचियों में एकत्रित की गई इन्वेंटरी का उपयोग करता है और सूची को बुक करने योग्य यात्रा इन्वेंटरी में परिवर्तित करता है जिसे आप अपने उपयोगकर्ताओं को दिखा सकते हैं।

बनाएं

मुख्य नेव बार से Inventory > Curated Lists पर जाएं। इस उदाहरण के लिए, हम आपकी Favorites सूची का उपयोग करेंगे।
यदि आपने अभी तक अपनी Favorites में कुछ नहीं जोड़ा है, तो जानने के लिए Search पर जाएं।

Create curate list grid — *क्यूरेटेड सूची ग्रिड बनाने का फॉर्म*

Favorites सूची पर Actions बटन पर क्लिक करें।
Create a grid बटन पर क्लिक करें।
एक नई विंडो खुलेगी, जिसमें आप अपने ग्रिड का नाम दे सकते हैं। नीचे देखें।
जारी रखने के लिए OK बटन पर क्लिक करें।

आपका ग्रिड बन गया है। मुख्य नेव बार से Tools > Grids पर जाएं और Curated Grids टैब पर क्लिक करके अपने नए ग्रिड को देखें।

अनुकूलित करें

फॉर्म आपको अपने ग्रिड को निम्नलिखित तरीकों से अनुकूलित करने देता है:

इसे एक नाम दें ताकि आप याद रख सकें कि ग्रिड किस बारे में है।
उस Customization का चयन करें जिसे आप इस ग्रिड पर लागू करना चाहते हैं।
वह प्रारंभिक कार्ड फेस चुनें जिसे आप चाहते हैं कि उपयोगकर्ता पहले देखें। डिफ़ॉल्ट रूप से, यह उस इन्वेंटरी का मूल फेस होता है।
कार्ड पर उपयोग करने के लिए बैज चुनें। एक बैज उपयोगकर्ताओं को एक समग्र मेट्रिक जैसे eco-friendly पर इन्वेंटरी की तुलना करने देता है।
कीवर्ड जोड़ें, कॉमा से अलग किए गए, जिन्हें Web Crawlers द्वारा उपयोग किया जाएगा।
उन भाषाओं में शीर्षक और विवरण जोड़ें जिन्हें आप उपयोगकर्ता को दिखाना चाहते हैं।
जारी रखने के लिए Save बटन पर क्लिक करें।

Update आपके ग्रिड कॉन्फ़िगरेशन को अपडेट करता है।
Add to WinkLinks ग्रिड को आपके WinkLinks खाते में जोड़ता है।
Embed आपको दिखाता है कि इस ग्रिड को अपनी वेबसाइट में Grid के रूप में कैसे एम्बेड करें।
Use with WordPress आपको दिखाता है कि हमारी WordPress plugin का उपयोग करके इस ग्रिड को अपनी वेबसाइट में कैसे एम्बेड करें।

हम नीचे इन विकल्पों में से कुछ को अधिक विस्तार से कवर करते हैं।

एम्बेड करें

<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 वेब कंपोनेंट का उपयोग कैसे करें और इसे आपके कोड के लिए ग्रिड लाने के लिए कहें।
लाइन 11 आपको दिखाती है कि हमारी जावास्क्रिप्ट को अपनी साइट में कैसे एम्बेड करें।
लाइन 13 आपको दिखाती है कि wink-app-loader वेब कंपोनेंट को कैसे एम्बेड करें और इसे आपके पेज-स्तरीय कॉन्फ़िगरेशन प्राथमिकताएं लाने के लिए कहें।

सहेजा गया खोज ग्रिड

यह एक ग्रिड है जो आपकी सहेजी गई खोज क्वेरी में इन्वेंटरी का उपयोग करता है और खोज परिणामों को बुक करने योग्य यात्रा इन्वेंटरी में परिवर्तित करता है जिसे आप अपने उपयोगकर्ताओं को दिखा सकते हैं।

बनाएं

मुख्य नेव बार से Inventory > Saved searches पर जाएं।
यदि आपने अभी तक कोई सहेजा गया खोज नहीं बनाया है, तो जानने के लिए Search पर जाएं।

Create saved search grid — *सहेजा गया खोज ग्रिड बनाने का फॉर्म*

अपनी सहेजी गई खोज पर Actions बटन पर क्लिक करें।
Create a grid बटन पर क्लिक करें।
एक नई विंडो खुलेगी, जिसमें आप अपने ग्रिड का नाम दे सकते हैं। नीचे देखें।

जारी रखने के लिए OK बटन पर क्लिक करें।

आपका ग्रिड बन गया है। मुख्य नेव बार से Tools > Grids पर जाएं और Saved Search Grids टैब पर क्लिक करके अपने नए ग्रिड को देखें।

अनुकूलित करें

फॉर्म आपको अपने ग्रिड को निम्नलिखित तरीकों से अनुकूलित करने देता है:

इसे एक नाम दें ताकि आप याद रख सकें कि ग्रिड किस बारे में है।
उस Customization का चयन करें जिसे आप इस ग्रिड पर लागू करना चाहते हैं।
वह प्रारंभिक कार्ड फेस चुनें जिसे आप चाहते हैं कि उपयोगकर्ता पहले देखें। डिफ़ॉल्ट रूप से, यह उस इन्वेंटरी का मूल फेस होता है।
कार्ड पर उपयोग करने के लिए बैज चुनें। एक बैज उपयोगकर्ताओं को एक समग्र मेट्रिक जैसे eco-friendly पर इन्वेंटरी की तुलना करने देता है।
कीवर्ड जोड़ें, कॉमा से अलग किए गए, जिन्हें 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 वेब कंपोनेंट का उपयोग कैसे करें और इसे आपके कोड के लिए ग्रिड लाने के लिए कहें।
लाइन 11 आपको दिखाती है कि हमारी जावास्क्रिप्ट को अपनी साइट में कैसे एम्बेड करें।
लाइन 13 आपको दिखाती है कि wink-app-loader वेब कंपोनेंट को कैसे एम्बेड करें और इसे आपके पेज-स्तरीय कॉन्फ़िगरेशन प्राथमिकताएं लाने के लिए कहें।

रैंक्ड ग्रिड

बनाएं

Tools > Grids पर जाएं और Ranked Grid टैब पर क्लिक करें। फिर Create ranked grid बटन पर क्लिक करें।

अनुकूलित करें

फॉर्म आपको अपने रैंक्ड ग्रिड को निम्नलिखित तरीकों से अनुकूलित करने देता है:

एक गंतव्य चुनें। जैसे टोक्यो।
इसे एक नाम दें ताकि आप याद रख सकें कि ग्रिड किस बारे में है। जैसे टोक्यो में इको-फ्रेंडली होटल
उस Customization का चयन करें जिसे आप इस ग्रिड पर लागू करना चाहते हैं।
वह प्रारंभिक कार्ड फेस चुनें जिसे आप चाहते हैं कि उपयोगकर्ता पहले देखें। डिफ़ॉल्ट रूप से, यह उस इन्वेंटरी का मूल फेस होता है।
संपत्तियों को किस विशेषता के आधार पर सॉर्ट करना है, चुनें। जैसे इको-फ्रेंडलीनेस।
कीवर्ड जोड़ें, कॉमा से अलग किए गए, जिन्हें Web Crawlers द्वारा उपयोग किया जाएगा।
उन भाषाओं में शीर्षक और विवरण जोड़ें जिन्हें आप उपयोगकर्ता को दिखाना चाहते हैं।
जारी रखने के लिए Save बटन पर क्लिक करें।

सहेजने के बाद, आप अपने रैंक्ड ग्रिड पेज पर पुनः निर्देशित हो जाएंगे और आपका ग्रिड अब दुनिया के साथ साझा करने के लिए तैयार है।

Update आपके ग्रिड कॉन्फ़िगरेशन को अपडेट करता है।
Add to WinkLinks रैंक्ड ग्रिड को आपके WinkLinks खाते में जोड़ता है।
Embed आपको दिखाता है कि इस ग्रिड को अपनी वेबसाइट में Grid के रूप में कैसे एम्बेड करें।
Use with WordPress आपको दिखाता है कि हमारी WordPress plugin का उपयोग करके इस कार्ड को अपनी वेबसाइट में कैसे एम्बेड करें।

हम नीचे इन विकल्पों में से कुछ को अधिक विस्तार से कवर करते हैं।

एम्बेड करें

<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 वेब कंपोनेंट का उपयोग कैसे करें और इसे आपके कोड के लिए रैंक्ड ग्रिड लाने के लिए कहें।
लाइन 11 आपको दिखाती है कि हमारी जावास्क्रिप्ट को अपनी साइट में कैसे एम्बेड करें।
लाइन 13 आपको दिखाती है कि wink-app-loader वेब कंपोनेंट को कैसे एम्बेड करें और इसे आपके पेज-स्तरीय कॉन्फ़िगरेशन प्राथमिकताएं लाने के लिए कहें।

API

डेवलपर्स जो ग्रिड्स प्रबंधित करना चाहते हैं, वे Developers > API > Inventory पर जा सकते हैं।

आगे पढ़ें

हमारी Web Components संग्रह के बारे में अधिक जानें।
Wink WordPress plugin के बारे में अधिक जानें।

ग्रिड्स

ग्रिड के प्रकार

क्यूरेटेड सूची ग्रिड

बनाएं

अनुकूलित करें

साझा करें

एम्बेड करें

सहेजा गया खोज ग्रिड

बनाएं

अनुकूलित करें

साझा करें

एम्बेड करें

रैंक्ड ग्रिड

बनाएं

अनुकूलित करें

साझा करें

एम्बेड करें

API

आगे पढ़ें