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

वेब घटक

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

किसी भी पृष्ठ पर जहाँ आप हमारे किसी वेब घटक को प्रदर्शित करना चाहते हैं, आपको तीन चीजें शामिल करनी होंगी।

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

अपने दस्तावेज़ के शीर्ष में हमारी CSS शैलियों को शामिल करें।

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

अपने दस्तावेज़ के नीचे हमारी जावास्क्रिप्ट शामिल करें।हम अंतिम बॉडी टैग के ठीक ऊपर की अनुशंसा करते हैं).

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

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

हमारे घटक पुस्तकालय के बारे में नीचे पढ़ें।

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

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

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

उपलब्ध विशेषताएँ:

  • लेआउट
  • पहचान
  • क्रम से लगाना

विशेषताsortकेवल तभी उपलब्ध है जब लेआउट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>

नमूने यहां मिल सकते हैंपत्ते,ग्रिड और एमएपीएस.

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

<html>
<body>
<wink-lookup></wink-lookup>
</body>
</html>
लुकअप वेब घटक
लुकअप वेब घटक

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

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

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

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

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

<html>
<body>
<wink-itinerary></wink-itinerary>
</body>
</html>
यात्रा कार्यक्रम वेब घटक
यात्रा कार्यक्रम वेब घटक

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

खोज मोडल
मोडल के रूप में यात्रा कार्यक्रम चयनकर्ता

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

<html>
<body>
<wink-search></wink-search>
</body>
</html>
खोज वेब घटक
खोज वेब घटक

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

खोज मोडल
मोडल के रूप में यात्रा कार्यक्रम चयनकर्ता

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

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

यात्रा कार्यक्रम घटक एक यात्रा कार्यक्रम प्रपत्र प्रदर्शित करता है जिसके साथ उपयोगकर्ता बातचीत कर सकते हैं।

<html>
<body>
<wink-itinerary-form></wink-itinerary-form>
</body>
</html>
यात्रा कार्यक्रम प्रपत्रवेब घटक
यात्रा कार्यक्रम प्रपत्र वेब घटक

हमारे किसी भी यात्रा कार्यक्रम घटक में यात्रा कार्यक्रम को बदलने से, आपके द्वारा वर्तमान में पृष्ठ पर प्रदर्शित किसी भी इन्वेंट्री के लिए यात्रा कार्यक्रम अद्यतन घटना सक्रिय हो जाती है।

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

<html>
<body>
<wink-account></wink-account>
</body>
</html>
खाता वेब घटक
खाता बटन वेब घटक

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

प्रमाणीकृत होने पर खाता बटन
खाता बटन (प्रमाणित) वेब घटक

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

प्रमाणीकृत होने पर खाता बटन
खाता बटन (खुला) वेब घटक

ट्रिपपे एम्बेड करें

Section titled “ट्रिपपे एम्बेड करें”

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

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

अपने दस्तावेज़ के शीर्ष में हमारी CSS शैलियों को शामिल करें।

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

अपने दस्तावेज़ के नीचे हमारी जावास्क्रिप्ट शामिल करें।हम अंतिम बॉडी टैग के ठीक ऊपर की अनुशंसा करते हैं).

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

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

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

विजेट के लिए एक आवश्यक विशेषता है:

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

:::नोट बुकिंग अनुबंध कैसे तैयार करें, यह जानने के लिएid, गाइड पढ़ें:ट्रिपपे के साथ एकीकरण. :::

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

भुगतान विवरण
चित्र 1. नमूना भुगतान प्रपत्र