İçeriğe geç
Academy

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

Section titled “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 kriterine dayalı ızgara (yani Sıralı ızgara).

Küratörlü liste ızgarası

Section titled “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

Section titled “Oluştur”

Ana navigasyon çubuğundan Envanter > Küratörlü Listeler bölümüne 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ız.
  4. Devam etmek için Tamam düğmesine tıklayın.

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

Özelleştir

Section titled “Ö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 envanteri çevre dostu gibi toplu bir ölçüte göre 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ş

Section titled “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 görsel bulunmaktadı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

Section titled “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ı

Section titled “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

Section titled “Oluştur”

Ana navigasyon çubuğundan Envanter > Kaydedilmiş aramalar bölümüne 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ız.
  1. Devam etmek için Tamam düğmesine tıklayın.

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

Özelleştir

Section titled “Ö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 envanteri çevre dostu gibi toplu bir ölçüte göre 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ş

Section titled “Paylaş”
Kaydedilmiş arama ızgarası
Daraltılmış eylemler menüsü ile kaydedilmiş arama ızgarası girişi

Göm

Section titled “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

Section titled “Sıralı ızgara”

Oluştur

Section titled “Oluştur”

Araçlar > Izgaralar bölümüne giderek Sıralı Izgara sekmesine tıklayın. Sıralı ızgara oluştur düğmesine tıklayın.

Özelleştir

Section titled “Ö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ş

Section titled “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 görsel bulunmaktadı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

Section titled “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

Section titled “API”

Izgaraları yönetmek isteyen geliştiriciler, Geliştiriciler > API > Envanter bölümüne gidebilirler.

Daha fazla okuma

Section titled “Daha fazla okuma”