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

Cards

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

  • क्लिक करें Book बटन।
  • क्लिक करें Galleryइस सूची के सभी फोटो और वीडियो देखने के लिए लिंक पर जाएं।
  • क्लिक करेंBest dealयदि उपलब्ध हो तो लिंक पर क्लिक करके सर्वोत्तम मूल्य वाला कमरा देखें।
  • क्लिक करेंHotel detailsसंपत्ति की जानकारी देखने के लिए लिंक (यदि उपलब्ध हो) पर क्लिक करें।

कार्ड का आकार न्यूनतम करने और डेटा को वर्गीकृत करने के लिए कार्ड एकाधिक फेसों का समर्थन करता है; जिससे उपयोगकर्ता इसे आसानी से उपयोग कर सकता है और आपको उपयोगकर्ता को बुकिंग में परिवर्तित करने का अधिक अवसर मिलता है।

एक कार्ड के दो या तीन चेहरे होते हैं:

  • होटल कार्ड के सामने की तरफ प्रॉपर्टी का डेटा और पीछे की तरफ सबसे अच्छे कमरे का प्रकार दिखाया जाता है। दोनों तरफ कीमत, होटल के लिए सबसे अच्छी कीमत प्रदर्शित करती है।
  • कमरे के प्रकार का कार्ड सामने की तरफ कमरे के प्रकार का डेटा और पीछे की तरफ संपत्ति का डेटा दिखाता है। कीमत सामने की तरफ कमरे के प्रकार की कीमत और पीछे की तरफ होटल के लिए सबसे अच्छी कीमत प्रदर्शित करती है।
  • अन्य सभी कार्ड (जैसे स्पा रेस्टोरेंट आदि) के 3 फेस होते हैं। उदाहरण: स्पा डेटा स्पा के सर्वोत्तम मूल्य के साथ फ्रंट पेज पर प्रदर्शित होता है। सर्वोत्तम मूल्य वाले कमरे के लिए कमरे के प्रकार का डेटा दूसरे पक्ष पर होता है। सबसे अच्छे मूल्य वाले कमरे के साथ संपत्ति डेटा तीसरे कार्ड फेस पर होता है।
कार्ड पूर्वावलोकन
उपलब्धता के साथ सामने वाले कमरे का प्रकार कार्ड

ऊपर हमारे कमरे के प्रकार कार्ड का एक उदाहरण है। इसमें संपत्ति, समीक्षा और कमरे के डेटा के साथ-साथ रद्दीकरण नीति और भोजन शामिल हैं।

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

कार्रवाई
खोज परिणाम क्रियाएँ

ऊपर दी गई छवि यहाँ से ली गई हैखोजऔर आपको कुछ चीज़ें दिखाता है जो आप अपने खोज परिणामों के साथ कर सकते हैं। उन कार्यों में से एक हैMake a card. उस बटन पर क्लिक करें और यह आपको हमारे कार्ड फॉर्म पेज पर पुनः निर्देशित करेगा जहां आप अपने कार्ड को अनुकूलित करना शुरू कर सकते हैं।

कार्ड अनुकूलित करें

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

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

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

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

कार्ड
संकुचित क्रिया मेनू वाला कार्ड

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

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

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

<html>
<head>
<link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link>
</head>
<body>
<wink-content-loader
layout="GUEST_ROOM"
id="2de7ee9c-61c9-11ef-9722-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 > इन्वेंट्री.