Mga Bahagi ng Web

Mga Bahagi ng Web ay isang pamantayan na nagbibigay-daan sa iyong isama ang buong mga tampok ng Javascript sa iyong website nang hindi alam kung paano mag-code. Salamat sa cool na teknolohiyang ito, hinahayaan ka nitong i-embed ang imbentaryo ng paglalakbay ng Wink nang may kaunting kaguluhan. Tinutulungan ka ng artikulong ito sa aming koleksyon ng mga bahagi ng web at ipinapakita sa iyo kung paano gamitin ang mga ito.

I-embed ang Wink

May tatlong bagay na kailangan mong isama sa anumang pahina kung saan mo gustong ipakita ang isa sa aming mga bahagi sa web.

Isama ang aming stylesheet.
Isama ang aming Javascript.
Isama ang aming application loader.

Stylesheet

Isama ang aming mga istilo ng CSS sa ulo ng iyong dokumento.

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

JavaScript

Isama ang aming Javascript sa ibaba ng iyong dokumento. (Inirerekomenda namin kaagad sa itaas ng end body tag).

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

Ang iyong site ay handa na at magagawang ipakita ang aming mga bahagi sa web.

Mga bahagi

Basahin ang tungkol sa aming component library sa ibaba.

Application loader

Ang loader ay responsable para sa pagpapanatili ng estado at pamamahala ng pakikipag-ugnayan sa pagitan ng aming mga bahagi. (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>

Tagakarga ng nilalaman

Ang content loader ay nasa puso ng aming web component library. Responsable ito sa pagpapakita ng iyong imbentaryo (mga card, grid, mapa).

Magagamit na mga katangian:

layout
id
uri

Ang katangian sort ay magagamit lamang kapag ang layout ay RANKED at hindi mo gustong gumamit ng kasalukuyang ranggo na grid. Para sa mga kasong ito, umalis id walang laman.

Magagamit na mga 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 pag-uuri:

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>

Maaaring mahanap ang mga sample para sa mga card, mga grids at mga mapa.

Paghahanap

Mahusay na gumagana ang Lookup kasama ng isa sa iyong mga ranggo na grid. Hinahayaan nito ang iyong mga user na maghanap ng hotel at destinasyon at ang mga pag-update ng grid bilang tugon sa kanilang resulta ng paghahanap.

<html>
  <body>
    <wink-lookup></wink-lookup>
  </body>
</html>

Ang pag-click sa bahagi sa itaas ay magbubukas ng modal na nagbibigay-daan sa iyong mag-type sa destinasyon o hotel na iyong hinahanap.

Itinerary

Ang itinerary button ay nagpapakita ng kasalukuyang itinerary sa button. Kapag na-click mo ito, ipapakita ang buong itinerary picker bilang modal.

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

Itinerary web component

Ang pag-click sa button sa itaas ay magbubukas ng modal na nagbibigay-daan sa iyong i-update ang iyong itinerary.

Paghahanap ng modal — *Tagapili ng itinerary bilang modal*

Maghanap

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

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

Ang pag-click sa button sa itaas ay magbubukas ng modal na nagbibigay-daan sa iyong i-update ang iyong itinerary.

Itinerary form

Ang bahagi ng itinerary ay nagpapakita ng isang itinerary form na maaaring makipag-ugnayan ang mga user.

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

Itinerary formweb component — *Itinerary form na bahagi ng web*

Sa pamamagitan ng pagpapalit ng itineraryo, sa alinman sa aming bahagi ng itineraryo, nati-trigger ang kaganapan sa pag-update ng itineraryo sa anumang imbentaryo na kasalukuyan mong ipinapakita sa pahina.

Account

Binibigyang-daan ka ng button ng account na magdagdag ng Wink authentication sa iyong site.

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

Bahagi ng web ng account — *Button ng account sa web component*

Ang pag-click sa button, kapag hindi napatotohanan ang user, ay ipapasa ang user upang mapatotohanan. Kapag napatotohanan ang user, ipinapakita nito ang icon ng profile ng user.

Kapag nag-click ka sa button, magbubukas ito ng dropdown na partikular sa user.

I-embed ang TripPay

Mayroong dalawang bagay na kailangan mong isama sa anumang page kung saan mo gustong gamitin ang bahagi ng web ng pagbabayad sa TripPay.

Isama ang aming stylesheet.
Isama ang aming Javascript.

Stylesheet

Isama ang aming mga istilo ng CSS sa ulo ng iyong dokumento.

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

JavaScript

Isama ang aming Javascript sa ibaba ng iyong dokumento. (Inirerekomenda namin kaagad sa itaas ng end body tag).

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

Ang iyong site ay handa na at magagawang ipakita ang aming mga bahagi sa web.

Mga bahagi

Pagbabayad

Hinahayaan ka ng bahagi ng pagbabayad na ipaalam sa TripPay na may gustong bilhin ang isang manlalakbay at ang mga panuntunan at presyo para sa mga item na iyon.

Mayroong isang kinakailangang katangian sa widget:

id Ang identifier ng kontrata sa pag-book na gusto mong ipatupad.

<html>
  <body>
    <trip-pay id="<INSERT_BOOKING_CONTRACT_ID>"></trip-pay>
  </body>
</html>

Upang matutunan kung paano bumuo ng kontrata sa pagpapareserba id, basahin ang gabay: Pagsasama sa TripPay.

Inihahanda ng widget ang kontrata para sa pagpapatupad at ipinapakita ang mga detalye ng pagbabayad (Larawan 1) sa user para tapusin ang booking.