Snippet

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

🌐 Tema Mimarisi snippet