वेब घटक

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

एम्बेड विंक

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

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

शैली पत्रक

अपने दस्तावेज़ के शीर्ष में हमारी 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>

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

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

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

<html>
  <body>
    <wink-itinerary></wink-itinerary>
  </body>
</html>

यात्रा कार्यक्रम वेब घटक

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

खोज

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

<html>
  <body>
    <wink-search></wink-search>
  </body>
</html>

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

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

<html>
  <body>
    <wink-itinerary-form></wink-itinerary-form>
  </body>
</html>

यात्रा कार्यक्रम प्रपत्रवेब घटक — *यात्रा कार्यक्रम प्रपत्र वेब घटक*

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

खाता

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

<html>
  <body>
    <wink-account></wink-account>
  </body>
</html>

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

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

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

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

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

शैली पत्रक

अपने दस्तावेज़ के शीर्ष में हमारी 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)बुकिंग को अंतिम रूप देने के लिए उपयोगकर्ता को एक ईमेल पता दिया जाएगा।