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ı.
data-toggle=”live-search”
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ı.
data-toggle=”light-gallery”
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.