Shopify Liquid ile Özelleştirilebilir Ürün Bundleları Oluşturma

İçindekiler

• Giriş
• Ön Hazırlık
• Bundle Ürün Sayfası Oluşturma
• Bundle Seçeneklerini Gösterme
• Fiyat Hesaplama
• Sepete Ekleme İşlemi
• Sonuç

Giriş

Ürün bundleları, müşterilere birden fazla ürünü bir arada satın alma fırsatı sunar ve genellikle indirimli fiyatlarla gelir. Bu yazıda, Shopify Liquid kullanarak özelleştirilebilir ürün bundleları nasıl oluşturabileceğimizi öğreneceğiz.

Ön Hazırlık

İlk olarak, bundle ürünümüzü oluşturalım. Shopify admin panelinden yeni bir ürün ekleyin ve bu ürünü “Bundle” olarak adlandırın. Ürün açıklamasında, bundle’ın içereceği ürünleri belirtin.

Ardından, bundle’da yer alacak ürünleri seçmek için ürün varyantları oluşturun. Örneğin:

• Variant 1: T-shirt
• Variant 2: Pantolon
• Variant 3: Ayakkabı

Bundle Ürün Sayfası Oluşturma

Şimdi, product.bundle.liquid adında yeni bir template oluşturalım ve bundle ürünümüz için özel bir sayfa tasarlayalım.

{% if product.type == 'Bundle' %}
  <h1>{{ product.title }}</h1>
  <div class="bundle-description">
    {{ product.description }}
  </div>

  <form action="/cart/add" method="post" id="bundle-form">
    <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">

    {% for variant in product.variants %}
      <div class="bundle-item">
        <h3>{{ variant.title }}</h3>
        <select name="properties[{{ variant.title }}]" class="bundle-select" data-variant="{{ variant.id }}">
          <option value="">Seçiniz</option>
          {% for product in collections.all.products %}
            {% if product.type == variant.title %}
              <option value="{{ product.id }}">{{ product.title }}</option>
            {% endif %}
          {% endfor %}
        </select>
      </div>
    {% endfor %}

    <div id="bundle-price">
      Toplam: <span id="total-price">{{ product.price | money }}</span>
    </div>

    <button type="submit" name="add" id="add-to-cart-button">Sepete Ekle</button>
  </form>
{% endif %}

Bu template, bundle ürününün başlığını ve açıklamasını gösterir, ardından her bir bundle öğesi için bir seçim kutusu oluşturur.

Bundle Seçeneklerini Gösterme

Yukarıdaki kodda, her bir bundle öğesi için bir select elementi oluşturduk. Bu, müşterilerin her kategori için (T-shirt, Pantolon, Ayakkabı) mevcut ürünler arasından seçim yapmasına olanak tanır.

Fiyat Hesaplama

Bundle fiyatını dinamik olarak hesaplamak için JavaScript kullanacağız. product.bundle.liquid dosyasının sonuna şu script’i ekleyin:

<script>
document.addEventListener('DOMContentLoaded', function() {
  const bundleSelects = document.querySelectorAll('.bundle-select');
  const totalPriceElement = document.getElementById('total-price');
  const basePrice = {{ product.price }};

  bundleSelects.forEach(select => {
    select.addEventListener('change', updateTotalPrice);
  });

  function updateTotalPrice() {
    let totalPrice = basePrice;
    bundleSelects.forEach(select => {
      const selectedOption = select.options[select.selectedIndex];
      if (selectedOption.value) {
        // Bu örnekte, seçilen her ürün için 10% indirim uyguluyoruz
        totalPrice += parseFloat(selectedOption.getAttribute('data-price')) * 0.9;
      }
    });
    totalPriceElement.textContent = (totalPrice / 100).toFixed(2);
  }

  // Sayfa yüklendiğinde fiyatı güncelle
  updateTotalPrice();
});
</script>

Bu script, kullanıcı bir seçim yaptığında toplam fiyatı günceller. Seçilen her ürün için %10 indirim uygulanır.

Sepete Ekleme İşlemi

Son olarak, bundle’ı sepete eklemek için AJAX kullanacağız. Aşağıdaki script’i önceki script’in altına ekleyin:

<script>
document.getElementById('bundle-form').addEventListener('submit', function(e) {
  e.preventDefault();

  const formData = new FormData(this);

  fetch('/cart/add.js', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => {
    alert('Bundle başarıyla sepete eklendi!');
    // Sepet sayısını güncelle veya sepet çekmecesini aç
  })
  .catch(error => {
    console.error('Hata:', error);
    alert('Bir hata oluştu. Lütfen tekrar deneyin.');
  });
});
</script>

Bu script, form gönderildiğinde varsayılan davranışı engeller ve bundle’ı AJAX kullanarak sepete ekler.

Sonuç

Bu örnekte, Shopify Liquid kullanarak özelleştirilebilir bir ürün bundle sistemi oluşturduk. Bu sistem, müşterilere kendi bundle’larını oluşturma esnekliği sunarken, mağaza sahiplerine de satışları artırma fırsatı verir.

Bu temel yapı üzerine daha fazla özellik ekleyebilirsiniz, örneğin:

• Stok kontrolü
• Daha karmaşık indirim kuralları
• Bundle önizleme görselleri
• Önerilen bundle kombinasyonları

Shopify Liquid’in gücü ve esnekliği sayesinde, e-ticaret deneyimini özelleştirmek ve geliştirmek için pek çok fırsat bulunmaktadır.