Shopify Liquid Kodları ile Dinamik Ürün Filtreleme Özelliği Ekleme

Shopify Liquid Nedir?

Liquid, Shopify tarafından geliştirilen açık kaynaklı bir şablon dilidir. HTML ile birlikte kullanılarak dinamik içerik oluşturmayı sağlar. Mağaza tasarımınızı özelleştirirken Liquid kodları ile veri ve içerik yönetimini kolaylaştırabilirsiniz.

Dinamik Ürün Filtreleme Neden Önemlidir?

Kullanıcılar aradıkları ürünleri hızlıca bulmak isterler. Dinamik filtreleme, ürünleri kategori, fiyat, renk gibi özelliklere göre anlık filtreleyerek alışveriş deneyimini geliştirir ve dönüşüm oranlarını artırır.

Filtreleme Özelliği İçin Gerekli Hazırlıklar

Öncelikle ürün koleksiyonlarınızda doğru metafield’lar ve etiketlerin kullanılması gerekir. Shopify yönetim panelinde ürün özelliklerinizi iyi tanımlayın. Ayrıca temanızın filtreleme için uygun yapıda olduğundan emin olun.

Liquid Kodları ile Filtreleme Alanı Oluşturma

Liquid kullanarak ürün listeleme sayfanıza filtrasyon alanları ekleyebilirsiniz. Örneğin, koleksiyon sayfasında fiyat, renk ve beden gibi filtre seçeneklerini döngülerle listeleyerek kullanıcıya sunabilirsiniz.

{% assign colors = 'Kırmızı,Mavi,Yeşil,Siyah' | split: ',' %}

  {% for color in colors %}
    

      
      {% raw %}{% endraw %}{{ color }}{% raw %}{% endraw %}
    
  {% endfor %}

Filtreleme Mantığını JavaScript ile Güçlendirme

Liquid statik içerik üretirken, filtrelerin anlık çalışması için JavaScript gereklidir. Kullanıcı seçimlerini dinleyip ürünleri filtreleyerek sayfa yenilenmeden sonuçların gösterilmesini sağlayabilirsiniz.

document.querySelectorAll('input[name="color"]').forEach(checkbox => {
  checkbox.addEventListener('change', () => {
    // Filtreleme fonksiyonu çağrılır
    filterProducts();
  });
});
function filterProducts() {
const selectedColors = Array.from(document.querySelectorAll(‘input[name=“color”]:checked’)).map(el => el.value);
document.querySelectorAll(‘.product-item’).forEach(item => {
const itemColor = item.getAttribute(‘data-color’);
if(selectedColors.length === 0 || selectedColors.includes(itemColor)) {
item.style.display = ‘’;
} else {
item.style.display = ‘none’;
}
});
}

Filtre Sonuçlarının Dinamik Gösterimi

JavaScript ile filtreleme uygulandığında kullanıcıya anlık geri bildirim verin. Örneğin, filtrelenen ürün sayısını gösterin ve filtre temizleme seçenekleri sunun. Bu, kullanıcı deneyimini üst seviyeye taşır.

Performans ve SEO İçin İpuçları

Filtreleme yaparken sayfa hızını koruyun. Gereksiz JavaScript kodlarından kaçının ve ürün veri yapınızı optimize edin. Ayrıca, SEO dostu URL yapıları ve canonical etiketleri kullanarak arama motorlarında görünürlüğünüzü artırın.