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

वेब कॉम्पोनेंट्स

वेब कॉम्पोनेंट्स एक मानक है जो आपको बिना कोडिंग जाने अपनी वेबसाइट में पूरी जावास्क्रिप्ट सुविधाएँ एकीकृत करने देता है। इस शानदार तकनीक की बदौलत, यह Wink ट्रैवल इन्वेंटरी को बहुत कम झंझट में एम्बेड करने देता है। यह लेख आपको हमारे वेब कॉम्पोनेंट्स के संग्रह के माध्यम से ले जाता है और दिखाता है कि उन्हें कैसे उपयोग करें।

Wink एम्बेड करें

Section titled “Wink एम्बेड करें”

किसी भी पेज में जहां आप हमारे वेब कॉम्पोनेंट्स में से एक दिखाना चाहते हैं, आपको तीन चीजें शामिल करनी होंगी।

  1. हमारी स्टाइलशीट शामिल करें।
  2. हमारा जावास्क्रिप्ट शामिल करें।
  3. हमारा एप्लिकेशन लोडर शामिल करें।

स्टाइलशीट

Section titled “स्टाइलशीट”

अपने दस्तावेज़ के हेड में हमारे CSS स्टाइल्स शामिल करें।

<html>
  <head>
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link>
  </head>
</html>

जावास्क्रिप्ट

Section titled “जावास्क्रिप्ट”

अपने दस्तावेज़ के नीचे हमारे जावास्क्रिप्ट को शामिल करें। (हम अंत के body टैग के ठीक ऊपर रखने की सलाह देते हैं)।

<html>
  <body>
    <script src="https://elements.wink.travel/elements.js" type="module" defer></script>
  </body>
</html>

अब आपकी साइट तैयार है और हमारे वेब कॉम्पोनेंट्स को दिखाने में सक्षम है।

कॉम्पोनेंट्स

Section titled “कॉम्पोनेंट्स”

नीचे हमारे कॉम्पोनेंट लाइब्रेरी के बारे में पढ़ें।

एप्लिकेशन लोडर

Section titled “एप्लिकेशन लोडर”

लोडर हमारे कॉम्पोनेंट्स के बीच स्थिति बनाए रखने और इंटरैक्शन प्रबंधित करने के लिए जिम्मेदार है। (इसे हमारे जावास्क्रिप्ट के नीचे शामिल करें)।

<html>
  <body>
    <wink-app-loader
      client-id="YOUR CLIENT ID GOES HERE"
      configuration-id="YOUR CUSTOMIZATION ID GOES HERE"
    ></wink-app-loader>
  </body>
</html>

कंटेंट लोडर

Section titled “कंटेंट लोडर”

कंटेंट लोडर हमारे वेब कॉम्पोनेंट लाइब्रेरी का केंद्र है। यह आपकी इन्वेंटरी (कार्ड, ग्रिड, मैप) दिखाने के लिए जिम्मेदार है।

उपलब्ध एट्रिब्यूट्स:

  • layout
  • id
  • sort

एट्रिब्यूट sort केवल तब उपलब्ध है जब layout RANKED हो और आप मौजूदा रैंक्ड ग्रिड का उपयोग नहीं करना चाहते। ऐसे मामलों में, id खाली छोड़ दें।

उपलब्ध लेआउट प्रकार:

  • AD_BANNER
  • MAP
  • HOTEL
  • GUEST_ROOM
  • MEETING_ROOM
  • SPA
  • RESTAURANT
  • ACTIVITY
  • ATTRACTION
  • PLACE
  • ADD_ON
  • LIST
  • SEARCH
  • RANKED

उपलब्ध सॉर्ट प्रकार:

  • MEMBER
  • PRICE_LOW_TO_HIGH
  • PRICE_HIGH_TO_LOW
  • PRICE
  • POPULARITY
  • ECO
  • EXPERIENCE
  • PERK
  • LOYALTY
  • PACKAGE
