Skip to content
Academy

Grids

Kinakatawan ng grid ang isang listahan ng mga supplier at imbentaryo at inilalantad ang mga detalye sa pamamagitan ng interactive, bookable, grid UI. Sinusuportahan ng grid ang pagpapakita ng anumang imbentaryo mula sa iyong na-curate na listahan o naka-save na paghahanap. Nakikipag-ugnayan ang isang user sa isang grid sa parehong paraan ng pakikipag-ugnayan niya sa isang indibidwal card na may isang karagdagang tampok:

  1. Paginate sa pamamagitan ng grid sa pamamagitan ng pag-click sa Show more pindutan (kapag marami pang item ang available).
Preview ng grid
Grid na nagpapakita ng maraming uri ng kuwarto

Sa itaas ay isang halimbawa ng aming grid na nagpapakita ng listahan ng mga card ng uri ng kuwarto.

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

Mga uri ng grid

Section titled “Mga uri ng grid”

May tatlong uri ng grids:

  1. Grid batay sa a na-curate na listahan.
  2. Grid batay sa a naka-save na paghahanap.
  3. Grid grid batay sa isang lokasyon at pamantayan sa pag-uuri (ibig sabihin, ranggo na grid).

Na-curate na grid ng listahan

Section titled “Na-curate na grid ng listahan”

Ito ay isang grid na gumagamit ng imbentaryo na nakolekta mo sa isa sa iyong mga na-curate na listahan at kino-convert ang listahan sa nabu-book na imbentaryo ng paglalakbay na maaari mong ipakita sa iyong mga user.

Lumikha

Section titled “Lumikha”

Mag-navigate sa Inventory > Curated Lists mula sa pangunahing nav bar. Para sa halimbawang ito, gagamitin namin ang iyong Favorites listahan. Kung wala ka pang naidagdag sa iyong Favorites, pumunta sa Maghanap para matutunan kung paano.

Gumawa ng curate list grid
Lumikha ng na-curate na form ng grid ng listahan
  1. I-click ang Actions pindutan sa Favorites listahan.
  2. I-click ang Create a grid pindutan.
  3. May lalabas na bagong window, na magbibigay-daan sa iyong pangalanan ang iyong grid. Tingnan sa ibaba.
  4. I-click OK pindutan upang magpatuloy.

Nagawa na ang iyong grid. Mag-navigate sa Tools > Grids mula sa pangunahing nav bar at i-click ang Curated Grids tab upang makita ang iyong bagong grid.

I-customize

Section titled “I-customize”

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

  1. Bigyan ito ng pangalan para matandaan mo kung tungkol saan ang grid.
  2. Piliin ang Pagpapasadya gusto mong mag-apply sa grid 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 na 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. I-click ang Save pindutan upang magpatuloy.

Ibahagi

Section titled “Ibahagi”
Na-curate na grid ng listahan
Na-curate ang entry ng grid ng listahan na may mga naka-collapse na menu ng pagkilos

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

  • Update Ina-update ang configuration ng iyong grid.
  • Idagdag sa WinkLinks Idinaragdag ang grid sa iyong WinkLinks account.
  • I-embed Ipinapakita sa iyo kung paano i-embed ang grid na ito bilang a Grid sa iyong website.
  • Gamitin sa WordPress Ipinapakita sa iyo kung paano gamitin ang aming WordPress plugin upang i-embed ang grid 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="LIST"
       id="9a212b5e-62a7-11ef-ac3f-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 grid 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 grid 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.

Naka-save na grid ng paghahanap

Section titled “Naka-save na grid ng paghahanap”

Ito ay isang grid na gumagamit ng imbentaryo sa iyong naka-save na query sa paghahanap at kino-convert ang mga resulta ng paghahanap sa nabu-book na imbentaryo ng paglalakbay na maaari mong ipakita sa iyong mga user.

Lumikha

Section titled “Lumikha”

