Az áruház felépítése több alapelemből áll össze, amelyek különböző hierarchiai szintet képviselnek. A különböző boxoknak, oldaltartalmaknak és beágyazott elemeknek saját sablonjaik vannak, amik a fő sablonokba kerülnek beillesztésre, ez a sablon a
main.html. Alapértelmezetten minden oldalon ez a fő sablon kerül betöltésre, azonban ezt kétféle módon felül lehet bírálni.
Az egyik megoldás, ha a
main.html fájlt duplikálod és az új fájl nevében az alábbi konvenciót követed:
main_[sablon_neve].html. Itt a sablon neve az oldal tartalmául szolgáló oldaltartalom sablonjának a neve, például a
main_product_details.html, amely csak a termék részletek oldal esetében kerül betöltésre. Ez automatizáltan történik, az áruház a feldolgozás során figyeli a kinézetben megadott fő sablonokat és ha az adott oldalhoz tartozóan megtalálja azt, akkor abba tölti be a tartalmat és így kerül megjelenítésre az oldal.
A másik megoldás, hogy a
layout_plus design beállításban megadod az eltérő fő sablont használó oldaltartalom sablon nevét és hozzá megadod azt a nevet, amit a fájlnévben használtál. Az alábbi példában a termék részletek oldal (product_details) a
main_product_details.html fő sablonnal fog betölteni.
"layout_plus": {
"product_details": "reszletek"
}
Alapértelmezetten van néhány ilyen fő sablon, amelyek a gyári kinézetek részét képezik. Ilyen a
main_email.html, ami az email kereteként szolgál, a
main_landing.html, ami a landoló oldalnak a kereteként szolgál illetve a
main_login_wholesale.html, ami a bejelentkező felület kereteként szolgál, ha belépés nélkül nem látható az áruház vásárló felülete.
Két szintű renderelés
Alapvetően a kinézet a TWIG sablonnyelv alapján készül és aszerint fordul le, azonban ez jelen esetben két szinten történik. Első körben az úgymond belső sablonok kerülnek fordításra pl. box_cart_1.html, a bennük lévő TWIG változók a megszokott "{%" és "{{"
marker-ekkel, aminek az eredménye egy kész HTML tartalom lesz. Ezután következik a második renderelés, amikor nem az eredeti TWIG változókat figyeli a rendszer, hanem a "[%" és "[["
marker-eket, így azok az első lépésben egyszerű szövegként maradtak a HTML-ben, majd a második lépésben ezek lesznek, amik befolyásolják a kimenetet.
Ilyen módon lehetőség van az egyes boxokon belül változókat definiálni az ottani feltételek mentén (pl. belépés box esetében a logged_in ágba helyezz el egy második körben leforduló [% set... %] részt) és azok segítségével másik belső sablonban vagy a fő sablonban is tudsz elágazásokat készíteni. A leggyakoribb ilyen eset, ha a logged_in feltételre szükség van a fő sablonban vagy valamilyen ajánlóban a belépés boxból, vagy a pénznemváltó/nyelvváltó aktuális értéke mentén megjeleníteni valamilyen specifikus tartalmat.
Például csak bejelentkezett vásárlónak jelenjen meg egy ajánló:
box_login_1.html-ben:
{% if logged_in %}
[% set logged = true %]
{% endif %}
main.html-ben:
[[ box|name:shop_login; ]]
...
[% if logged %]
[[ box|name:shop_art;content:new;product_list_layout:5; ]]
[% endif %]
Fontos!
Mivel soronként kerül feldolgozásra minden, így a változó deklarálás mindenképp annak felhasználása előtt történjen, egyéb esetben nem tud működni a megoldás ilyen formában!
Alapértelmezett változók a sablonban
A
start elembe kerülnek a különféle szkript hivatkozások, amelyek a rendszer működéséhez nélkülözhetetlenek. Ezeket a back-end automatikusan válogatja össze a bekapcsolt funkciók és szolgáltatások függvényében, illetve a beállított kinézet alapján. Továbbá ide kerülnek a különféle meta tag-ek, ezért ez a
head elembe kerül fixen.
[[ start ]]
A
body_start változóba kerülnek bele a különféle olyan működéshez szükséges elemek, mint a felugró ablakok HTML tartalma és a hozzájuk tartozó szkriptek. Emellett ide kerülnek a
Beállítások / Kinézet, Arculat / SCRIPT beszúrás menüpont alatt beszúrt szkriptek, amik a
body start típussal lettek létrehozva.
[[ body_start ]]
A
title változó tulajdonképpen az oldal címét adja vissza, de mivel ez rendelkezik saját sablonnal, így kvázi a sablon tartalmát adja vissza és az kerül beillesztésre a változó helyére.
[[ title ]]
A
breadcrumb változó tulajdonképpen az adott oldalhoz tartozó "kenyérmorzsát" adja vissza, de mivel ez rendelkezik saját sablonnal, így kvázi a sablon tartalmát adja vissza és az kerül beillesztésre a változó helyére.
[[ breadcrumb ]]
A
content változó tulajdonképpen az adott oldalhoz tartozó oldaltartalmat adja vissza. Ide mindig azon sablon tartalma tölt be, amelyik oldalon vagyunk, az ahhoz tartozó
content_[name]_[x].html, ahol a
name az oldal neve, az
x az oldalkinézet sorszáma.
[[ content ]]
A
body_end változóba kerülnek bele a különféle olyan működéshez szükséges elemek, mint a különböző affiliate integrációkhoz tartozó tartalmak. Emellett ide kerülnek a
Beállítások / Kinézet, Arculat / SCRIPT beszúrás menüpont alatt beszúrt szkriptek, amik a
body end típussal lettek létrehozva.
[[ body_end ]]
Az
end változóba kerülnek különféle szkriptek, amik a rendszer működéséhez nélkülözhetetlenek, ezeket a szkripteket a back-end állítja össze a bekapcsolt funkciók és szolgáltatások függvényében automatikusan.
[[ end ]]
