Theme.js Kullanımı

Bu dökümantasyon,theme.js deki işlevlerin ve kullanılabilecek değişkenlerin açıklamasını içermektedir.

Eklenen her blokta otomatik atanmış bir id değeri bulunmaktadır. data-block-id="BLOCK.ID" şeklinde Tüm bloklara atanan js değerleri BLOCKS değikeni içinde bulunmaktadır. Bloklarınıza önceden atanmış öntanımlı işlenmiş değerleri sayfa bazlı global olarak BLOCK_JS içerisinde bulunmaktadır.


2. id Değişkenine erişme örneği ve BLOCK Değişkeni

Blok bazlı işlemler yapmak için blok id’si kullanılmalıdır. BLOCK değeri id ye göre bulunmalı

Böylece BLOCK içindeki değişkenler kullanılaiblir hale gelir.

const selectedElement = document.querySelector('[data-toggle="selected-element"]');
const id = selectedElement.closest('[data-block-id]')?.dataset.blockId || 0;

const BLOCK = Array.from(BLOCKS).find(x => x.ID == id) || {};

const SETTING = BLOCK?.SETTING || {};


Örnek Kullanım

HTML yapısı aşağıdaki gibi olmalıdır:

<div data-block-id="123">
    <nav data-toggle="selected-element">
        <a href="/profile">Profile</a>
        <a href="/orders">Orders</a>
        <a href="/settings">Settings</a>
    </nav>
</div>