Skip to content
Academy

Mga Web Component

Web Components ay isang standard na nagpapahintulot sa iyo na isama ang buong mga tampok ng Javascript sa iyong website nang hindi kinakailangang marunong mag-code. Dahil sa kahanga-hangang teknolohiyang ito, pinapayagan kang i-embed ang Wink travel inventory nang napakadali. Ang artikulong ito ay gagabay sa iyo sa aming koleksyon ng mga web component at ipapakita kung paano gamitin ang mga ito.

I-embed ang Wink

Section titled “I-embed ang Wink”

May tatlong bagay na kailangan mong isama sa anumang pahina kung saan nais mong ipakita ang isa sa aming mga web component.

  1. Isama ang aming stylesheet.
  2. Isama ang aming Javascript.
  3. Isama ang aming application loader.

Stylesheet

Section titled “Stylesheet”

Isama ang aming CSS styles sa head ng iyong dokumento.

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

Javascript

Section titled “Javascript”

Isama ang aming Javascript sa ibaba ng iyong dokumento. (Inirerekomenda naming ilagay ito agad sa itaas ng end </body> tag).

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

Handa na ang iyong site at kaya nang ipakita ang aming mga web component.

Mga Component

Section titled “Mga Component”

Basahin ang tungkol sa aming librarya ng mga component sa ibaba.

Application loader

Section titled “Application loader”

Ang loader ang responsable sa pagpapanatili ng estado at pamamahala ng interaksyon sa pagitan ng aming mga component. (Isama ito sa ibaba ng aming Javascript).

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

Content loader

Section titled “Content loader”

Ang content loader ang puso ng aming web component library. Ito ang responsable sa pagpapakita ng iyong inventory (mga card, grid, mapa).

Mga available na attribute:

  • layout
  • id
  • sort

Ang attribute na sort ay available lamang kapag ang layout ay RANKED at ayaw mong gumamit ng umiiral na ranked grid. Sa mga ganitong kaso, iwanang walang laman ang id.

Mga available na uri ng layout:

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

Mga available na uri ng sort:

  • 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>

Makikita ang mga halimbawa para sa cards, grids at maps.

Lookup

Section titled “Lookup”

Maganda ang takbo ng Lookup kapag ginagamit kasama ng isa sa iyong ranked grids. Pinapayagan nito ang iyong mga user na maghanap ng hotel at destinasyon at ang grid ay nag-a-update bilang tugon sa kanilang resulta ng paghahanap.

<html>
  <body>
    <wink-lookup></wink-lookup>
  </body>
</html>
Lookup web component
Lookup web component

Kapag klinik ang component sa itaas, magbubukas ito ng modal na nagpapahintulot sa iyo na i-type ang destinasyon o hotel na hinahanap mo.

Lookup modal
Lookup modal na may mga resulta

Itinerary

Section titled “Itinerary”

Ipinapakita ng itinerary button ang kasalukuyang itinerary sa button. Kapag klinik mo ito, ang buong itinerary picker ay ipapakita bilang modal.

<html>
  <body>
    <wink-itinerary></wink-itinerary>
  </body>
</html>
Itinerary web component
Itinerary web component

Kapag klinik ang button sa itaas, magbubukas ito ng modal na nagpapahintulot sa iyo na i-update ang iyong itinerary.

Search modal
Itinerary picker bilang modal
Section titled “Search”

Ang Search ay isang icon-only na button ng itinerary picker. Kapag klinik mo ito, ang buong itinerary picker ay ipapakita bilang modal.

<html>
  <body>
    <wink-search></wink-search>
  </body>
</html>
Search web component
Search web component

Kapag klinik ang button sa itaas, magbubukas ito ng modal na nagpapahintulot sa iyo na i-update ang iyong itinerary.

Search modal
Itinerary picker bilang modal

Itinerary form

Section titled “Itinerary form”

Ipinapakita ng itinerary component ang isang itinerary form na maaaring gamitin ng mga user.

<html>
  <body>
    <wink-itinerary-form></wink-itinerary-form>
  </body>
</html>
Itinerary formweb component
Itinerary form web component

Sa pamamagitan ng pagbabago ng itinerary, sa alinmang itinerary component namin, pinapagana nito ang itinerary update event sa anumang inventory na kasalukuyan mong ipinapakita sa pahina.

Account

Section titled “Account”

Pinapayagan ka ng account button na idagdag ang Wink authentication sa iyong site.

<html>
  <body>
    <wink-account></wink-account>
  </body>
</html>
Account web component
Account button web component

Kapag klinik ang button, kapag ang user ay hindi pa authenticated, ipapasa ang user para mag-authenticate. Kapag ang user ay authenticated na, ipinapakita nito ang profile icon ng user.

Account button when authenticated
Account button (authenticated) web component

Kapag klinik mo ang button, magbubukas ito ng user-specific dropdown.

Account button when authenticated
Account button (open) web component

I-embed ang TripPay

Section titled “I-embed ang TripPay”

May dalawang bagay na kailangan mong isama sa anumang pahina kung saan nais mong gamitin ang TripPay payment web component.

  1. Isama ang aming stylesheet.
  2. Isama ang aming Javascript.

Stylesheet

Section titled “Stylesheet”

Isama ang aming CSS styles sa head ng iyong dokumento.

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

Javascript

Section titled “Javascript”

Isama ang aming Javascript sa ibaba ng iyong dokumento. (Inirerekomenda naming ilagay ito agad sa itaas ng end <body> tag).

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

Handa na ang iyong site at kaya nang ipakita ang aming mga web component.

Mga Component

Section titled “Mga Component”

Payment

Section titled “Payment”

Pinapayagan ka ng payment component na ipaalam sa TripPay na nais ng isang traveler na bumili ng isang bagay at ang mga patakaran at presyo para sa mga item na iyon.

May isang kinakailangang attribute para sa widget:

  • id Ang identifier ng booking contract na nais mong ipatupad.
<html>
  <body>
    <trip-pay id="<INSERT_BOOKING_CONTRACT_ID>"></trip-pay>
  </body>
</html>

Inihahanda ng widget ang kontrata para sa pagpapatupad at ipinapakita ang mga detalye ng bayad (Figure 1) sa user upang tapusin ang booking.

Payment details
Figure 1. Halimbawa ng payment form

Mga Error

Section titled “Mga Error”

Kung nakakatanggap ka ng error message kapag nag-embed ng isa sa aming mga web component, alinman sa WinkLinks o sa iyong sariling website, may ilang mga bagay na maaaring nagkamali:

Availability

Section titled “Availability”

Maaaring hindi na available ang inventory. Pumunta sa Wink Studio at tingnan kung ang status ng “card” ay available. Kung hindi, ito ay lalabas na pula. Sa ganitong kaso, maaari kang maghintay at baka gawing available muli ng supplier o alisin ito sa iyong listahan.

Removed

Section titled “Removed”

Maaaring naalis ang inventory. Pumunta sa Wink Studio at tingnan kung ang status ng “card” ay available. Kung hindi, ito ay lalabas na pula. Sa ganitong kaso, maaari kang maghintay at baka gawing available muli ng supplier o alisin ito sa iyong listahan.

Customization

Section titled “Customization”

Maaaring aksidenteng naalis mo ang customization na iyong na-define para sa iyong inventory. Siguraduhing available pa rin ang customization at mag-set ng bago kung may nawawala.

Application

Section titled “Application”

Para lamang ito sa mga web developer. Kung aksidenteng naalis mo ang Application ; kaya hindi na available ang client ID, mangyaring gumawa ng bagong application at gamitin ang bagong client ID para i-embed ang aming Web Components.