Grids

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

क्लिक करके ग्रिड के माध्यम से पृष्ठांकन करेंShow more बटन (जब अधिक वस्तुएं उपलब्ध हों).

ग्रिड पूर्वावलोकन — *एकाधिक कक्ष प्रकार दिखाने वाला ग्रिड*

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

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

ग्रिड प्रकार

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

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

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

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

बनाएं

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

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

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

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

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

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

शेयर करना

*संक्षिप्त क्रिया मेनू के साथ क्यूरेटेड सूची ग्रिड प्रविष्टि*

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

अद्यतनआपके ग्रिड कॉन्फ़िगरेशन को अद्यतन करता है.
विंकलिंक्स में जोड़ेंआपके विंकलिंक्स खाते में ग्रिड जोड़ता है।
एम्बेडआपको दिखाता है कि इस ग्रिड को कैसे एम्बेड किया जाएग्रिडअपनी वेबसाइट में जोड़ें.
वर्डप्रेस के साथ प्रयोग करेंआपको दिखाता है कि हमारा उपयोग कैसे करेंवर्डप्रेस प्लगइनइस ग्रिड को अपनी वेबसाइट में एम्बेड करने के लिए.

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

एम्बेड

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

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

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

बनाएं

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

सहेजे गए खोज ग्रिड बनाएँ — *सहेजे गए खोज ग्रिड फ़ॉर्म बनाएँ*

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

क्लिक करेंOKबटन दबाएँ.

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

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

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

रैंक ग्रिड

बनाएं

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

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

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

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

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

शेयर करना

*संकुचित क्रिया मेनू के साथ एक रैंक ग्रिड*

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

अद्यतनआपके ग्रिड कॉन्फ़िगरेशन को अद्यतन करता है.
विंकलिंक्स में जोड़ेंआपके विंकलिंक्स खाते में रैंक्ड ग्रिड जोड़ता है।
एम्बेडआपको दिखाता है कि इस ग्रिड को कैसे एम्बेड किया जाएग्रिडअपनी वेबसाइट में जोड़ें.
वर्डप्रेस के साथ प्रयोग करेंआपको दिखाता है कि हमारा उपयोग कैसे करेंवर्डप्रेस प्लगइनइस कार्ड को अपनी वेबसाइट में एम्बेड करने के लिए.

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

एम्बेड

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

एपीआई

जो डेवलपर्स ग्रिड का प्रबंधन करना चाहते हैं, वे यहां जा सकते हैंडेवलपर्स > API > इन्वेंट्री.

अग्रिम पठन

हमारे संग्रह के बारे में अधिक जानेंवेब घटक.
के बारे में अधिक जानेंविंक वर्डप्रेस प्लगइन.