🌐 Tema Mimarisi snippet
📁 Giriş
Snippetlar ana section
içerisine dahil edilebilen fakat birden fazla yerde de kullanılabilen küçük komponenentlerdir. Section içerisindeki dosyalar gibi snipper içindeki dosyalarda da twig ya da vuejs ile işlem yapılabilir
Değiştitilebilri Snippet Dosya Yapısı
Yukarıda listelenen dosyalar, tema mimarisinin farklı bölümlerini temsil eder. Her bir dosya, belirli bir işlevi yerine getirmek için tasarlanmış bir komponenttir denebilir.Genel prensip olarak
klasöradı.dosyaadı
şeklinde araya nokta konarak kullanılır.
Aşağıda kullanılabilir snippetlar listelenmiştir.
header
├── live-search
└── mobile-menu
product-detail
├── catalog
├── images
├── related
├── variant-1
└── variant-2
product-list
├── catalog
├── product-card
├── related
├── variant-1
└── variant-2
Twig Dosyalarında snippet
ile İnclude Ederek Kullanmak
twig içerisinde dahil edilmek istenirse snippet('dosyayolu', )
fonksiyonu ile include veya dahil edilir. snippet fonksiyonu kullanılır.
Doğrudan Kullanım
{{ snippet('header.live-search.default') }}
Değiken Atama
Değişken atanmak istendiğinde de atanabilir. Örnek: snippet('dosyayolu', {degisken:değer, degisken2:değer2})
<div>
{{ snippet('share', {IMAGE_URL: BLOG.IMG2.PATH|default(BLOG.IMG1.PATH)|default(BLOG.IMAGE_URL)|default(BLOG.IMAGE), TITLE: BLOG.TITLE} ) }}
</div>
Header mobil menu, ürün detayda ise ürün resimleri, ilişkili ürünler, varyant 1 ve varyant 2 alanları panelden seçilebilir olduğundan dolayı setting ile önecelikli çağrılır
Header Mobil Menu
{{ snippet(SETTING.subfolder_header_mobile_menu|default('header.mobile-menu.accordion') ) }}
Ürün Detay Resim
{{ snippet(SETTING.subfolder_product_detail_images|default('product-detail.images.vertical')) }}
Ürün Detay İlişkili Ürün
{{ snippet(SETTING.subfolder_product_related|default('product-detail.related.default')) }}
Ürün Detay Varyant 1
{{ snippet(SETTING.subfolder_product_variant_1|default('product-detail.variant-1.default')) }}
Ürün Detay Varyant 2
{{ snippet(SETTING.subfolder_product_variant_2|default('product-detail.variant-2.default')) }}
Twig Dosyalarında popup
vb olarak js
İle Kullanmak
twig içerisinde doğrudan dahil edilmek yerine js ile vb popup gibi kullanılmak istenirse snippet_uri()
şeklinde dahil edilebilir. snippet fonksiyonu kullanılır.
Js Kullanımı Değiken Atama
Değişken atanmak istendiğinde de atanabilir. Örnek: snippet_uri('dosyayolu', {degisken:değer, degisken2:değer2})
<div data-width="640" data-url="{{ snippet_uri('product-store', {'include':'product-detail', 'product_id':P.ID, 'code':P.PRODUCT_CODE }) }}" data-toggle="popup">
</div>