<html>
  <body>
    <wink-content-loader
       layout="GUEST_ROOM"
       id="2de7ee9c-61c9-11ef-9722-42004e494300"
    ></wink-content-loader>
  </body>
</html>

कार्ड्स, ग्रिड्स और मैप्स के लिए नमूने उपलब्ध हैं।

लुकअप

Section titled “लुकअप”

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

<html>
  <body>
    <wink-lookup></wink-lookup>
  </body>
</html>
Lookup web component
लुकअप वेब कॉम्पोनेंट

ऊपर दिए गए कॉम्पोनेंट पर क्लिक करने से एक मोडल खुलता है जो आपको वह गंतव्य या होटल टाइप करने देता है जिसे आप खोज रहे हैं।

Lookup modal
परिणामों के साथ लुकअप मोडल

यात्रा कार्यक्रम

Section titled “यात्रा कार्यक्रम”

यात्रा कार्यक्रम बटन वर्तमान यात्रा कार्यक्रम को बटन पर दिखाता है। जब आप इसे क्लिक करते हैं, तो पूरा यात्रा कार्यक्रम पिकर एक मोडल के रूप में प्रदर्शित होता है।

<html>
  <body>
    <wink-itinerary></wink-itinerary>
  </body>
</html>
Itinerary web component
यात्रा कार्यक्रम वेब कॉम्पोनेंट

ऊपर दिए गए बटन पर क्लिक करने से एक मोडल खुलता है जो आपको अपना यात्रा कार्यक्रम अपडेट करने देता है।

Search modal
मोडल के रूप में यात्रा कार्यक्रम पिकर

खोज

Section titled “खोज”

खोज यात्रा कार्यक्रम पिकर का केवल आइकन वाला बटन है। जब आप इसे क्लिक करते हैं, तो पूरा यात्रा कार्यक्रम पिकर एक मोडल के रूप में प्रदर्शित होता है।

<html>
  <body>
    <wink-search></wink-search>
  </body>
</html>
Search web component
खोज वेब कॉम्पोनेंट

ऊपर दिए गए बटन पर क्लिक करने से एक मोडल खुलता है जो आपको अपना यात्रा कार्यक्रम अपडेट करने देता है।

Search modal
मोडल के रूप में यात्रा कार्यक्रम पिकर

यात्रा कार्यक्रम फॉर्म

Section titled “यात्रा कार्यक्रम फॉर्म”

यात्रा कार्यक्रम कॉम्पोनेंट एक यात्रा कार्यक्रम फॉर्म दिखाता है जिससे उपयोगकर्ता इंटरैक्ट कर सकते हैं।

<html>
  <body>
    <wink-itinerary-form></wink-itinerary-form>
  </body>
</html>
Itinerary formweb component
यात्रा कार्यक्रम फॉर्म वेब कॉम्पोनेंट

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

खाता

Section titled “खाता”

खाता बटन आपको अपनी साइट पर Wink प्रमाणीकरण जोड़ने की अनुमति देता है।

<html>
  <body>
    <wink-account></wink-account>
  </body>
</html>
Account web component
खाता बटन वेब कॉम्पोनेंट

जब उपयोगकर्ता प्रमाणीकरण नहीं किया होता है, तो बटन पर क्लिक करने से उपयोगकर्ता प्रमाणीकरण के लिए अग्रेषित हो जाता है। जब उपयोगकर्ता प्रमाणीकरण कर चुका होता है, तो यह उपयोगकर्ता की प्रोफ़ाइल आइकन दिखाता है।

Account button when authenticated
खाता बटन (प्रमाणित) वेब कॉम्पोनेंट

जब आप बटन पर क्लिक करते हैं, तो यह उपयोगकर्ता-विशिष्ट ड्रॉपडाउन खोलता है।

Account button when authenticated
खाता बटन (खुला) वेब कॉम्पोनेंट

TripPay एम्बेड करें

Section titled “TripPay एम्बेड करें”

