Data-Toggle Bileşenleri

<span data-toggle="tooltip" data-title="İpucu metni">...</span>

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

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

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

<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>

<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>

<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>

<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>

<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>

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

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

<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>

<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>

<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="true" data-direction="horizontal" data-center="true" data-speed="1500" data-effect="slide" data-autoplay="3" data-pagination-dynamic="1">
        <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>

<div data-toggle="slider" data-id="seconda-slide-in-a-slider-{BLOCK.RELATION_ID}">
    <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="1" data-direction="horizontal" data-center="false" data-speed="1500" data-effect="slide" data-autoplay="3">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <!-- İçerik -->
            </div>
        </div>
    </div>
</div>

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;
                el.slideTo(1);
            },
            slideChange: function (el) {
                const dataBg = el.slides[el.activeIndex].getAttribute('data-bg');
                swiper.element.style = dataBg;
            },
        };
        swiper.init();
    };
});

<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>
    <span data-drawer-close>
        X
    </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>

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

<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>

<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 içeriği -->
        </div>
    </div>
</div>

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

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

<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>

<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>

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

<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 }}"></div>
    </div>
</div>

<select name="sort" class="form-control min-w-fit capitalize !text-xs !h-9" data-toggle="sort" aria-label="sort options">
    {% for key, S in SORT_NAMES|filter((v, k) => v and k in ALLOWED_SORTS) %}
        <option value="{{ key }}" {% if query('sort')|default('0') == key %} selected {% endif %}>
            {{ S }}
        </option>
    {% endfor %}
</select>

{% for key, S in SORT_NAMES|filter((v, k) => v and k in ALLOWED_SORTS) %}
    <button data-toggle="sort" data-sort="{{ key }}" class="bg-gray-100 text-gray-600 text-xs rounded-custom [&.active]:bg-gray-600 [&.active]:text-white h-8 px-2 {{ query('sort')|default('0') == key ? 'active' : '' }}">
        {{ S }}
    </button>
{% endfor %}

<span {% if SELECTED_LAYOUT == '4' %}class="active"{% endif %} data-layout="4" data-toggle="layout">
    <svg width="42" height="8" viewBox="0 0 42 8" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M4 0C6.20907 3.68523e-05 8 1.79092 8 4C8 6.20908 6.20907 7.99996 4 8C1.7909 8 0 6.2091 0 4C0 1.7909 1.7909 0 4 0ZM15.2012 0C17.4101 0.000252794 19.2002 1.79105 19.2002 4C19.2002 6.20895 17.4101 7.99975 15.2012 8C12.9921 8 11.2012 6.2091 11.2012 4C11.2012 1.7909 12.9921 0 15.2012 0ZM26.3994 0C28.6084 9.25157e-05 30.3994 1.79096 30.3994 4C30.3994 6.20904 28.6084 7.99991 26.3994 8C24.1903 8 22.3994 6.2091 22.3994 4C22.3994 1.7909 24.1903 0 26.3994 0ZM37.5996 0C39.8087 0 41.5996 1.7909 41.5996 4C41.5996 6.2091 39.8087 8 37.5996 8C35.3907 7.99978 33.5996 6.20897 33.5996 4C33.5996 1.79103 35.3907 0.000218781 37.5996 0Z" fill="currentColor"/>
    </svg>
</span>

<select name="layout" class="form-control min-w-fit capitalize !text-xs !h-9" data-toggle="layout" aria-label="layout options">
    {% for key in ['4', '3', '2'] %}
        <option value="{{ key }}" {% if SELECTED_LAYOUT == key %} selected {% endif %}>
            {{ key }}
        </option>
    {% endfor %}
</select>

<div data-toggle="show-in-stock"></div>

<div data-toggle="show-out-stock"></div>

<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>

<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>

<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>

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

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

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

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

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

<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>

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

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

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

<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">

<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>

<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 %}

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

<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>

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

<div data-toggle="light-gallery">
    <div class="gallery-selector" data-src='{{ IMAGE.DATA1 }}'>
        open video
    </div>
</div>

<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>

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

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

<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>

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

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

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

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

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

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

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

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

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

{% for LANG in LANGUAGE_LIST %}
    <div class="{% if LANGUAGE == LANG.CODE %}active text-primary font-bold {% else %} hover:underline {% endif %}" data-language="{{ LANG.CODE }}" data-toggle="language">
        {{ LANG.TITLE }}
    </div>
{% endfor %}

<select id="language-mobile-{{ BLOCK.ID }}" class="form-control" data-toggle="language" data-placeholder>
    {% for LANG in LANGUAGE_LIST %}
        <option {% if LANGUAGE == LANG.CODE %} selected {% endif %} value="{{ LANG.CODE }}">
            {{ LANG.TITLE }}
        </option>
    {% endfor %}
</select>

{% for CURRENCY in CURRENCY_LIST %}
    <span class="{% if CURRENCY.SELECTED %}active text-primary font-bold {% else %} hover:underline {% endif %}" data-currency="{{ CURRENCY.TITLE }}" data-toggle="currency">{{ CURRENCY.TITLE }}</span>
{% endfor %}

<select class="form-control" data-toggle="currency" data-placeholder>
    {% for CURRENCY in CURRENCY_LIST %}
        <option {% if CURRENCY.SELECTED %} selected {% endif %} value="{{ CURRENCY.TITLE }}">
            {{ CURRENCY.TITLE }}
        </option>
    {% endfor %}
</select>

<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>