İçeriğe geç
Wink

Izgaralar

Bir ızgara, tedarikçi ve envanter listesini temsil eder ve detayları etkileşimli, rezervasyon yapılabilir bir ızgara kullanıcı arayüzü aracılığıyla sunar. Izgara, küratörlü listenizden veya kaydedilmiş aramanızdan herhangi bir envanteri görüntülemeyi destekler. Bir kullanıcı, bir ızgarayla, bir bireysel kart ile etkileşim kurduğu şekilde etkileşim kurar, ancak ek bir özellik vardır:

  1. Daha fazla göster düğmesine tıklayarak ızgarada sayfalama yapabilir (daha fazla öğe mevcutsa).
Izgara önizlemesi
Birden fazla oda tipi gösteren ızgara

Yukarıda, oda tipi kartlarının bir listesini gösteren ızgara örneğimiz yer almaktadır.

Bu makalenin geri kalanı, ızgarayı nasıl oluşturacağınızı, özelleştireceğinizi ve kullanıcılarınıza nasıl sunacağınızı adım adım anlatır.

Izgara türleri

Bölüm başlığı “Izgara türleri”

Üç tür ızgara vardır:

  1. Küratörlü liste tabanlı ızgara.
  2. Kaydedilmiş arama tabanlı ızgara.
  3. Konum ve sıralama kriterlerine dayalı ızgara (yani Sıralı ızgara).

Küratörlü liste ızgarası

Bölüm başlığı “Küratörlü liste ızgarası”

Bu, küratörlü listelerinizden 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.

Oluştur

Bölüm başlığı “Oluştur”

Ana navigasyon çubuğundan Envanter > Küratörlü Listelere gidin. Bu örnek için Favoriler listenizi kullanacağız. Henüz Favoriler listenize bir şey eklemediyseniz, nasıl yapılacağını öğrenmek için Arama sayfasına gidin.

Küratörlü liste ızgarası oluştur
Küratörlü liste ızgarası oluşturma formu
  1. Favoriler listesindeki Eylemler düğmesine tıklayın.
  2. Bir ızgara oluştur düğmesine tıklayın.
  3. Izgaranıza isim vermenizi sağlayan yeni bir pencere açılacaktır. Aşağıya bakın.
  4. Devam etmek için Tamam düğmesine tıklayın.

Izgaranız oluşturuldu. Ana navigasyon çubuğundan Araçlar > Izgaralara gidin ve yeni ızgaranızı görmek için Küratörlü Izgaralar sekmesine tıklayın.

Özelleştir

Bölüm başlığı “Özelleştir”

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

  1. Izgaranızın ne hakkında olduğunu hatırlamanız için bir isim verin.
  2. Bu ızgaraya uygulamak istediğiniz Özelleştirmeyi seçin.
  3. Kullanıcıların ilk olarak görmesini istediğiniz başlangıç kart yüzünü seçin. Varsayılan olarak, envanterin yerel yüzüdür.
  4. Kartta kullanmak istediğiniz rozeti seçin. Rozet, kullanıcıların çevre dostu gibi toplu bir ölçüte göre envanteri karşılaştırmasını sağlar.
  5. Web Tarayıcıları tarafından kullanılacak, virgülle ayrılmış anahtar kelimeler ekleyin.
  6. Kullanıcının görmesini istediğiniz dillerde başlıklar ve açıklamalar ekleyin.
  7. Devam etmek için Kaydet düğmesine tıklayın.

Paylaş

Bölüm başlığı “Paylaş”
Küratörlü liste ızgarası
Daraltılmış eylemler menüsü ile küratörlü liste ızgarası girişi

Yukarıda, ızgaranız için mevcut tüm eylemleri gösteren bir resim yer almaktadır:

  • Güncelle Izgara yapılandırmanızı günceller.
  • WinkLinks’e Ekle Izgarayı WinkLinks hesabınıza ekler.
  • Göm Bu ızgarayı web sitenize Izgara olarak nasıl gömeceğinizi gösterir.
  • WordPress ile Kullan Bu ızgarayı web sitenize gömmek için WordPress eklentimizi nasıl kullanacağınızı gösterir.

Bu seçeneklerden bazılarını aşağıda daha ayrıntılı olarak ele alıyoruz.

Göm

Bölüm başlığı “Göm”
<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 gömmek için:

    1. satır, Wink stillerini sitenize nasıl gömeceğinizi gösterir.
  • 6 ile 9. satırlar, wink-content-loader Web Bileşenini nasıl kullanacağınızı ve kodunuz için bir ızgara getirmesini nasıl söyleyeceğinizi gösterir.
    1. satır, Javascript’imizi sitenize nasıl gömeceğinizi gösterir.
    1. satır, wink-app-loader Web Bileşenini nasıl gömeceğinizi ve sayfa düzeyi yapılandırma tercihlerinizi nasıl getirmesini söyleyeceğinizi gösterir.

Kaydedilmiş arama ızgarası

Bölüm başlığı “Kaydedilmiş 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.

Oluştur

Bölüm başlığı “Oluştur”

Ana navigasyon çubuğundan Envanter > Kaydedilmiş aramalara gidin. Henüz kaydedilmiş bir arama oluşturmadıysanız, nasıl yapılacağını öğrenmek için Arama sayfasına gidin.

