Skip to content

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.

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

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

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>

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.

Basahin ang tungkol sa aming component library sa ibaba.

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>

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.

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>
Maghanap ng bahagi ng web
Maghanap ng bahagi ng web

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.

Lookup modal
Lookup modal na may mga resulta

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

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>
Search web component
Search 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

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.

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.

Button ng account kapag na-authenticate
Button ng account (na-authenticate) na bahagi ng web

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

Button ng account kapag na-authenticate
Button ng account (bukas) bahagi ng web

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

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

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>

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.

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.

Mga detalye ng pagbabayad
Figure 1. Sample na form ng pagbabayad