İçeriğe geç

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:

  1. Tıklayarak ızgarada sayfalar arasında gezininShow more düğme (daha fazla ürün mevcut olduğunda).
Izgara önizlemesi
Birden fazla oda tipini gösteren ızgara

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.

Üç tip ızgara vardır:

  1. Bir ızgaraya dayalıküratörlü liste.
  2. Bir ızgaraya dayalıkaydedilmiş arama.
  3. Konum ve sıralama ölçütlerine göre grid grid (yani Sıralanmış ızgara).

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.

Şuraya git:Inventory > Curated Listsana gezinme çubuğundan. Bu örnek için, sizinkini kullanacağızFavoritesliste. Eğer henüz bir şey eklemediysenizFavorites, gitAramaknasıl olduğunu öğrenmek için.

Küratörlük listesi ızgarası oluştur
Düzenlenmiş liste ızgara formu oluştur
  1. Tıkla Actions düğme üzerinde Favorites liste.
  2. Tıkla Create a grid düğme.
  3. Yeni bir pencere açılacak ve bu pencerede gridinize isim verebilirsiniz. Aşağıya bakın.
  4. Tıklamak OK Devam etmek için düğmeye basın.

Izgaranız oluşturuldu. Şuraya gidin:Tools > Gridsana gezinme çubuğundan ve tıklayınCurated GridsYeni ızgaranızı görmek için sekmeye tıklayın.

Form, ızgaranızı aşağıdaki şekillerde özelleştirmenize olanak tanır:

  1. Hatırlayacağınız bir isim verin ki, ızgaranın ne hakkında olduğunu anlayasınız.
  2. Seçin Özelleştirme bu şebekeye başvurmak istiyorsunuz.
  3. 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.
  4. 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.
  5. Kullanılacak anahtar kelimeleri virgülle ayırarak ekleyin Web Tarayıcıları.
  6. Kullanıcının görmesini istediğiniz dillerde başlık ve açıklamalar ekleyin.
  7. Tıkla Save Devam etmek için düğmeye basın.
Düzenlenmiş liste ızgarası
Daraltılmış eylem menüsüyle düzenlenmiş liste ızgara girişi

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.

<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.

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.

Şuraya git:Inventory > Saved searchesana gezinme çubuğundan. Henüz kaydedilmiş bir arama oluşturmadıysanız, şuraya gidin:Aramaknasıl olduğunu öğrenmek için.

Kaydedilmiş arama ızgarası oluştur
Kaydedilmiş arama ızgarası formunu oluştur
  1. Tıkla Actions Kaydedilmiş aramanızdaki düğmesine tıklayın.
  2. Tıkla Create a grid düğme.
  3. Yeni bir pencere açılacak ve bu pencerede gridinize isim verebilirsiniz. Aşağıya bakın.
  1. Tıklamak OKDevam etmek için düğmeye basın.

Izgaranız oluşturuldu. Şuraya gidin:Tools > Gridsana gezinme çubuğundan ve tıklayınSaved Search GridsYeni ızgaranızı görmek için sekmeye tıklayın.

Form, ızgaranızı aşağıdaki şekillerde özelleştirmenize olanak tanır:

  1. Hatırlayacağınız bir isim verin ki, ızgaranın ne hakkında olduğunu anlayasınız.
  2. Seçin Özelleştirme bu şebekeye başvurmak istiyorsunuz.
  3. 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.
  4. 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.
  5. Kullanılacak anahtar kelimeleri virgülle ayırarak ekleyin Web Tarayıcıları.
  6. Kullanıcının görmesini istediğiniz dillerde başlık ve açıklamalar ekleyin.
  7. Tıkla Save Devam etmek için düğmeye basın.
Kaydedilen arama ızgarası
Daraltılmış eylem menüsüyle kaydedilmiş arama ızgarası girişi
<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ıralanmış bir ızgara oluşturmak için şuraya gidin:Tools > Gridsve üzerine tıklayınRanked Gridsekmesi. Üzerine tıklayınCreate ranked grid düğme.

Form, sıralamalı ızgaranızı aşağıdaki şekillerde özelleştirmenize olanak tanır:

  1. Bir hedef seçin. Örn. Tokyo.
  2. Hatırlayacağınız bir isim verin ki, ızgaranın ne hakkında olduğunu anlayasınız. Örn. Tokyo’daki çevre dostu oteller
  3. Seçin Özelleştirme bu şebekeye başvurmak istiyorsunuz.
  4. 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.
  5. Özelliklerin hangi özelliğe göre sıralanacağını seçin. Örn. Çevre dostu olma.
  6. Kullanılacak anahtar kelimeleri virgülle ayırarak ekleyin Web Tarayıcıları.
  7. Kullanıcının görmesini istediğiniz dillerde başlık ve açıklamalar ekleyin.
  8. 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.

Sıralama ızgarası
Daraltılmış eylem menüsüne sahip sıralı bir ızgara

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.

<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.