Dataset Yapısı ve Kullanımı

Bu döküman, web uygulamasında kullanılan data-toggle özelliklerini ve ilgili dataset yapılarını ayrıntılı bir şekilde açıklamaktadır. Her bir data-toggle özelliği, kullanım amacı ve desteklenen dataset parametreleri ile birlikte sunulmuştur.

Genel Bilgi

data-toggle, HTML elemanlarına dinamik davranışlar eklemek için kullanılan bir özelliktir. Bu özellik, JavaScript ile etkileşimli bileşenleri (formlar, açılır pencereler, sekmeler vb.) kontrol etmek için kullanılır. Aşağıda, her bir data-toggle türünün kullanım amacı, örnek kodu ve desteklenen dataset parametreleri açıklanmıştır.

data-toggle=”flag”

Amaç: Bir input alanında ülke bayraklarını göstermek için kullanılır.

Örnek:

<input class="form-control" data-toggle="flag">

Açıklama: Seçilen input alanında, kullanıcıların ülke seçimi yapabilmesi için bayrak ikonları görüntülenir.

data-toggle=”form-submit”

Amaç: Form verilerini bir uç noktaya (endpoint) göndermek için kullanılır.

Örnek:

<form action="#" method="post" novalidate data-toggle="form-submit" data-endpoint="FORM"></form>

Açıklama:

  • Form gönderilmeden önce validasyon kontrolü yapılır.
  • data-endpoint belirtilmişse, bu uç noktaya POST isteği gönderilir. Aksi takdirde, action alanındaki URL kullanılır.
  • method belirtilmezse varsayılan olarak POST kullanılır.
  • Uç noktalar, /resources/assets/js/endpoint.js dosyasında tanımlanır.

Desteklenen Dataset Parametreleri:

  • data-endpoint: Formun gönderileceği uç nokta adı.

data-toggle=”popup”

Amaç: Açılır pencere (popup) göstermek için kullanılır.

Örnek:

<span data-url="/srv/service/content-v5/fixed-page-content/-5" data-width="1000" data-property="CONTENT" data-toggle="popup">
    <!-- popup btn -->
</span>

Açıklama: Belirtilen URL’den veri çekilerek bir açılır pencere açılır. data-property belirtilirse, gelen veri belirli bir özellik üzerinden alınır (örneğin, data.CONTENT).

Desteklenen Dataset Parametreleri:

  • data-id: Açılır pencerenin benzersiz kimliği.
  • data-class: Açılır pencereye eklenecek CSS sınıfı.
  • data-width: Açılır pencerenin genişliği (piksel cinsinden).
  • data-title: Açılır pencerenin başlığı.
  • data-html: Açılır pencereye eklenecek HTML içeriği.
  • data-timeout: Açılır pencerenin otomatik kapanma süresi (milisaniye cinsinden).
  • data-disabled-close: Kapatma düğmesini devre dışı bırakır (true/false).
  • data-url: İçeriğin çekileceği URL.
  • data-property: Verinin alınacağı özellik (örneğin, CONTENT).

data-toggle=”country”

Amaç: Ülke seçim listesi oluşturmak için kullanılır.

Örnek:

<div class="form-item" data-toggle="country">
    <div class="relative">
        <select id="form-country-code" name="country" class="form-control" data-placeholder data-selector="country"></select>
        <label for="form-country-code" class="form-label capitalize">{{ t.country }}</label>
    </div>
</div>

Açıklama: Kullanıcıların ülke seçebileceği bir dropdown menü oluşturur.

Desteklenen Dataset Parametreleri:

  • data-placeholder: Varsayılan placeholder metni.
  • data-selector: Seçici türü (country).

data-toggle=”city”

Amaç: Şehir seçim alanı oluşturmak için kullanılır.

Örnek:

<div class="form-item" data-toggle="city">
    <div class="relative">
        <input id="form-city" type="text" name="city" class="form-control required" placeholder="{{ t.city }}" data-placeholder data-target="city_code" data-selector="city">
        <label for="form-city" class="form-label capitalize">{{ t.city }}</label>
    </div>
</div>

Açıklama: Şehir bilgisi girişi için bir input alanı sağlar.

Desteklenen Dataset Parametreleri:

  • data-placeholder: Varsayılan placeholder metni.
  • data-target: Hedef veri alanı (örneğin, city_code).
  • data-selector: Seçici türü (city).

data-toggle=”town”

Amaç: İlce/kasaba seçim alanı oluşturmak için kullanılır.

Örnek:

<div class="form-item" data-toggle="town">
    <div class="relative">
        <input id="form-town" type="text" name="town" class="form-control required" placeholder="{{ t.town }}" data-placeholder data-target="town_code" data-selector="town">
        <label for="form-town" class="form-label capitalize">{{ t.town }}</label>
    </div>
</div>

Açıklama: İlce/kasaba bilgisi girişi için bir input alanı sağlar.

Desteklenen Dataset Parametreleri:

  • data-placeholder: Varsayılan placeholder metni.
  • data-target: Hedef veri alanı (örneğin, town_code).
  • data-selector: Seçici türü (town).