Mag-navigate sa Inventory > Saved searches mula sa pangunahing nav bar. Kung hindi ka pa nakakagawa ng naka-save na paghahanap, pumunta sa Maghanap para matutunan kung paano.

Lumikha ng naka-save na grid ng paghahanap
Lumikha ng naka-save na form ng grid ng paghahanap
  1. I-click ang Actions button sa iyong naka-save na paghahanap.
  2. I-click ang Create a grid pindutan.
  3. May lalabas na bagong window, na magbibigay-daan sa iyong pangalanan ang iyong grid. Tingnan sa ibaba.
  1. I-click OK pindutan upang magpatuloy.

Nagawa na ang iyong grid. Mag-navigate sa Tools > Grids mula sa pangunahing nav bar at i-click ang Saved Search Grids tab upang makita ang iyong bagong grid.

I-customize

Section titled “I-customize”

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

  1. Bigyan ito ng pangalan para matandaan mo kung tungkol saan ang grid.
  2. Piliin ang Pagpapasadya gusto mong mag-apply sa grid na ito.
  3. Piliin ang unang mukha ng card na gusto mong unang makita ng mga user. Bilang default, ito ang katutubong mukha ng imbentaryo na iyon.
  4. Piliin ang badge na 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. I-click ang Save pindutan upang magpatuloy.

Ibahagi

Section titled “Ibahagi”
Naka-save na grid ng paghahanap
Naka-save na entry sa grid ng paghahanap na may na-collapse na menu ng mga pagkilos

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="LIST"
       id="be3130d5-62a7-11ef-ac3f-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 grid 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 grid 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.

Niranggo ang grid

Section titled “Niranggo ang grid”

Lumikha

Section titled “Lumikha”

Lumikha ng isang ranggo na grid sa pamamagitan ng pag-navigate sa Tools > Grids at i-click ang Ranked Grid tab. Mag-click sa Create ranked grid pindutan.

I-customize

Section titled “I-customize”

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

  1. Pumili ng destinasyon. Hal. Tokyo.
  2. Bigyan ito ng pangalan para matandaan mo kung tungkol saan ang grid. Hal. Mga Eco-friendly na hotel sa Tokyo
  3. Piliin ang Pagpapasadya gusto mong mag-apply sa grid na ito.
  4. Piliin ang unang mukha ng card na gusto mong unang makita ng mga user. Bilang default, ito ang katutubong mukha ng imbentaryo na iyon.
  5. Piliin kung anong katangian ang pag-uuri-uriin ayon sa mga katangian. Hal. Eco-friendly.
  6. Magdagdag ng mga keyword, na pinaghihiwalay ng kuwit, na gagamitin ni Mga Web Crawler.
  7. Magdagdag ng mga pamagat at paglalarawan sa mga wikang gusto mong makita ng user.
  8. I-click ang Save pindutan upang magpatuloy.

Pagkatapos i-save ang iyong ranggo na grid, ma-redirect ka sa iyong pahina ng mga ranggo na grid at ang iyong grid ay handa na ngayong ibahagi sa mundo.

Ibahagi

Section titled “Ibahagi”
Niranggo ang grid
Isang ranggo na grid na may mga na-collapse na menu ng mga pagkilos

Ipinapakita sa iyo sa itaas ang isang larawan kasama ang lahat ng magagamit na mga aksyon para sa iyong ranggo na grid:

  • Update Ina-update ang configuration ng iyong grid.
  • Idagdag sa WinkLinks Nagdaragdag ng ranggo na grid sa iyong WinkLinks account.
  • I-embed Ipinapakita sa iyo kung paano i-embed ang grid na ito bilang a Grid 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="RANKED"
       id="2483d55e-62a5-11ef-ac3f-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 grid 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 ranggo na grid 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 pamahalaan ang mga grid Mga Developer > API > Imbentaryo.

Karagdagang pagbabasa

Section titled “Karagdagang pagbabasa”