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

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ı

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

Ş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*

Tıkla Actions düğme üzerinde Favorites 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 > Gridsana gezinme çubuğundan ve tıklayınCurated GridsYeni ızgaranızı görmek için sekmeye tıklayın.

Ö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

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.

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ı

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

Ş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*

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

Ö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

Kaydedilen arama ızgarası — *Daraltılmış eylem menüsüyle kaydedilmiş arama ızgarası girişi*

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ı

Yaratmak

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.

Ö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

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.

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.

API

Izgaraları yönetmek isteyen geliştiriciler şuraya gidebilir:Geliştiriciler > API > Envanter.

Daha fazla okuma

Koleksiyonumuz hakkında daha fazla bilgi edininWeb Bileşenleri.
Daha fazla bilgi edininWink WordPress eklentisi.