data-toggle=”district”

Amaç: Mahalle/semt seçim alanı oluşturmak için kullanılır.

Örnek:

<div class="form-item" data-toggle="district">
    <div class="relative">
        <input id="form-district" type="text" name="district" class="form-control required" placeholder="{{ t.district }}" data-placeholder data-target="district_code" data-selector="district">
        <label for="form-district" class="form-label capitalize">{{ t.district }}</label>
    </div>
</div>

Açıklama: Mahalle/semt bilgisi girişi için bir input alanı sağlar.

Desteklenen Dataset Parametreleri:

  • data-placeholder: Varsayılan placeholder metni.
  • data-target: Hedef veri alanı (örneğin, district_code).
  • data-selector: Seçici türü (district).

data-toggle=”state”

Amaç: Eyalet/il seçim alanı oluşturmak için kullanılır.

Örnek:

<div class="form-item" data-toggle="state">
    <div class="relative">
        <input id="form-province" type="text" name="province" class="form-control required" placeholder="{{ t.province }}" data-placeholder data-target="province_code" data-selector="state">
        <label for="form-province" class="form-label capitalize">{{ t.province }}</label>
    </div>
</div>

Açıklama: Eyalet/il bilgisi girişi için bir input alanı sağlar.

Desteklenen Dataset Parametreleri:

  • data-placeholder: Varsayılan placeholder metni.
  • data-target: Hedef veri alanı (örneğin, province_code).
  • data-selector: Seçici türü (state).

data-toggle=”accordion”

Amaç: Akordiyon tarzı açılır/kapanır içerik göstermek için kullanılır.

Örnek:

<div data-toggle="accordion">
    <div class="group active" data-accordion-mobile="true" data-accordion-target="#accordion-{{ BLOCK.ID }}" data-url="" data-property="CONTENT" data-callback="">
        <div class="accordion-title capitalize">
            <!-- button -->
        </div>
    </div>
    <div id="accordion-{{ BLOCK.ID }}" class="active">
        <!-- İçerik -->
    </div>
</div>

Açıklama: Tıklama ile içeriği açıp kapatan bir akordiyon bileşeni oluşturur.

Desteklenen Dataset Parametreleri:

  • data-accordion-mobile: Mobil cihazlarda akordiyon davranışını kontrol eder (true/false).
  • data-accordion-target: Hedef içerik alanının ID’si.
  • data-url: İçeriğin çekileceği URL.
  • data-property: Verinin alınacağı özellik (örneğin, CONTENT).
  • data-callback: İşlem sonrası çağrılacak JavaScript fonksiyonu.

data-toggle=”product”

Amaç: Ürün kartlarını yönetmek için kullanılır.

Örnek:

<div data-toggle="product" data-id="{{ P.ID }}" data-variant-id="0" data-count="#product-count-{{ P.ID }}{{ BLOCK.ID }}">
    <a href="" data-toggle="product-url"><span data-toggle="product-title">Ürün Başlığı</span></a>
    <div data-toggle="price-control">
        <div data-toggle="price-sell">555</div>
        <div data-toggle="price-sell-vat">555</div>
        <div data-toggle="price-not-discounted">555</div>
        <div data-toggle="price-not-discounted-vat">555</div>
        <div data-toggle="discount-percent">555</div>
        <div data-percent="{{ P.NUMERIC1 }}" data-toggle="price-numeric1">555</div>
        <div data-toggle="add-to-cart">
            <span>{{ t.add_to_cart }}</span>
        </div>
        <div data-toggle="show-out-stock">
            <div data-toggle="stock-alarm">Stok Uyarısı</div>
        </div>
        <span data-toggle="price-control">
            %<span data-toggle="discount-percent">46</span>
        </span>
        <span data-toggle="price-money-order-vat">5555</span>
        <span data-toggle="price-money-order">545</span>
        <span data-toggle="money-discount-percent">544</span>
        <span data-toggle="favourite">Favori</span>
        <span data-url="{{ snippet_uri('product-quick-view', {'include':'product-detail', 'product_id':P.ID }) }}" data-toggle="popup" data-width="768">Hızlı Görünüm</span>
        <span data-toggle="compare">Karşılaştır</span>
        <label for="input-checkbox-{{ P.ID }}">
            <input id="input-checkbox-{{ P.ID }}" type="checkbox" data-callback="multiSelect" data-toggle="multi-select">
            <span>Çoklu Seçim</span>
        </label>
        <input type="hidden" data-related-id="{{ P.RELATED_PRODUCT_ID }}" data-variant-id="{{ P.VARIANT_ID }}" value="0" data-toggle="product-related-id">
        <div data-toggle="product-card-related" data-related-id="1" data-count="{{ PRODUCT_COUNT }}" data-toggle="product-card-related"></div>
</div>

Açıklama: Ürün kartlarının (varyantlar, fiyatlar, stok durumu vb.) dinamik olarak yönetilmesini sağlar. Tüm ürün kartları için kritik bir özelliktir. Bu datasetlerin çalışması için data-toggle="product" içerisinde olması gerekmektedir.