किसी भी पेज में जहां आप TripPay भुगतान वेब कॉम्पोनेंट का उपयोग करना चाहते हैं, आपको दो चीजें शामिल करनी होंगी।

  1. हमारी स्टाइलशीट शामिल करें।
  2. हमारा जावास्क्रिप्ट शामिल करें।

स्टाइलशीट

Section titled “स्टाइलशीट”

अपने दस्तावेज़ के हेड में हमारे CSS स्टाइल्स शामिल करें।

<html>
  <head>
    <link rel="stylesheet" href="https://elements.trippay.io/styles.css"></link>
  </head>
</html>

जावास्क्रिप्ट

Section titled “जावास्क्रिप्ट”

अपने दस्तावेज़ के नीचे हमारे जावास्क्रिप्ट को शामिल करें। (हम अंत के body टैग के ठीक ऊपर रखने की सलाह देते हैं)।

<html>
  <body>
    <script src="https://elements.trippay.io/elements.js" type="module" defer></script>
  </body>
</html>

अब आपकी साइट तैयार है और हमारे वेब कॉम्पोनेंट्स को दिखाने में सक्षम है।

कॉम्पोनेंट्स

Section titled “कॉम्पोनेंट्स”

भुगतान

Section titled “भुगतान”

भुगतान कॉम्पोनेंट TripPay को सूचित करने देता है कि यात्री कुछ खरीदना चाहता है और उन वस्तुओं के नियम और मूल्य क्या हैं।

विजेट के लिए एक आवश्यक एट्रिब्यूट है:

  • id वह बुकिंग कॉन्ट्रैक्ट का पहचानकर्ता जिसे आप निष्पादित करना चाहते हैं।
<html>
  <body>
    <trip-pay id="<INSERT_BOOKING_CONTRACT_ID>"></trip-pay>
  </body>
</html>

विजेट निष्पादन के लिए कॉन्ट्रैक्ट तैयार करता है और उपयोगकर्ता को भुगतान विवरण (चित्र 1) दिखाता है ताकि बुकिंग को अंतिम रूप दिया जा सके।

Payment details
चित्र 1. नमूना भुगतान फॉर्म

त्रुटियाँ

Section titled “त्रुटियाँ”

यदि आपको हमारे किसी वेब कॉम्पोनेंट को एम्बेड करते समय, चाहे WinkLinks पर हो या अपनी खुद की वेबसाइट पर, त्रुटि संदेश मिलता है, तो कुछ चीजें गलत हो सकती हैं:

उपलब्धता

Section titled “उपलब्धता”

इन्वेंटरी अब उपलब्ध नहीं हो सकती। Wink Studio पर जाएं और देखें कि “कार्ड” की स्थिति उपलब्ध है या नहीं। यदि नहीं, तो यह लाल रंग में दिखेगा। ऐसी स्थिति में, आप प्रतीक्षा कर सकते हैं और शायद सप्लायर इसे फिर से उपलब्ध कराए या इसे अपनी सूची से हटा दें।

हटाया गया

Section titled “हटाया गया”

इन्वेंटरी हटा दी गई हो सकती है। Wink Studio पर जाएं और देखें कि “कार्ड” की स्थिति उपलब्ध है या नहीं। यदि नहीं, तो यह लाल रंग में दिखेगा। ऐसी स्थिति में, आप प्रतीक्षा कर सकते हैं और शायद सप्लायर इसे फिर से उपलब्ध कराए या इसे अपनी सूची से हटा दें।

अनुकूलन

Section titled “अनुकूलन”

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

एप्लिकेशन

Section titled “एप्लिकेशन”

यह केवल वेब डेवलपर्स के लिए है। यदि आपने गलती से एप्लिकेशन हटा दिया है; जिससे क्लाइंट ID उपलब्ध नहीं है, तो कृपया एक नया एप्लिकेशन बनाएं और हमारे वेब कॉम्पोनेंट्स को एम्बेड करने के लिए नया क्लाइंट ID उपयोग करें।