Grids
Bir ızgara, tedarikçilerin ve envanterin bir listesini temsil eder ve etkileşimli, rezerve edilebilir bir ızgara kullanıcı arayüzü aracılığıyla ayrıntıları ortaya çıkarır. Izgara, düzenlenmiş listenizden veya kaydedilmiş aramanızdan herhangi bir envanteri görüntülemeyi destekler. Bir kullanıcı, bir ızgarayla, bir bireyle etkileşime girdiği şekilde etkileşime girerkartbir ek özellik ile:
- Tıklayarak ızgarada sayfalar arasında gezinin
Show more
düğme (daha fazla ürün mevcut olduğunda).
Yukarıda oda tipi kartlarının listesini gösteren bir ızgara örneği bulunmaktadır.
Bu makalenin geri kalanında, ızgaranın nasıl oluşturulacağı, özelleştirileceği ve kullanıcılarınıza nasıl sunulacağı anlatılmaktadır.
Izgara türleri
Section titled “Izgara türleri”Üç tip ızgara vardır:
- Bir ızgaraya dayalıküratörlü liste.
- Bir ızgaraya dayalıkaydedilmiş arama.
- Konum ve sıralama ölçütlerine göre grid grid (yani Sıralanmış ızgara).
Düzenlenmiş liste ızgarası
Section titled “Düzenlenmiş liste ızgarası”Bu, düzenlediğiniz listelerden birinde topladığınız envanteri kullanan ve listeyi kullanıcılarınıza gösterebileceğiniz rezervasyon yapılabilir seyahat envanterine dönüştüren bir ızgaradır.
Yaratmak
Section titled “Yaratmak”Şuraya git:Inventory > Curated Lists
ana gezinme çubuğundan. Bu örnek için, sizinkini kullanacağızFavorites
liste.
Eğer henüz bir şey eklemediysenizFavorites
, gitAramaknasıl olduğunu öğrenmek için.
- Tıkla
Actions
düğme üzerindeFavorites
liste. - Tıkla
Create a grid
düğme. - Yeni bir pencere açılacak ve bu pencerede gridinize isim verebilirsiniz. Aşağıya bakın.
- Tıklamak
OK
Devam etmek için düğmeye basın.
Izgaranız oluşturuldu. Şuraya gidin:Tools > Grids
ana gezinme çubuğundan ve tıklayınCurated Grids
Yeni ızgaranızı görmek için sekmeye tıklayın.
Özelleştirmek
Section titled “Özelleştirmek”Form, ızgaranızı aşağıdaki şekillerde özelleştirmenize olanak tanır:
- Hatırlayacağınız bir isim verin ki, ızgaranın ne hakkında olduğunu anlayasınız.
- Seçin Özelleştirme bu şebekeye başvurmak istiyorsunuz.
- Kullanıcıların ilk önce görmesini istediğiniz ilk kart yüzünü seçin. Varsayılan olarak, bu envanterin yerel yüzüdür.
- Kartta kullanmak istediğiniz rozeti seçin. Bir rozet, kullanıcıların envanteri toplu bir metrikte karşılaştırmasına olanak tanır, örneğin:
eco-friendly
. - Kullanılacak anahtar kelimeleri virgülle ayırarak ekleyin Web Tarayıcıları.
- Kullanıcının görmesini istediğiniz dillerde başlık ve açıklamalar ekleyin.
- Tıkla
Save
Devam etmek için düğmeye basın.
Paylaşmak
Section titled “Paylaşmak”Yukarıda, ızgaranız için tüm kullanılabilir eylemleri içeren bir görüntü gösterilmektedir:
- GüncellemeGrid yapılandırmanızı günceller.
- WinkLinks’e ekleIzgarayı WinkLinks hesabınıza ekler.
- GömmekBu ızgarayı bir tablo olarak nasıl yerleştireceğinizi gösterirIzgaraweb sitenize.
- WordPress ile kullanınSize nasıl kullanılacağını gösterirWordPress eklentisiBu ızgarayı web sitenize yerleştirmek için.
Bu seçeneklerden bazılarını aşağıda daha detaylı olarak ele alacağız.
Gömmek
Section titled “Gömmek”<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>
Izgaranızı sitenize nasıl yerleştireceğiniz aşağıda açıklanmıştır:
- 3. satırda Wink stillerini sitenize nasıl yerleştireceğiniz gösterilmektedir.
- 6’dan 9’a kadar olan satırlar, nasıl kullanılacağını gösterirgöz kırpma-içerik-yükleyiciWeb Bileşenine gidin ve kodunuz için bir ızgara getirmesini söyleyin.
- 11. satırda Javascript’imizi sitenize nasıl yerleştireceğiniz gösteriliyor.
- 13. satır, şunun nasıl yerleştirileceğini gösterir:göz kırpma-uygulaması-yükleyiciWeb Bileşeni’ne gidin ve sayfa düzeyindeki yapılandırma tercihlerinizi getirmesini söyleyin.
Kaydedilen arama ızgarası
Section titled “Kaydedilen arama ızgarası”Bu, kaydedilmiş arama sorgunuzdaki envanteri kullanan ve arama sonuçlarını kullanıcılarınıza gösterebileceğiniz rezervasyon yapılabilir seyahat envanterine dönüştüren bir ızgaradır.
Yaratmak
Section titled “Yaratmak”Şuraya git:Inventory > Saved searches
ana gezinme çubuğundan.
Henüz kaydedilmiş bir arama oluşturmadıysanız, şuraya gidin:Aramaknasıl olduğunu öğrenmek için.
- Tıkla
Actions
Kaydedilmiş aramanızdaki düğmesine tıklayın. - Tıkla
Create a grid
düğme. - Yeni bir pencere açılacak ve bu pencerede gridinize isim verebilirsiniz. Aşağıya bakın.
- Tıklamak
OK
Devam etmek için düğmeye basın.
Izgaranız oluşturuldu. Şuraya gidin:Tools > Grids
ana gezinme çubuğundan ve tıklayınSaved Search Grids
Yeni ızgaranızı görmek için sekmeye tıklayın.
Özelleştirmek
Section titled “Özelleştirmek”Form, ızgaranızı aşağıdaki şekillerde özelleştirmenize olanak tanır:
- Hatırlayacağınız bir isim verin ki, ızgaranın ne hakkında olduğunu anlayasınız.
- Seçin Özelleştirme bu şebekeye başvurmak istiyorsunuz.
- Kullanıcıların ilk önce görmesini istediğiniz ilk kart yüzünü seçin. Varsayılan olarak, bu envanterin yerel yüzüdür.
- Kartta kullanmak istediğiniz rozeti seçin. Bir rozet, kullanıcıların envanteri toplu bir metrikte karşılaştırmasına olanak tanır, örneğin:
eco-friendly
. - Kullanılacak anahtar kelimeleri virgülle ayırarak ekleyin Web Tarayıcıları.
- Kullanıcının görmesini istediğiniz dillerde başlık ve açıklamalar ekleyin.
- Tıkla
Save
Devam etmek için düğmeye basın.
Paylaşmak
Section titled “Paylaşmak”Gömmek
Section titled “Gömmek”<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>
Izgaranızı sitenize nasıl yerleştireceğiniz aşağıda açıklanmıştır:
- 3. satırda Wink stillerini sitenize nasıl yerleştireceğiniz gösterilmektedir.
- 6’dan 9’a kadar olan satırlar, nasıl kullanılacağını gösterirgöz kırpma-içerik-yükleyiciWeb Bileşenine gidin ve kodunuz için bir ızgara getirmesini söyleyin.
- 11. satırda Javascript’imizi sitenize nasıl yerleştireceğiniz gösteriliyor.
- 13. satır, şunun nasıl yerleştirileceğini gösterir:göz kırpma-uygulaması-yükleyiciWeb Bileşeni’ne gidin ve sayfa düzeyindeki yapılandırma tercihlerinizi getirmesini söyleyin.
Sıralama ızgarası
Section titled “Sıralama ızgarası”Yaratmak
Section titled “Yaratmak”Sıralanmış bir ızgara oluşturmak için şuraya gidin:Tools > Grids
ve üzerine tıklayınRanked Grid
sekmesi. Üzerine tıklayınCreate ranked grid
düğme.
Özelleştirmek
Section titled “Özelleştirmek”Form, sıralamalı ızgaranızı aşağıdaki şekillerde özelleştirmenize olanak tanır:
- Bir hedef seçin. Örn. Tokyo.
- Hatırlayacağınız bir isim verin ki, ızgaranın ne hakkında olduğunu anlayasınız. Örn. Tokyo’daki çevre dostu oteller
- Seçin Özelleştirme bu şebekeye başvurmak istiyorsunuz.
- Kullanıcıların ilk önce görmesini istediğiniz ilk kart yüzünü seçin. Varsayılan olarak, bu envanterin yerel yüzüdür.
- Özelliklerin hangi özelliğe göre sıralanacağını seçin. Örn. Çevre dostu olma.
- Kullanılacak anahtar kelimeleri virgülle ayırarak ekleyin Web Tarayıcıları.
- Kullanıcının görmesini istediğiniz dillerde başlık ve açıklamalar ekleyin.
- Tıkla
Save
Devam etmek için düğmeye basın.
Sıralamalı ızgaranızı kaydettikten sonra sıralanmış ızgaralar sayfanıza yönlendirileceksiniz ve ızgaranız artık dünyayla paylaşılmaya hazır.
Paylaşmak
Section titled “Paylaşmak”Yukarıda rankd gridiniz için tüm kullanılabilir eylemleri gösteren bir resim gösterilmektedir:
- GüncellemeGrid yapılandırmanızı günceller.
- WinkLinks’e ekleSıralamalı tabloyu WinkLinks hesabınıza ekler.
- GömmekBu ızgarayı bir tablo olarak nasıl yerleştireceğinizi gösterirIzgaraweb sitenize.
- WordPress ile kullanınSize nasıl kullanılacağını gösterirWordPress eklentisiBu kartı web sitenize yerleştirmek için.
Bu seçeneklerden bazılarını aşağıda daha detaylı olarak ele alacağız.
Gömmek
Section titled “Gömmek”<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>
Izgaranızı sitenize nasıl yerleştireceğiniz aşağıda açıklanmıştır:
- 3. satırda Wink stillerini sitenize nasıl yerleştireceğiniz gösterilmektedir.
- 6’dan 9’a kadar olan satırlar, nasıl kullanılacağını gösterirgöz kırpma-içerik-yükleyiciWeb Bileşenine gidin ve kodunuz için sıralanmış bir ızgara getirmesini söyleyin.
- 11. satırda Javascript’imizi sitenize nasıl yerleştireceğiniz gösteriliyor.
- 13. satır, şunun nasıl yerleştirileceğini gösterir:göz kırpma-uygulaması-yükleyiciWeb Bileşeni’ne gidin ve sayfa düzeyindeki yapılandırma tercihlerinizi getirmesini söyleyin.
Izgaraları yönetmek isteyen geliştiriciler şuraya gidebilir:Geliştiriciler > API > Envanter.
Daha fazla okuma
Section titled “Daha fazla okuma”- Koleksiyonumuz hakkında daha fazla bilgi edininWeb Bileşenleri.
- Daha fazla bilgi edininWink WordPress eklentisi.