Mga Grid

Ang grid ay kumakatawan sa isang listahan ng mga supplier at imbentaryo at ipinapakita ang mga detalye sa pamamagitan ng isang interactive, bookable, grid UI. Sinusuportahan ng grid ang pagpapakita ng anumang imbentaryo mula sa iyong curated list o saved search. Nakikipag-ugnayan ang user sa isang grid sa parehong paraan ng pakikipag-ugnayan niya sa isang indibidwal na card na may isang karagdagang tampok:

Mag-paginate sa grid sa pamamagitan ng pag-click sa Show more button (kapag may mas maraming item na magagamit).

Grid preview — *Grid na nagpapakita ng maraming uri ng kuwarto*

Nasa itaas ang 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 ipakita ang grid sa iyong mga user.

Mga uri ng Grid

May tatlong uri ng mga grid:

Grid na batay sa isang curated list.
Grid na batay sa isang saved search.
Grid na batay sa lokasyon at mga pamantayan sa pag-aayos (i.e. Ranked grid).

Curated list grid

Ito ay isang grid na gumagamit ng imbentaryo na nakolekta mo sa isa sa iyong mga curated list at kino-convert ang listahan sa bookable na travel inventory na maaari mong ipakita sa iyong mga user.

Gumawa

Pumunta sa Inventory > Curated Lists mula sa pangunahing nav bar. Sa halimbawang ito, gagamitin natin ang iyong Favorites list. Kung wala ka pang naidagdag sa iyong Favorites, pumunta sa Search upang matutunan kung paano.

Create curate list grid — *Form para gumawa ng curated list grid*

I-click ang Actions button sa Favorites list.
I-click ang Create a grid button.
Lalabas ang isang bagong window, na magpapahintulot sa iyo na pangalanan ang iyong grid. Tingnan sa ibaba.
I-click ang OK button upang magpatuloy.

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

I-customize

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

Bigyan ito ng pangalan para maalala mo kung tungkol saan ang grid.
Piliin ang Customization na nais mong ilapat sa grid na ito.
Piliin ang unang card face na nais mong makita ng mga user. Sa default, ito ang native face ng imbentaryo.
Piliin ang badge na nais mong gamitin sa card. Ang badge ay nagpapahintulot sa mga user na ikumpara ang imbentaryo sa isang aggregate metric tulad ng eco-friendly.
Magdagdag ng mga keyword, na pinaghiwalay ng kuwit, na gagamitin ng Web Crawlers.
Magdagdag ng mga pamagat at paglalarawan sa mga wikang nais mong makita ng user.
I-click ang Save button upang magpatuloy.

Ibahagi

Curated list grid — *Entry ng curated list grid na may nakatagong actions menu*

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

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

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

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 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 isang grid 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 page-level configuration preferences.

Saved search grid

Ito ay isang grid na gumagamit ng imbentaryo sa iyong saved search query at kino-convert ang mga resulta ng paghahanap sa bookable na travel inventory na maaari mong ipakita sa iyong mga user.

Gumawa

Pumunta sa Inventory > Saved searches mula sa pangunahing nav bar. Kung wala ka pang nagawang saved search, pumunta sa Search upang matutunan kung paano.

Create saved search grid — *Form para gumawa ng saved search grid*

I-click ang Actions button sa iyong saved search.
I-click ang Create a grid button.
Lalabas ang isang bagong window, na magpapahintulot sa iyo na pangalanan ang iyong grid. Tingnan sa ibaba.

I-click ang OK button upang magpatuloy.

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

I-customize

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

Bigyan ito ng pangalan para maalala mo kung tungkol saan ang grid.
Piliin ang Customization na nais mong ilapat sa grid na ito.
Piliin ang unang card face na nais mong makita ng mga user. Sa default, ito ang native face ng imbentaryo.
Piliin ang badge na nais mong gamitin sa card. Ang badge ay nagpapahintulot sa mga user na ikumpara ang imbentaryo sa isang aggregate metric tulad ng eco-friendly.
Magdagdag ng mga keyword, na pinaghiwalay ng kuwit, na gagamitin ng Web Crawlers.
Magdagdag ng mga pamagat at paglalarawan sa mga wikang nais mong makita ng user.
I-click ang Save button upang magpatuloy.

Ibahagi

Saved search grid — *Entry ng saved search grid na may nakatagong actions menu*

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 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 isang grid 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 page-level configuration preferences.

Ranked grid

Gumawa

Gumawa ng ranked grid sa pamamagitan ng pagpunta sa Tools > Grids at i-click ang Ranked Grid tab. I-click ang Create ranked grid button.

I-customize

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

Pumili ng destinasyon. Halimbawa: Tokyo.
Bigyan ito ng pangalan para maalala mo kung tungkol saan ang grid. Halimbawa: Eco-friendly hotels sa Tokyo
Piliin ang Customization na nais mong ilapat sa grid na ito.
Piliin ang unang card face na nais mong makita ng mga user. Sa default, ito ang native face ng imbentaryo.
Piliin kung anong katangian ang gagamitin sa pag-aayos ng mga property. Halimbawa: Eco-friendliness.
Magdagdag ng mga keyword, na pinaghiwalay ng kuwit, na gagamitin ng Web Crawlers.
Magdagdag ng mga pamagat at paglalarawan sa mga wikang nais mong makita ng user.
I-click ang Save button upang magpatuloy.

Pagkatapos mong i-save ang iyong ranked grid, ikaw ay ire-redirect sa iyong ranked grids page at ang iyong grid ay handa nang ibahagi sa mundo.

Ibahagi

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

Update Ina-update ang iyong grid configuration.
Add to WinkLinks Idinadagdag ang ranked grid sa iyong WinkLinks account.
Embed Ipinapakita kung paano i-embed ang grid na ito bilang isang Grid 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

<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 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 isang ranked grid 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 page-level configuration preferences.

API

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

Karagdagang babasahin

Matuto nang higit pa tungkol sa aming koleksyon ng Web Components.
Matuto nang higit pa tungkol sa Wink WordPress plugin.