Kaydedilmiş arama ızgarası oluştur
Kaydedilmiş arama ızgarası oluşturma formu
  1. Kaydedilmiş aramanızdaki Eylemler düğmesine tıklayın.
  2. Bir ızgara oluştur düğmesine tıklayın.
  3. Izgaranıza isim vermenizi sağlayan yeni bir pencere açılacaktır. Aşağıya bakın.
  1. Devam etmek için Tamam düğmesine tıklayın.

Izgaranız oluşturuldu. Ana navigasyon çubuğundan Araçlar > Izgaralara gidin ve yeni ızgaranızı görmek için Kaydedilmiş Arama Izgaraları sekmesine tıklayın.

Özelleştir

Bölüm başlığı “Özelleştir”

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

  1. Izgaranızın ne hakkında olduğunu hatırlamanız için bir isim verin.
  2. Bu ızgaraya uygulamak istediğiniz Özelleştirmeyi seçin.
  3. Kullanıcıların ilk olarak görmesini istediğiniz başlangıç kart yüzünü seçin. Varsayılan olarak, envanterin yerel yüzüdür.
  4. Kartta kullanmak istediğiniz rozeti seçin. Rozet, kullanıcıların çevre dostu gibi toplu bir ölçüte göre envanteri karşılaştırmasını sağlar.
  5. Web Tarayıcıları tarafından kullanılacak, virgülle ayrılmış anahtar kelimeler ekleyin.
  6. Kullanıcının görmesini istediğiniz dillerde başlıklar ve açıklamalar ekleyin.
  7. Devam etmek için Kaydet düğmesine tıklayın.

Paylaş

Bölüm başlığı “Paylaş”
Kaydedilmiş arama ızgarası
Daraltılmış eylemler menüsü ile kaydedilmiş arama ızgarası girişi

Göm

Bölüm başlığı “Göm”
<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 gömmek için:

    1. satır, Wink stillerini sitenize nasıl gömeceğinizi gösterir.
  • 6 ile 9. satırlar, wink-content-loader Web Bileşenini nasıl kullanacağınızı ve kodunuz için bir ızgara getirmesini nasıl söyleyeceğinizi gösterir.
    1. satır, Javascript’imizi sitenize nasıl gömeceğinizi gösterir.
    1. satır, wink-app-loader Web Bileşenini nasıl gömeceğinizi ve sayfa düzeyi yapılandırma tercihlerinizi nasıl getirmesini söyleyeceğinizi gösterir.

Sıralı ızgara

Bölüm başlığı “Sıralı ızgara”

Oluştur

Bölüm başlığı “Oluştur”

Araçlar > Izgaralara giderek ve Sıralı Izgara sekmesine tıklayarak sıralı bir ızgara oluşturun. Sıralı ızgara oluştur düğmesine tıklayın.

Özelleştir

Bölüm başlığı “Özelleştir”

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

  1. Bir destinasyon seçin. Örn. Tokyo.
  2. Izgaranızın ne hakkında olduğunu hatırlamanız için bir isim verin. Örn. Tokyo’daki çevre dostu oteller
  3. Bu ızgaraya uygulamak istediğiniz Özelleştirmeyi seçin.
  4. Kullanıcıların ilk olarak görmesini istediğiniz başlangıç kart yüzünü seçin. Varsayılan olarak, envanterin yerel yüzüdür.
  5. Mülkleri hangi özelliğe göre sıralamak istediğinizi seçin. Örn. Çevre dostu olma.
  6. Web Tarayıcıları tarafından kullanılacak, virgülle ayrılmış anahtar kelimeler ekleyin.
  7. Kullanıcının görmesini istediğiniz dillerde başlıklar ve açıklamalar ekleyin.
  8. Devam etmek için Kaydet düğmesine tıklayın.

Sıralı ızgaranızı kaydettikten sonra, sıralı ızgaralar sayfanıza yönlendirilirsiniz ve ızgaranız artık dünyayla paylaşılmaya hazırdır.

Paylaş

Bölüm başlığı “Paylaş”
Sıralı ızgara
Daraltılmış eylemler menüsü ile sıralı ızgara

Yukarıda, sıralı ızgaranız için mevcut tüm eylemleri gösteren bir resim yer almaktadır:

  • Güncelle Izgara yapılandırmanızı günceller.
  • WinkLinks’e Ekle Sıralı ızgarayı WinkLinks hesabınıza ekler.
  • Göm Bu ızgarayı web sitenize Izgara olarak nasıl gömeceğinizi gösterir.
  • WordPress ile Kullan Bu kartı web sitenize gömmek için WordPress eklentimizi nasıl kullanacağınızı gösterir.

Bu seçeneklerden bazılarını aşağıda daha ayrıntılı olarak ele alıyoruz.

Göm

Bölüm başlığı “Göm”
<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 gömmek için:

    1. satır, Wink stillerini sitenize nasıl gömeceğinizi gösterir.
  • 6 ile 9. satırlar, wink-content-loader Web Bileşenini nasıl kullanacağınızı ve kodunuz için sıralı bir ızgara getirmesini nasıl söyleyeceğinizi gösterir.
    1. satır, Javascript’imizi sitenize nasıl gömeceğinizi gösterir.
    1. satır, wink-app-loader Web Bileşenini nasıl gömeceğinizi ve sayfa düzeyi yapılandırma tercihlerinizi nasıl getirmesini söyleyeceğinizi gösterir.

API

Bölüm başlığı “API”

Izgaraları yönetmek isteyen geliştiriciler, Geliştiriciler > API > Envanter sayfasına gidebilirler.

Daha fazla okuma

Bölüm başlığı “Daha fazla okuma”