Skip to content
Academy

Cards

Ang isang card ay kumakatawan sa iisang supplier (hal. hotel o provider ng karanasan) o imbentaryo (ibig sabihin, uri ng kuwarto, meeting room, spa atbp) at inilalantad ang mga detalye sa pamamagitan ng isang interactive, bookable, card UI. Ang isang user ay maaaring makipag-ugnayan sa isang card sa mga sumusunod na paraan:

  • I-click ang Book pindutan.
  • I-click ang Gallery link upang makita ang lahat ng larawan at video para sa imbentaryo na ito.
  • I-click Best deal link, kung available, para makita ang pinakamagandang presyong kwarto.
  • I-click Hotel details link, kung available, para makita ang impormasyon ng ari-arian.

Sinusuportahan ng isang card ang maraming mukha upang mabawasan ang laki ng card at upang maikategorya ang data; ginagawa itong madaling maubos ng user at nagbibigay sa iyo ng mas malaking pagkakataong i-convert ang user sa isang booking.

Ang isang card ay may dalawa o tatlong mukha:

  • Ipinapakita ng hotel card ang data ng property sa harap at ang pinakamagandang uri ng kuwarto sa likod. Ang presyo, sa magkabilang panig, ay nagpapakita ng pinakamagandang presyo para sa hotel.
  • Ipinapakita ng card ng uri ng kuwarto ang data ng uri ng kuwarto sa harap at data ng property sa likod. Ipinapakita ng presyo ang presyo ng uri ng kuwarto sa harap at ang pinakamagandang presyo para sa hotel sa likod.
  • Lahat ng iba pang card (hal. spa restaurant atbp) ay may 3 mukha. Halimbawa: Ipinapakita ang data ng spa sa front page na may pinakamagandang presyo ng spa. Ang data ng uri ng kuwarto para sa pinakamagandang presyong kuwarto ay nasa pangalawang bahagi. Ang data ng ari-arian kasama ang pinakamagandang presyong kuwarto ay nasa ikatlong card face.
Preview ng card
Nakaharap sa harap na room type card na may availability

Sa itaas ay isang halimbawa ng aming room type card. Naglalaman ito ng data ng ari-arian, pagsusuri at silid kasama ng patakaran sa pagkansela at mga pagkain.

Ang natitirang bahagi ng artikulong ito ay gagabay sa iyo kung paano gumawa, mag-customize at maglantad ng card sa iyong mga user.

Gumawa ng card

Section titled “Gumawa ng card”
Mga aksyon
Mga aksyon sa resulta ng paghahanap

Sa itaas ay isang larawan na kinuha mula sa Maghanap at ipinapakita sa iyo ang ilan sa mga bagay na maaari mong gawin sa iyong mga resulta ng paghahanap. Isa sa mga aksyon na iyon ay Make a card. I-click ang button na iyon at ire-redirect ka nito sa aming page ng form ng card kung saan maaari mong simulan ang pag-customize ng iyong card.

I-customize ang card

Section titled “I-customize ang card”

Hinahayaan ka ng form na i-customize ang iyong card sa mga sumusunod na paraan:

  1. Bigyan ito ng pangalan para matandaan mo kung tungkol saan ang card.
  2. Piliin ang Pagpapasadya gusto mong mag-apply sa card na ito.
  3. Piliin ang unang card face na gusto mong unang makita ng mga user. Bilang default, ito ang katutubong mukha ng imbentaryo na iyon.
  4. Piliin ang badge gusto mong gamitin sa card. Ang isang badge ay nagbibigay-daan sa mga user na maghambing ng imbentaryo sa isang pinagsama-samang sukatan gaya ng eco-friendly.
  5. Magdagdag ng mga keyword, na pinaghihiwalay ng kuwit, na gagamitin ni Mga Web Crawler.
  6. Magdagdag ng mga pamagat at paglalarawan sa mga wikang gusto mong makita ng user.
  7. Pumili ng isa, o higit pa, mga larawang ipapakita kapag nag-click ang mga user sa Gallery link.
  8. I-click ang Save pindutan upang magpatuloy.

Pagkatapos i-save ang iyong card, ire-redirect ka sa page ng iyong mga card at handa na ngayong ibahagi sa mundo ang iyong card.

Ibahagi ang card

Section titled “Ibahagi ang card”
Card
Card na may naka-collapse na menu ng mga pagkilos

Ipinapakita sa iyo sa itaas ang isang larawan kasama ang lahat ng magagamit na pagkilos para sa iyong card:

  • Update Ina-update ang configuration ng iyong card.
  • Idagdag sa WinkLinks Idinaragdag ang card sa iyong WinkLinks account.
  • I-embed Ipinapakita sa iyo kung paano i-embed ang card na ito bilang a Card sa iyong website.
  • Gamitin sa WordPress Ipinapakita sa iyo kung paano gamitin ang aming WordPress plugin upang i-embed ang card na ito sa iyong website.

Sinasaklaw namin ang ilan sa mga opsyong ito, nang mas detalyado, sa ibaba.

I-embed

Section titled “I-embed”
<html>
  <head>
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link>
  </head>
  <body>
    <wink-content-loader
       layout="GUEST_ROOM"
       id="2de7ee9c-61c9-11ef-9722-42004e494300"
    ></wink-content-loader>


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


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

Narito kung paano i-embed ang iyong card sa iyong site:

  • Ipinapakita sa iyo ng Linya 3 kung paano i-embed ang mga istilo ng Wink sa iyong site.
  • Ipinapakita sa iyo ng mga linya 6 hanggang 9 kung paano gamitin ang wink-content-loader Web Component at sabihin dito na kumuha ng guest room card para sa iyong code.
  • Ipinapakita sa iyo ng Linya 11 kung paano i-embed ang aming Javascript sa iyong site.
  • Ipinapakita sa iyo ng linya 13 kung paano i-embed ang wink-app-loader Web Component at sabihin dito na kunin ang iyong mga kagustuhan sa configuration sa antas ng page.

API

Section titled “API”

Maaaring magtungo ang mga developer na gustong mamahala ng mga card Mga Developer > API > Imbentaryo.

Karagdagang pagbabasa

Section titled “Karagdagang pagbabasa”