A sablonszerkesztő a Triton kinézetben bevezetett funkció, amely az egyes oldalakon belül lévő blokkok átrendezhetőségét kezeli. A funkció a kinézetek átalakítása és az egyedi kinézetek kialakítása során is fontos szerepet játszik.
Fontos!
A sablonszerkesztő nem mindenhol érhető el, mert backend kiszolgálás szükséges a funkcióhoz. Jelenleg ez csak a termék listákban, termék részletek oldalon (és felugró gyorsnézetben) és a főoldalon elérhető!
layout_config
A sablonszerkesztő beállításaihoz egy saját node tartozik a
main.cfg fájlban. Itt lehet az egyes sablonokat hozzáadni, meghatározni az alapértelmezett értékeket, az elhelyezhető alap blokkokat megadni, illetve az egyedi blokkokat hozzáfűzni az alapértelmezettek mellé.
"layout_config": {
.....
}
layout_config.only_block_reorder
Alapvetően a sablonszerkesztőben konténereket is létre lehet hozni, azonban vannak olyan sablonok, ahol ez a funkció rész tiltásra kerül, amit ezzel az értékkel lehet vezérelni.
"layout_config": {
"only_block_reorder": "1"
}
layout_config.grid_size
A sablonszerkesztő akár FLEX akár GRID elrendezéssel van felépítve, egy meghatározott osztást követ. Az alábbi beállítással lehet ezt az osztást megadni, alapértelmezetten 12-es érték ez.
"layout_config": {
"grid_size": "12"
}
layout_config.custom_style_for_admin
Az admin felületre szükséges, hogy hasson a kinézet cfg-je olyan sablonok esetében, amikor fix konténer sorrend és méret van, hiszen ekkor azok valamilyen egzakt elrendezést követnek. A jobb átláthatóság érdekében az admin felületen a konténerek megjelenése követi az áruház felületen történő megjelenést, ezzel segítve a sablon vizualizálását.
"layout_config": {
"custom_style_for_admin": .....
}
layout_config.default_size
Az alapértelmezett szélességet lehet benne megadni a konténerekre. Alapértelmezetten a grid osztásértékét adjuk meg, hogy teljes szélességben legyenek alapértelmezetten a konténerek.
"layout_config": {
"default_size": "12"
}
layout_config.available_blocks
Az alapértelmezetten elérhető blokkokat soroljuk ebben fel. Ezek a blokkok a nevük alapján automatikusan kapnak szöveget az admin felületi funkcióban, hogy a blokk elhelyezésekor tudjuk őket azonosítani. Ez azért fontos, hogy egyrészt szabályozni tudjuk a központi blokkokat, másrészt a kinézet elmásolásakor örököltetve a cfg fájl tartalmát, az új funkcióhoz tartozó blokkok automatikusan be tudnak kerülni a funkcióba. Itt a blokkok szöveges kulcsát kell felsorolni, vesszővel elválasztva.
"layout_config": {
"available_blocks": "review,product_name,sku,...."
}
layout_config.breakpoints
Az alapértelmezett töréspontra (és egyéb töréspontokra is) meg lehet határozni alapértékeket.
"layout_config": {
"breakpoints": {
.....
}
}
layout_config.breakpoints.default
Az alapértelmezett töréspontra például így lehet meghatározni alapértékeket. A töréspontok a
common_vars node-on belül a
grid_breakpoints node tartalmazza.
"layout_config": {
"breakpoints": {
"default": {
.....
}
}
}
layout_config.breakpoints.default.sizes
Az adott töréspontra (jelen példában az alapértelmezettre) meghatározzuk a konténerek méretét helyiérték szerint. A példában az 1. konténer 12 egység széles, a 2. és 3. pedig 6 egység széles.
"layout_config": {
"breakpoints": {
"default": {
"sizes": "12,6,6"
}
}
}
layout_config.breakpoints.default.order
Az adott töréspontra (jelen példában az alapértelmezettre) meghatározzuk a konténerek sorrendjét helyiérték szerint. Azaz 1. helyen az 1-es konténer van, 2. helyen a 3-as konténer, 3. helyen pedig a 2-es konténer.
"layout_config": {
"breakpoints": {
"default": {
"order": "1,3,2"
}
}
}
layout_config.containers
Ebben a node-ban lehet felvinni az alapértelmezett konténereket. Ha nem csak átrendezhető a sablon, úgy ez módosítható számosság és méret tekintetében, ha viszont csak sorrendezhető (only_block_reorder), úgy az itt meghatározott konténerekbe lehet csak a blokkokat elhelyezni.
"layout_config": {
"containers": {
.....
}
}
layout_config.containers.[x]
Az adott sorszámú konténerhez tartozó beállítások.
"layout_config": {
"containers": {
"1": {
.....
}
}
}
layout_config.containers.[x].blocks
Az adott sorszámú konténerhez tartozó blokkok listája, amely egyben a blokkok sorrendjét is meghatározza. A blokkok azonosítóit kell itt megadni vesszővel elválasztott felsorolásban.
"layout_config": {
"containers": {
"1": {
"blocks": "review,product_name,sku,..."
}
}
}
layout_config.containers.[x].title
Az adott sorszámú konténerhez tartozó cím. Ez olyan esetben hasznos, ha a konténerek fixek, csak átrendezni lehet a blokkokat. Ilyenkor segít a konténerek behatárolásában az elemben.
"layout_config": {
"containers": {
"1": {
"title": "Termék kártya alsó része"
}
}
}
layout_config.containers.[x].tooltip
Az adott sorszámú konténerhez lehetőség van további információ megadására, ami a cím mellett jelenik meg infó ikonnal.
"layout_config": {
"containers": {
"1": {
"tooltip": "Az alsó konténer tartalma mindig ..."
}
}
}
layout_config.custom_blocks
Az adott sablonhoz lehetőség van egyedi blokkok létrehozására és a sorrendezőhöz történő hozzáadására. A custom_blocks node hozzáadása után, az alá kulcs-érték párként új blokkokat lehet létrehozni, amelynek kulcsa adja a blokk sablonjának és blokkjának a nevét, az érték pedig az admin felületen megjelenő szöveget (blokk elem felirata). Miután a cfg-ben megadtuk a szükséges értékeket, utána a
"block/sablonnév/" mappán belül létre kell hozni a sablont a kulcs nevével és benne a blokkot létrehozni, tartalommal feltölteni. Ehhez mintaként szolgálhatnak a kinézethez tartozó központi blokkok.
{
"layout_config": {
"embed_product_list_1_card_1": {
"available_blocks": "[key],review,product_name,sku,product_types,params,prices,stock,cart_and_variant",
"custom_blocks": {
"[key]": "[title]"
}
},
"content_product_details_1": {
"available_blocks": "[key],sku,breadcrumb_and_prev_next_product,product_images_list,product_images_carousel,statuses,product_name,reviews_highlighted_and_social_media,short_desc,params_highlighted,product_functions,sale_countdown,login_needed,prices,stock,variants,params_input,product_types,plus_service,product_subscription,point_highlighted,cart,bundle_products_button,warehouses,qty_discount,gift,package_offers,products_in_bundle,additional_products,similar_products,long_desc,credit,datas,cross_sale,custom_sections,reviews,retargeting,element_banner_1,element_banner_2,custom_section_1",
"custom_blocks": {
"[key]": "[title]"
}
}
}
}