data-toggle=”tooltip”

Amaç: Fare ile üzerine gelindiğinde ipucu (tooltip) göstermek için kullanılır.

Örnek:

<span data-toggle="tooltip" data-title="Bu bir ipucu başlığı"></span>

Açıklama: Elemanın üzerine gelindiğinde, belirtilen başlık ile bir ipucu gösterilir.

Desteklenen Dataset Parametreleri:

  • data-title: İpucunda gösterilecek metin.

data-toggle=”count-down”

Amaç: Geri sayım sayacı oluşturmak için kullanılır.

Örnek:

<div data-timer="2026,04,28,00,00,00" data-toggle="count-down">
    <div>
        <strong class="day">00</strong>
        <small>{{ t.day|default('Gün') }}</small>
    </div>
    <div>
        <strong class="hour">00</strong>
        <small>{{ t.hour|default('Saat') }}</small>
    </div>
    <div>
        <strong class="minute">00</strong>
        <small>{{ t.minute|default('Dakika') }}</small>
    </div>
    <div>
        <strong class="second">00</strong>
        <small>{{ t.second|default('Saniye') }}</small>
    </div>
</div>

Açıklama: Belirtilen tarihe kadar geri sayım yapar.

Desteklenen Dataset Parametreleri:

  • data-timer: Geri sayımın hedef tarihi (YYYY,MM,DD,HH,MM,SS formatında).

data-toggle=”share”

Amaç: İçeriği paylaşmak için paylaşım düğmesi oluşturur.

Örnek:

<span class="relative group/share" data-toggle="share" data-url="{{ P.URL }}" data-title="{{ P.TITLE }}">
        <!-- Paylaş -->
    <div class="absolute start-0 p-4 bg-white rounded-custom hidden md:group-hover/share:flex">
        {{ snippet('share', {IMAGE_URL: BLOG.IMG2.PATH|default(BLOG.IMG1.PATH)|default(BLOG.IMAGE_URL)|default(BLOG.IMAGE), TITLE: BLOG.TITLE}) }}
    </div>
</span>

Açıklama:

  • Mobil cihazlarda cihazın yerel paylaşım menüsünü açar.
  • Masaüstü cihazlarda öntanımlı paylaşım düğmelerini gösterir.

Desteklenen Dataset Parametreleri:

  • data-url: Paylaşılacak içeriğin URL’si.
  • data-title: Paylaşılacak içeriğin başlığı.

data-toggle=”slider”

Amaç: Kaydırıcı (slider) bileşeni oluşturmak için kullanılır.

Örnek:

<div data-toggle="slider" data-callback="sliderBg">
    <div class="swiper" data-swiper data-perview="xs:2,sm:3,lg:3" data-margin="xs:16,sm:16,lg:24" data-grid="xs:1,sm:2,lg:2" data-loop="false" data-direction="horizontal" data-centered-slides="false" data-speed="1500" data-effect="slide" data-autoplay="3">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <!-- İçerik -->
            </div>
        </div>
    </div>
    <div class="swiper" data-swiper-thumb>
        <div class="swiper-wrapper">
            <div class="swiper-slide w-20">
                <!-- Küçük Resim -->
            </div>
        </div>
    </div>
</div>

Açıklama: Swiper kütüphanesi ile slider oluşturur. Callback fonksiyonu ile özelleştirilebilir.

Desteklenen Dataset Parametreleri:

  • data-callback: Slider başlatıldığında veya değiştiğinde çağrılacak fonksiyon.
  • data-perview: Farklı ekran boyutları için görünen öğe sayısı (örn. xs:2,sm:3,lg:3).
  • data-margin: Öğeler arası boşluk (örn. xs:16,sm:16,lg:24).
  • data-grid: Izgara düzeni (örn. xs:1,sm:2,lg:2).
  • data-loop: Sonsuz döngü (true/false).
  • data-direction: Kaydırma yönü (horizontal/vertical).
  • data-centered-slides: Slaytların ortalanması (true/false).
  • data-speed: Geçiş hızı (milisaniye cinsinden).
  • data-effect: Geçiş efekti (slide, fade vb.).
  • data-autoplay: Otomatik oynatma süresi (saniye cinsinden).

JavaScript Callback Örneği:

ON_PAGE_READY.push(function () {
    window['sliderBg'] = function (swiper) {
        swiper.options.on = {
            init: function (el) {
                const dataBg = el.slides[el.activeIndex].getAttribute('data-bg');
                swiper.element.style = dataBg;
            },
            slideChange: function (el) {
                const dataBg = el.slides[el.activeIndex].getAttribute('data-bg');
                swiper.element.style = dataBg;
            },
        };
        swiper.init();
    };
});

Not: Callback işleminden sonra swiper.init() çağrılmalıdır.

data-toggle=”drawer”

Amaç: Yan menü (drawer) oluşturmak için kullanılır.

Örnek:

<div data-drawer-target="#drawer-{{ M.ID }}{{ BLOCK.ID }}" data-toggle="drawer" data-member-required="1" data-url="/srv/service/content-v5/fixed-page-content/-5" data-property="CONTENT" data-callback="">
    <span>Başlık</span>
