Skip to content
Academy

Mga Card

Ang isang card ay kumakatawan sa isang supplier (hal. hotel o provider ng karanasan) o imbentaryo (ibig sabihin ay uri ng kuwarto, silid-pulong, spa, atbp) at ipinapakita ang mga detalye sa pamamagitan ng isang interactive, maaaring i-book na card UI. Maaaring makipag-ugnayan ang isang user sa isang card sa mga sumusunod na paraan:

  • I-click ang Book na button.
  • I-click ang Gallery na link upang makita ang lahat ng mga larawan at video para sa imbentaryong ito.
  • I-click ang Best deal na link, kung mayroon, upang makita ang pinakamurang presyo ng kuwarto.
  • I-click ang Hotel details na link, kung mayroon, upang makita ang impormasyon ng property.

Sinusuportahan ng isang card ang maraming mukha upang mabawasan ang laki ng card at upang ikategorya ang data; ginagawa itong madaling maunawaan ng user at nagbibigay sa iyo ng mas malaking pagkakataon na ma-convert ang user sa isang booking.

Ang isang card ay may dalawa o tatlong mukha:

  • Ang hotel card ay nagpapakita ng data ng property sa harap at ang pinakamahusay na uri ng kuwarto sa likod. Ang presyo, sa parehong panig, ay nagpapakita ng pinakamurang presyo para sa hotel.
  • Ang room type card ay nagpapakita ng data ng uri ng kuwarto sa harap at data ng property sa likod. Ipinapakita ang presyo ng uri ng kuwarto sa harap at ang pinakamurang presyo para sa hotel sa likod.
  • Ang lahat ng iba pang mga card (hal. spa, restaurant, atbp) ay may 3 mukha. Halimbawa: Ipinapakita ang data ng spa sa harap na pahina kasama ang pinakamurang presyo ng spa. Ang data ng uri ng kuwarto para sa pinakamurang kuwarto ay nasa pangalawang panig. Ang data ng property kasama ang pinakamurang kuwarto ay nasa ikatlong mukha ng card.
Card preview
Harap na mukha ng room type card na may availability

Nasa itaas ang isang halimbawa ng aming room type card. Naglalaman ito ng data ng property, review, at kuwarto kasama ang patakaran sa pagkansela at mga pagkain.

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

Gumawa ng card

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

Nasa itaas ang isang larawan mula sa Search at ipinapakita ang ilan sa mga bagay na maaari mong gawin sa iyong mga resulta ng paghahanap. Isa sa mga aksyon na iyon ay ang Make a card. I-click ang button na iyon at dadalhin ka nito sa aming pahina 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”

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

  1. Bigyan ito ng pangalan upang maalala mo kung tungkol saan ang card.
  2. Piliin ang Customization na nais mong ilapat sa card na ito.
  3. Piliin ang unang mukha ng card na nais mong makita ng mga user muna. Sa default, ito ang native na mukha ng imbentaryo.
  4. Piliin ang badge na nais mong gamitin sa card. Ang badge ay nagpapahintulot sa mga user na ikumpara ang imbentaryo sa isang pangkalahatang sukatan tulad ng eco-friendly.
  5. Magdagdag ng mga keyword, na pinaghiwalay ng kuwit, na gagamitin ng Web Crawlers.
  6. Magdagdag ng mga pamagat at paglalarawan sa mga wikang nais mong makita ng user.
  7. Piliin ang isa, o higit pa, mga larawan na ipapakita kapag na-click ng mga user ang Gallery na link.
  8. I-click ang Save na button upang magpatuloy.

Pagkatapos i-save ang iyong card, ikaw ay ire-redirect sa iyong pahina ng mga card at ang iyong card ay handa nang ibahagi sa buong mundo.

Ibahagi ang card

Section titled “Ibahagi ang card”
Card
Card na may nakatagong menu ng mga aksyon

Nasa itaas ang isang larawan na nagpapakita ng lahat ng magagamit na mga aksyon para sa iyong card:

  • Update Ina-update ang iyong configuration ng card.
  • Add to WinkLinks Idinadagdag ang card sa iyong WinkLinks account.
  • Embed Ipinapakita kung paano i-embed ang card na ito bilang isang Card sa iyong website.
  • Use with WordPress Ipinapakita kung paano gamitin ang aming WordPress plugin upang i-embed ang card na ito sa iyong website.

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

Embed

Section titled “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 ng Linya 3 kung paano i-embed ang mga estilo ng Wink sa iyong site.
  • Ipinapakita ng mga Linya 6 hanggang 9 kung paano gamitin ang wink-content-loader Web Component at sabihin dito na kunin ang guest room card para sa iyong code.
  • Ipinapakita ng Linya 11 kung paano i-embed ang aming Javascript sa iyong site.
  • Ipinapakita ng Linya 13 kung paano i-embed ang wink-app-loader Web Component at sabihin dito na kunin ang iyong mga preference sa configuration sa antas ng pahina.

API

Section titled “API”

Ang mga developer na nais mag-manage ng mga card ay maaaring pumunta sa Developers > API > Inventory.

Karagdagang babasahin

Section titled “Karagdagang babasahin”