Pratik Çözümler

Sık karşılaşılan işler için hazır çözümler: kopyala-kullan snippet tarifleri, faydalı küçük bilgiler ve kolay işlemler. Her başlık kendi başına uygulanabilir — kopyalayın, temanıza ekleyin ve gerekirse uyarlayın. Snippet kavramının temeli için bkz. Snippet.

Ürün Asorti Tablosu

Ürünün asorti (beden/adet) bilgisini ürünün ilave alanından (ASSORTMENT_INFO, panelde "Ek bilgi 1" vb.) okuyup tablo halinde gösterir.

Veri formatı

ASSORTMENT_INFO değeri şu yapıda düz metin olmalıdır:

<BEDEN1>:<ADET1>|<BEDEN2>:<ADET2>|...#<TOPLAM_ADET>

• | ile ayrılmış parçaların her biri BEDEN:ADET formatındadır.
• Sondaki #<TOPLAM_ADET> kısmı tüm adetlerin toplamını ifade eder.

Örnek değer:

S:1|M:2|L:3#6

Kullanım

Ürünün ilave alanından gelen veriyi snippet'a parametre olarak aktarın:

{{ snippet('product-assortment', { ASSORTMENT_INFO: P.ADDITIONAL_FIELD_1 }) }}

Çıktı örneği

Yukarıdaki örnek veri (S:1|M:2|L:3#6) için üretilen tablo:

Ürün Liste Görsel Slider'ı

Ürün listesinde birden fazla görseli olan ürünlerde, görseller arası geçiş (slider) için sayfalama noktalarını (pagination bullets) oluşturur.

Kullanım

Ürün kartındaki resim alanında standart görsel kodu yerine snippet'ı çağırın:

{{ snippet('product-image-slider') }}

Snippet içeriği

{% if P.IMAGE_LIST|length > 1 %}
  <div class="absolute bottom-2 start-0 w-full z-[2]" hidden>
    <div class="product-image-slider-pagination flex justify-center items-center">
      {% for IMAGE in P.IMAGE_LIST %}
        <div class="swiper-pagination-bullet {% if loop.index == 1 %}swiper-pagination-bullet-active{% endif %}"></div>
      {% endfor %}
    </div>
  </div>
{% endif %}

Davranış

• Varsayılan durumda sayfalama noktaları gizlidir (hidden attribute'u).
• Ürün kartında hover ile slider etkinleştiğinde noktalar dinamikleşir.
• En az iki görsel varsa çalışır (P.IMAGE_LIST|length > 1 koşulu).

Sonraki adımlar