</div>
<div id="drawer-{{ M.ID }}{{ BLOCK.ID }}" data-position="left" class="drawer">
    <div class="drawer-wrapper">
        <div class="drawer-container">
            <!-- İçerik -->
        </div>
    </div>
</div>

Açıklama: Yan menü açılır ve içeriği belirtilen URL’den çeker.

Desteklenen Dataset Parametreleri:

  • data-drawer-target: Hedef yan menü ID’si.
  • data-member-required: Üye girişi gerekliliği (1/0).
  • data-url: İçeriğin çekileceği URL.
  • data-property: Verinin alınacağı özellik (örneğin, CONTENT).
  • data-callback: İşlem sonrası çağrılacak fonksiyon.
  • data-position: Yan menü konumu (left/right).

data-toggle=”qty”

Amaç: Ürün miktarını artırma/azaltma kontrolü sağlar.

Örnek:

<div class="qty" data-toggle="qty" data-multiple="true">
    <span class="decrease">-</span>
    <input type="number" id="product-count-{{ P.ID }}{{ BLOCK.ID }}" min="{{ P.MIN_ORDER_COUNT }}" step="{{ P.STOCK_INCREMENT }}" value="{{ P.MIN_ORDER_COUNT }}">
    <span class="increase">+</span>
</div>

Açıklama: Artırma ve azaltma düğmeleri ile ürün miktarını kontrol eder.

Desteklenen Dataset Parametreleri:

  • data-multiple: Çoklu seçim izni (true/false).
  • min: Minimum sipariş miktarı.
  • step: Artış/azalış adımı.
  • value: Varsayılan değer.

data-toggle=”copy”

Amaç: Belirtilen metni panoya kopyalamak için kullanılır.

Örnek:

<span data-toggle="copy" data-copy-text="Kopyalanacak metin">Kopyala</span>

Açıklama: Tıklama ile belirtilen metni panoya kopyalar.

Desteklenen Dataset Parametreleri:

  • data-copy-text: Kopyalanacak metin.

data-toggle=”tab”

Amaç: Sekme (tab) bileşeni oluşturmak için kullanılır.

Örnek:

<div data-toggle="tab">
    <div>
        <button type="button" class="active" data-tab-target="#tab-{{BLOCK.ID}}1" data-property="CONTENT" data-url="/srv/service/content-v5/fixed-page-content/-5" data-callback="tabCallback">Başlık</button>
        <button type="button" data-tab-target="#tab-{{BLOCK.ID}}2">Başlık 2</button>
    </div>
    <div>
        <div id="tab-{{BLOCK.ID}}1" class="active">İçerik</div>
        <div id="tab-{{BLOCK.ID}}2" class="hidden">İçerik 2</div>
    </div>
</div>

Açıklama: Sekmeler arasında geçiş yapmayı sağlar. data-tab-group ile sekmeler gruplandırılabilir.

Desteklenen Dataset Parametreleri:

  • data-tab-target: Hedef sekme ID’si.
  • data-property: Verinin alınacağı özellik (örneğin, CONTENT).
  • data-url: İçeriğin çekileceği URL.
  • data-callback: İşlem sonrası çağrılacak fonksiyon.
  • data-tab-group: Sekmeleri gruplandırmak için kullanılan kimlik (örneğin, login-type).

data-toggle=”login”

Amaç: Kullanıcı giriş formunu yönetmek için kullanılır.

Örnek:

<form method="POST" novalidate autocomplete="off" data-toggle="login" data-callback=""></form>

Açıklama: Giriş formunu otomatik olarak işler ve fetch işlemleri yapar.

Desteklenen Dataset Parametreleri:

  • data-callback: İşlem sonrası çağrılacak fonksiyon.

data-toggle=”fast-register”

Amaç: Hızlı kayıt formunu yönetmek için kullanılır.

Örnek:

<form method="POST" novalidate autocomplete="off" data-toggle="fast-register" data-callback=""></form>

Açıklama: Hızlı kayıt işlemleri için otomatik fetch işlemleri yapar.

Desteklenen Dataset Parametreleri:

  • data-callback: İşlem sonrası çağrılacak fonksiyon.

data-toggle=”password-toggle”

Amaç: Şifre alanının görünürlüğünü değiştirmek için kullanılır.

Örnek:

<div class="form-group">
    <input id="login-password" type="password" name="password">
    <span data-selector="#login-password" data-toggle="password-toggle">Göster/Gizle</span>
</div>

Açıklama: Şifre alanını metin veya şifre türü arasında geçiş yapar.

Desteklenen Dataset Parametreleri:

  • data-selector: Hedef input alanının seçicisi.

data-toggle=”social-login”

Amaç: Sosyal medya üzerinden giriş yapmak için kullanılır.

Örnek:

<span data-toggle="social-login" data-platform="google">Google ile Giriş</span>
<span data-toggle="social-login" data-platform="facebook">Facebook ile Giriş</span>
<span data-toggle="social-login" data-platform="apple">Apple ile Giriş</span>

