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:
- Paginate sa pamamagitan ng grid sa pamamagitan ng pag-click sa
Show more
pindutan (kapag marami pang item ang available).
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:
- Grid batay sa a na-curate na listahan.
- Grid batay sa a naka-save na paghahanap.
- 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.
- I-click ang
Actions
pindutan saFavorites
listahan. - I-click ang
Create a grid
pindutan. - May lalabas na bagong window, na magbibigay-daan sa iyong pangalanan ang iyong grid. Tingnan sa ibaba.
- 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:
- Bigyan ito ng pangalan para matandaan mo kung tungkol saan ang grid.
- Piliin ang Pagpapasadya gusto mong mag-apply sa grid na ito.
- Piliin ang unang card face na gusto mong unang makita ng mga user. Bilang default, ito ang katutubong mukha ng imbentaryo na iyon.
- 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
. - Magdagdag ng mga keyword, na pinaghihiwalay ng kuwit, na gagamitin ni Mga Web Crawler.
- Magdagdag ng mga pamagat at paglalarawan sa mga wikang gusto mong makita ng user.
- I-click ang
Save
pindutan upang magpatuloy.
Ibahagi
Section titled “Ibahagi”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.
- I-click ang
Actions
button sa iyong naka-save na paghahanap. - I-click ang
Create a grid
pindutan. - May lalabas na bagong window, na magbibigay-daan sa iyong pangalanan ang iyong grid. Tingnan sa ibaba.
- 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:
- Bigyan ito ng pangalan para matandaan mo kung tungkol saan ang grid.
- Piliin ang Pagpapasadya gusto mong mag-apply sa grid na ito.
- Piliin ang unang mukha ng card na gusto mong unang makita ng mga user. Bilang default, ito ang katutubong mukha ng imbentaryo na iyon.
- 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
. - Magdagdag ng mga keyword, na pinaghihiwalay ng kuwit, na gagamitin ni Mga Web Crawler.
- Magdagdag ng mga pamagat at paglalarawan sa mga wikang gusto mong makita ng user.
- I-click ang
Save
pindutan upang magpatuloy.
Ibahagi
Section titled “Ibahagi”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:
- Pumili ng destinasyon. Hal. Tokyo.
- Bigyan ito ng pangalan para matandaan mo kung tungkol saan ang grid. Hal. Mga Eco-friendly na hotel sa Tokyo
- Piliin ang Pagpapasadya gusto mong mag-apply sa grid na ito.
- Piliin ang unang mukha ng card na gusto mong unang makita ng mga user. Bilang default, ito ang katutubong mukha ng imbentaryo na iyon.
- Piliin kung anong katangian ang pag-uuri-uriin ayon sa mga katangian. Hal. Eco-friendly.
- Magdagdag ng mga keyword, na pinaghihiwalay ng kuwit, na gagamitin ni Mga Web Crawler.
- Magdagdag ng mga pamagat at paglalarawan sa mga wikang gusto mong makita ng user.
- 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”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.
Maaaring magtungo ang mga developer na gustong pamahalaan ang mga grid Mga Developer > API > Imbentaryo.
Karagdagang pagbabasa
Section titled “Karagdagang pagbabasa”- Matuto nang higit pa tungkol sa aming koleksyon ng Mga Bahagi ng Web.
- Matuto pa tungkol sa Wink WordPress plugin.