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
Section titled “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
Section titled “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
Section titled “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
Section titled “Mga bahagi”Basahin ang tungkol sa aming component library sa ibaba.
Application loader
Section titled “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
Section titled “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
Section titled “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
Section titled “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>
Ang pag-click sa button sa itaas ay magbubukas ng modal na nagbibigay-daan sa iyong i-update ang iyong itinerary.
Maghanap
Section titled “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
Section titled “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>
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
Section titled “Account”Binibigyang-daan ka ng button ng account na magdagdag ng Wink authentication sa iyong site.
<html> <body> <wink-account></wink-account> </body></html>
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
Section titled “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
Section titled “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
Section titled “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
Section titled “Mga bahagi”Pagbabayad
Section titled “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.