Açıklama: Sosyal medya platformları üzerinden giriş yapmayı sağlar.

Desteklenen Dataset Parametreleri:

  • data-platform: Kullanılacak platform (google, facebook, apple).

data-toggle=”logout”

Amaç: Kullanıcı çıkış işlemini gerçekleştirmek için kullanılır.

Örnek:

<button type="button" data-toggle="logout">{{ t.logout }}</button>

Açıklama: Tıklama ile kullanıcıyı sistemden çıkarır.

data-toggle=”captcha-toggle”

Amaç: CAPTCHA resmini yenilemek için kullanılır.

Örnek:

<div class="form-group">
    <span class="form-prepend">
        <img id="form-captcha-{{ BLOCK.ID }}" class="rounded-[4px]" src="/SecCode.php" width="100" height="30" alt="Güvenlik Kodu">
    </span>
    <div class="form-item">
        <div class="relative">
            <input id="security_code-{{ BLOCK.ID }}" type="text" name="security_code" class="form-control required" placeholder="{{ t.security_code }}" data-placeholder>
            <label for="security_code-{{ BLOCK.ID }}" class="form-label">{{ t.security_code }}</label>
        </div>
    </div>
    <span id="form-captcha-{{ BLOCK.ID }}-toggle" class="form-append cursor-pointer hover:text-primary" data-selector="#form-captcha-{{ BLOCK.ID }}" data-toggle="captcha-toggle">CAPTCHA Yenile</span>
</div>

Açıklama: CAPTCHA resmini yenilemek için kullanılır. Standart olarak {{ snippet('security-code') }} ile dahil edilmesi önerilir.

{{ snippet('security-code') }}

Desteklenen Dataset Parametreleri:

  • data-selector: Hedef CAPTCHA resminin seçicisi.

data-toggle=”variant-one”

Amaç: Ürün varyantlarını listelemek için kullanılır.

Örnek:

<div class="w-full" data-toggle="variant-one">
    <div data-id="{{ VARIANT.TYPE_ID }}" data-subproduct-id="{{ VARIANT.ID }}" data-pid="{{ P.ID }}" data-target="{{ P.ID }}{{ BLOCK.ID }}" data-type="{{ VARIANT.TYPE }}" data-code="{{ VARIANT.CODE }}" data-color-code="{{ VARIANT.TYPE_COLOR_CODE }}" data-price="{{ VARIANT.PRICE }}" data-stock="{{ VARIANT.STOCK }}" data-instock="{{ VARIANT.IN_STOCK }}" data-barcode="{{ VARIANT.BARCODE }}" data-mop="{{ VARIANT.MONEY_ORDER_PERCENT }}" data-vat="{{ VARIANT.VAT }}" data-not-discounted="{{ VARIANT.PRICE_NOT_DISCOUNTED }}" data-wscode="{{ VARIANT.WS_CODE }}" data-weight="{{ VARIANT.WEIGHT }}" data-group-id="{{ GRUP_TIP_NO }}" data-toggle="variant" data-callback="variantCallback">Varyant</div>
</div>

Açıklama: Ürün varyantlarını liste olarak gösterir.

Desteklenen Dataset Parametreleri:

  • data-id: Varyant türü kimliği.
  • data-subproduct-id: Alt ürün kimliği.
  • data-pid: Ürün kimliği.
  • data-target: Hedef alan.
  • data-type: Varyant türü.
  • data-code: Varyant kodu.
  • data-color-code: Renk kodu.
  • data-price: Varyant fiyatı.
  • data-stock: Stok miktarı.
  • data-instock: Stok durumu (true/false).
  • data-barcode: Barkod.
  • data-mop: Havale indirim oranı.
  • data-vat: KDV oranı.
  • data-not-discounted: İndirimsiz fiyat.
  • data-wscode: Web servisi kodu.
  • data-weight: Ağırlık.
  • data-group-id: Grup kimliği.
  • data-callback: İşlem sonrası çağrılacak fonksiyon.

data-toggle=”variant-two”

Amaç: Ürün varyantlarını dropdown menü ile seçmek için kullanılır.

Örnek:

<div class="w-full" data-toggle="variant-two">
    <select class="form-control" data-toggle="variant" data-callback="variantCallback">
        <option value="{{ SUB.TYPE_ID }}" data-id="{{ SUB.TYPE_ID }}" data-subproduct-id="{{ SUB.ID }}" data-pid="{{ P.ID }}" data-target="{{ P.ID }}{{ BLOCK.ID }}" data-type="{{ SUB.TYPE }}" data-code="{{ SUB.CODE }}" data-color-code="{{ SUB.TYPE_COLOR_CODE }}" data-price="{{ SUB.PRICE }}" data-stock="{{ SUB.STOCK }}" data-instock="{{ SUB.IN_STOCK }}" data-barcode="{{ SUB.BARCODE }}" data-mop="{{ SUB.MONEY_ORDER_PERCENT }}" data-vat="{{ SUB.VAT }}" data-not-discounted="{{ SUB.PRICE_NOT_DISCOUNTED }}" data-wscode="{{ SUB.WS_CODE }}" data-weight="{{ SUB.WEIGHT }}" class="{% if SUB.TYPE_ID == P.VARIANT_FEATURE2_SELECTED and P.VARIANT_ID > 0 %}active{% endif %} {% if SUB.IN_STOCK == false and NEGATIVE_STOCK == 0 %}passive{% endif %}" {% if SUB.TYPE_ID == P.VARIANT_FEATURE2_SELECTED and P.VARIANT_ID > 0 %}selected{% endif %}>{{ SUB.TYPE }}</option>
    </select>
