इसे छोड़कर कंटेंट पर जाएं
Academy

ग्रिड्स

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

  1. Show more बटन पर क्लिक करके ग्रिड में पेजिनेट करें (जब और आइटम उपलब्ध हों)।
Grid preview
कई कमरे के प्रकार दिखाने वाला ग्रिड

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

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

ग्रिड प्रकार

Section titled “ग्रिड प्रकार”

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

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

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

Section titled “क्यूरेटेड सूची ग्रिड”

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

बनाएं

Section titled “बनाएं”

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

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

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

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

Section titled “अनुकूलित करें”

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

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

साझा करें

Section titled “साझा करें”
Curated list grid
क्यूरेटेड सूची ग्रिड प्रविष्टि जिसमें संकुचित क्रियाओं मेनू

ऊपर आपको आपके ग्रिड के लिए सभी उपलब्ध क्रियाओं के साथ एक छवि दिखाई गई है:

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

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

एम्बेड करें

Section titled “एम्बेड करें”
<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 वेब कॉम्पोनेंट को कैसे एम्बेड करें और इसे आपके पेज-स्तरीय कॉन्फ़िगरेशन प्राथमिकताएँ लाने के लिए कहें।

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

Section titled “सहेजा गया खोज ग्रिड”

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

बनाएं

Section titled “बनाएं”

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

Create saved search grid
सहेजा गया खोज ग्रिड बनाने का फॉर्म
  1. अपनी सहेजे गए खोज पर Actions बटन पर क्लिक करें।
  2. Create a grid बटन पर क्लिक करें।
  3. एक नई विंडो खुलेगी, जिसमें आप अपने ग्रिड का नाम दे सकते हैं। नीचे देखें।
  1. जारी रखने के लिए OK बटन पर क्लिक करें।

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

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

Section titled “अनुकूलित करें”

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

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

साझा करें

Section titled “साझा करें”
Saved search grid
सहेजा गया खोज ग्रिड प्रविष्टि जिसमें संकुचित क्रियाओं मेनू

एम्बेड करें

Section titled “एम्बेड करें”
<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 वेब कॉम्पोनेंट को कैसे एम्बेड करें और इसे आपके पेज-स्तरीय कॉन्फ़िगरेशन प्राथमिकताएँ लाने के लिए कहें।

रैंक्ड ग्रिड

Section titled “रैंक्ड ग्रिड”

बनाएं

Section titled “बनाएं”

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

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

Section titled “अनुकूलित करें”

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

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

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

साझा करें

Section titled “साझा करें”
Ranked grid
संकुचित क्रियाओं मेनू के साथ एक रैंक्ड ग्रिड

ऊपर आपको आपके रैंक्ड ग्रिड के लिए सभी उपलब्ध क्रियाओं के साथ एक छवि दिखाई गई है:

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

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

एम्बेड करें

Section titled “एम्बेड करें”
<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

Section titled “API”

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

आगे पढ़ें

Section titled “आगे पढ़ें”
  • हमारी Web Components संग्रह के बारे में अधिक जानें।
  • Wink WordPress plugin के बारे में अधिक जानें।