</div>

Açıklama: Ürün varyantlarını dropdown menü ile seçmeyi sağlar.

Desteklenen Dataset Parametreleri: (Yukarıdaki variant-one ile aynı)

data-toggle=”newsletter”

Amaç: Site aboneliği formunu yönetmek için kullanılır.

Örnek:

<form novalidate autocomplete="off" data-toggle="newsletter"></form>

Açıklama: Bülten aboneliği için form verilerini otomatik olarak gönderir.

data-toggle=”dropdown”

Amaç: Açılır menü (dropdown) oluşturmak için kullanılır.

Örnek:

<div>
    <div data-dropdown="target-dropdown" data-toggle="dropdown" data-dropdown-right>
        <!-- Dropdown Düğmesi -->
    </div>
    <div id="target-dropdown" class="dropdown-body">
        <div class="dropdown-inner">
            <!-- Dropdown İçeriği -->
        </div>
    </div>
</div>

Açıklama: Tıklama ile açılır menü gösterir.

Desteklenen Dataset Parametreleri:

  • data-dropdown: Hedef dropdown ID’si.
  • data-dropdown-right: Menünün sağa hizalanması (true/false).

data-toggle=”language”

Amaç: Dil seçimi yapmak için kullanılır.

Örnek:

<div data-language="{{ LANG.CODE }}" data-toggle="language">Dil</div>

<select class="form-control" data-toggle="language">
    <option value="{{ LANG.CODE }}">Dil</option>
</select>

Açıklama: Kullanıcıların site dilini değiştirmesini sağlar.

Desteklenen Dataset Parametreleri:

  • data-language: Dil kodu.

data-toggle=”currency”

Amaç: Para birimi seçimi yapmak için kullanılır.

Örnek:

<div data-language="{{ CURRENCY.TITLE }}" data-toggle="currency">Para Birimi</div>

<select class="form-control" data-toggle="currency">
    <option value="{{ LANG.CODE }}">Para Birimi</option>
</select>

Açıklama: Kullanıcıların para birimini değiştirmesini sağlar.

Desteklenen Dataset Parametreleri:

  • data-language: Para birimi kodu.

data-toggle=”sticky”

Amaç: Sabit (sticky) bir eleman oluşturmak için kullanılır.

Örnek:

<div  data-toggle="sticky" data-class="top-0"></div>

Açıklama: Elemanı sayfanın üst kısmında sabit tutar.

Desteklenen Dataset Parametreleri:

  • data-class: Sabit elemana eklenecek CSS sınıfı.

Amaç: Canlı arama formu oluşturmak için kullanılır.

Örnek:

<form action="{{ url(12,'page') }}" method="get" autocomplete="off" data-licence="{{LICENCE_SEARCH_ALL}}" data-toggle="live-search">
    <div class="w-full relative">
        <input type="search" name="q" v-model="input" @click="update()">
        <button type="submit">Ara</button>
    </div>
    {% if IS_INLINE_SEARCH_ACTIVE %}
        {{ snippet('header.live-search.default') }}
    {% endif %}
</form>

Açıklama: Kullanıcı yazdıkça arama sonuçlarını dinamik olarak gösterir. snippet('header.live-search.default') ile arama sonuçları görünür.

Desteklenen Dataset Parametreleri:

  • data-licence: Arama lisansı.

data-toggle=”favourite-count”

Amaç: Favori ürün sayısını göstermek için kullanılır.

Örnek:

<span data-toggle="favourite-count"></span>

Açıklama: Kullanıcının favori ürün sayısını dinamik olarak gösterir.

data-toggle=”member-name”

Amaç: Üye adını göstermek için kullanılır.

Örnek:

<div data-toggle="member-name"></div>

Açıklama: Giriş yapmış kullanıcının adını gösterir.

data-toggle=”message-count”

Amaç: Mesaj sayısını göstermek için kullanılır.

Örnek:

<span data-toggle="message-count"></span>

Açıklama: Kullanıcının okunmamış mesaj sayısını gösterir.

data-toggle=”cart-count”

Amaç: Sepetdeki ürün sayısını göstermek için kullanılır.

Örnek:

<span data-toggle="cart-count"></span>

Açıklama: Sepetteki ürün sayısını dinamik olarak gösterir.

data-toggle=”cart-price”

Amaç: Sepet toplam fiyatını göstermek için kullanılır.

Örnek:

<span data-toggle="cart-price"></span>

Açıklama: Sepetin toplam tutarını dinamik olarak gösterir.

data-toggle=”menu”

Amaç: Menüye hover efekti eklemek için kullanılır.

Örnek:

<nav data-toggle="menu"></nav>

Açıklama: Menüye fare ile üzerine gelindiğinde active sınıfı ekler.

data-toggle=”product-code”

Amaç: Ürün kodunu göstermek için kullanılır.

Örnek:

<span data-code="{{ P.PRODUCT_CODE }}" data-toggle="product-code">{{ P.PRODUCT_CODE }}</span>

Açıklama: Ürün kodunu dinamik olarak gösterir.

Desteklenen Dataset Parametreleri:

  • data-code: Ürün kodu.

data-toggle=”cart-preview”

Amaç: Sepet önizlemesi göstermek için kullanılır.

Örnek:

<a href="{{ url(30,'page') }}" data-url="{{ snippet_uri('cart-preview', {'include':'cart'}) }}" data-toggle="cart-preview"></a>

Açıklama: Sepet içeriğini bir önizleme penceresinde gösterir.

Desteklenen Dataset Parametreleri:

  • data-url: Sepet önizleme içeriğinin çekileceği URL.

data-toggle=”variant-notify”

Amaç: Varyant seçim uyarısı göstermek/gizlemek için kullanılır.

Örnek:

<div class="hidden" data-toggle="variant-notify">Varyant seçme uyarısı</div>

Açıklama: Varyant seçimi gerektiğinde uyarı mesajını gösterir.

data-toggle=”variant-one-active”

Amaç: Aktif varyantların adını göstermek için kullanılır.

Örnek:

<span data-toggle="variant-one-active">{{ P.VARIANT1_NAME }}</span>

<span data-toggle="variant-two-active">{{ P.VARIANT2_NAME }}</span>

Açıklama: Seçilen varyantın adını gösterir.

data-toggle=”product-note-{{ P.ID }}”

Amaç: Ürün için not ekleme alanı oluşturmak için kullanılır.

Örnek:

<textarea data-toggle="product-note-{{ P.ID }}"></textarea>

Açıklama: Ürün için kullanıcı notlarını kaydeder.

data-toggle=”product-subscribe-{{ P.ID }}”

Amaç: Ürün abonelik seçeneklerini göstermek için kullanılır.

Örnek:

<select data-discount="{{ P.SUBSCRIBE_DISCOUNT_RATE }}" data-toggle="product-subscribe-{{ P.ID }}">
    <option value="{{ FREQUENCY }}">{{ t[FREQUENCY] }}</option>
</select>

Açıklama: Ürün için abonelik sıklığı seçmeyi sağlar.

Desteklenen Dataset Parametreleri:

  • data-discount: Abonelik indirim oranı.

data-toggle=”collection”

Amaç: Favori koleksiyonları göstermek için kullanılır.

Örnek:

<span data-toggle="collection">Favori Koleksiyon</span>

Açıklama: Kullanıcının favori koleksiyonlarını gösterir.

data-toggle=”product-multiple”

Amaç: Çoklu ürün fiyatlandırmasını göstermek için kullanılır.

Örnek:

<div data-min="{{ M_D.MIN }}" data-max="{{ M_D.MAX }}" data-percent="{{ M_D.PERCENT }}" data-vat="{{ P.DISPLAY_VAT }}" data-toggle="product-multiple">
    <span data-toggle="price-multiple">452</span>
</div>

Açıklama: Çoklu ürün alımlarında fiyatlandırmayı gösterir.

Desteklenen Dataset Parametreleri:

  • data-min: Minimum miktar.
  • data-max: Maksimum miktar.
  • data-percent: İndirim oranı.
  • data-vat: KDV oranı.

data-toggle=”product-campaign-slider”

Amaç: Ürün kampanya sliderını göstermek için kullanılır.

Örnek:

<div data-toggle="product-campaign-slider"></div>

Açıklama: Kampanyalı ürünleri bir sliderda gösterir.

data-toggle=”barcode”

Amaç: Ürün barkodunu göstermek için kullanılır.

Örnek:

<span data-code="{{ P.BARCODE }}" data-toggle="barcode">{{ P.BARCODE }}</span>

Açıklama: Ürün barkodunu dinamik olarak gösterir.

Desteklenen Dataset Parametreleri:

  • data-code: Barkod kodu.

data-toggle=”supplier-product-code”

Amaç: Tedarikçi ürün kodunu göstermek için kullanılır.

Örnek:

<span data-code="{{ P.SUPPLIER_PRODUCT_CODE }}" data-toggle="supplier-product-code">{{ P.SUPPLIER_PRODUCT_CODE }}</span>

Açıklama: Tedarikçi ürün kodunu dinamik olarak gösterir.

Desteklenen Dataset Parametreleri:

  • data-code: Tedarikçi ürün kodu.

data-toggle=”product-loader”

Amaç: Ürünleri dinamik olarak yüklemek için kullanılır.

Örnek:

<div id="catalog-{{ BLOCK.ID }}">
    <div data-toggle="product"></div>
</div>
<input type="hidden" data-id="{{ BLOCK.ID }}" data-target="#catalog-{{ BLOCK.ID }}" data-item="[data-toggle='product']" data-toggle="product-loader">

Açıklama: Ürünleri belirtilen hedef alana dinamik olarak yükler.

Desteklenen Dataset Parametreleri:

  • data-id: Yükleyici kimliği.
  • data-target: Hedef alanın seçicisi.
  • data-item: Yüklenecek öğelerin seçicisi.

data-toggle=”product-showcase”

Amaç: Ürün üst alt vitrininda daha fazla ve daha az göster şeklinde seçenekler sunmak için kullanılır.

Örnek:

<div data-toggle="product-showcase" data-height="150">
    <div data-product-showcase="content">
        <div>{{ SHOWCASE_CONTENT|raw }}</div>
    </div>
    <button data-open-text="{{ t.read_more }}" data-close-text="{{ t.hide }}" data-product-showcase="button">{{ t.read_more }}</button>
</div>

Açıklama: Ürün vitrin içeriğini gösterir ve “Daha Fazla Oku” düğmesi ile içeriği açıp kapatır.

Desteklenen Dataset Parametreleri:

  • data-height: Vitrinin yüksekliği (piksel cinsinden).
  • data-open-text: Açma düğmesi metni.
  • data-close-text: Kapatma düğmesi metni.

data-toggle=”showcase”

Amaç: Vitrindeki sekmeleri göstermek için kullanılır.

Örnek:

<div data-toggle="showcase">
    {% for TAB in SETTING.TABS %}
    <button type="button" class="{% if TAB.INDEX == FIRST_TAB.INDEX %}active{% endif %}" {% if TAB.INDEX != FIRST_TAB.INDEX %} data-url="{{ TAB.SHOWCASE.API }}" {% endif %} data-toggle="showcase-button" data-showcase-tab="#showcase-{{ BLOCK.ID }}{{ TAB.INDEX }}" {% if not TAB.TITLE %} aria-label="showcase-button" {% endif %}>{{ TAB.TITLE }}</button>
    {% endfor %}
</div>


{% for key, TAB in SETTING.TABS %}
    {% if TAB.INDEX != FIRST_TAB.INDEX %}
        <div id="showcase-{{ BLOCK.ID }}{{ TAB.INDEX }}">
            <div >
                <template data-showcase-products></template>
            </div>
        </div>
    {% endif %}
{% endfor %}

Açıklama: Vitrindeki sekmeler arasında geçiş yapmayı sağlar.

Desteklenen Dataset Parametreleri:

  • data-url: Sekme içeriğinin çekileceği URL.
  • data-showcase-tab: Hedef sekme ID’si.
  • data-showcase-products: Yükleme yapılacak ürünlerin kapsayıcısı.

Amaç: Resim veya video galeri oluşturmak için kullanılır.

Örnek:

<div data-toggle="light-gallery">
    <a href="{{ X.URL }}">
        <img src="{{ X.PATH }}" width="100" height="100">
    </a>
</div>

Açıklama: Tıklama ile resim veya videoyu tam ekran galeri modunda açar. Video desteği için href alanına video URL’si eklenmelidir.

data-toggle=”zoom”

Amaç: Ürün görsellerine yakınlaştırma özelliği eklemek için kullanılır.

Örnek:

<div data-toggle="product-slider">
    <div class="swiper">
        <div class="swiper-wrapper" data-toggle="product-gallery">
            <a class="swiper-slide aspect-product" href="{{ IMAGE.BIG }}" data-id="{{ IMAGE.VARIANT_TYPE_ID }}" data-toggle="product-image">
                <picture >
                    <img data-toggle="zoom" data-scroll="1" data-image="{{ IMAGE.BIG }}">
                </picture>
            </a>
        </div>
    </div>
    <div data-toggle="product-thumb-slider" data-direction="horizontal">
        <div class="swiper">
            <div class="swiper-wrapper">
                {% for IMAGE in P.IMAGE_LIST %}
                <div class="swiper-slide product-images-item group" data-id="{{ IMAGE.VARIANT_TYPE_ID }}" data-toggle="product-image">
                    <picture class="aspect-product">
                        <img src="{{ IMAGE.SMALL }}">
                    </picture>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

Açıklama: Ürün görsellerine fare ile üzerine gelindiğinde yakınlaştırma efekti ekler.

Desteklenen Dataset Parametreleri:

  • data-scroll: Kaydırma ile yakınlaştırma (1/0).
  • data-image: Yakınlaştırılacak görselin URL’si.

data-toggle=”product-card-catalog”

Amaç: Ürün kartlarını katalog modunda göstermek için kullanılır.

Örnek:

<div data-product="{{ P.ID }}" data-model="{{ P.MODEL_ID }}" data-toggle="product-card-catalog">
    <input type="hidden" data-toggle="is-catalog-active" value="1">
</div>

Açıklama: Ürün kartlarını katalog görünümünde düzenler.

Desteklenen Dataset Parametreleri:

  • data-product: Ürün kimliği.
  • data-model: Model kimliği.