Sokan próbálnak belevágni egyedi kinézet készítésébe az UNAS rendszerben, azonban sok esetben átsiklanak a fontosabb lépéseken vagy nem vesznek figyelembe különböző, a sablonokhoz kapcsolódó megkötéseket. Ebben a fejezetben összeszedtük, hogy miként kezdj hozzá egyedi sablonod elkészítéséhez.
Mit szeretnél pontosan elérni a kinézet módosításával?
A legelső és legfontosabb kérdés, hogy egy teljesen egyedi kinézetet akarsz nulláról felépíteni vagy egy meglévőt szeretnél némiképp átszabni? Csak konkrétan egy adott oldal adott elemét szeretnéd módosítani vagy éppen csak az elemek sorrendjén akarsz módosítani? Ezen kérdések megválaszolása nagyban meghatározza azt, hogy miként is fogj hozzá a kinézet átalakításához.
Ha az általad választott kinézet 99%-ban lefedi az elvárásaidat és csak pár formázásra van szükséged, hogy elérd a kívánt megjelenést, akkor javasolt a Beállítások / Kinézet, Arculat / Kinézet testreszabása menüpont Saját CSS lapfülön lévő funkció használata, ahol a szükséges CSS formázásokat el tudod helyezni hozzá!
Fontos!
Az egyedi kinézetek esetében csak azokat a sablonokat másold el egyedibe, amelyek feltétlenül szükségesek az egyedi átalakításhoz, fejlesztéshez. Így az el nem másolt fájlok megkapják a később készült frissítéseket, módosításokat és az új funkciókat is!
Az alapul szolgáló kinézet kiválasztása
Az első és legfontosabb lépés az alap kinézet kiválasztása. Ez azért is fontos, mert az alap sablon nagyban meghatározza a kinézet felépítését, az egyes funkciók kialakításának lehetőségét és a megjelenésére is hatással van.
Ilyen fontos szempont lehet az oldalsáv megléte. Több olyan eleme van az UNAS rendszernek, ami csak az oldalsávban szerepel, így ha azokra szükség van akkor vagy ilyen kinézetből kell kiindulni vagy a szükséges elemeket közvetlenül kell elhelyezni az oldalak tartalmában.
Másik fontos tényező lehet a fejléc. Megjelenését tekintve ez is elég széles skálán mozog az egyes kinézetcsaládokat tekintve. A legtöbb kinézet esetében a kategóriák és plusz menük megjelennek a fejlécben kibontott állapotban, de vannak olyanok, amelyeknél a kategóriák egy menüpont alá vannak besűrítve pláza jelleggel. Némelyik fejlécben a kategóriák 2 szintig, valahol 3 szintig nyílnak le. Valamelyik kinézetben szimpla listaként egymás alá listázva, valamelyik esetében pedig úgynevezett megamenüként.
A paraméteres szűrő sem egy elhanyagolható tényező a döntés szempontjából. A legtöbb kinézet esetében ez oldalt jelenik meg a termékek mellett (oldalsávos kinézeteknél az oldalsávban, a nélküliekben pedig csak egy külön sávot képviselnek). Ezek alól kivétel az Orion és a Sirius kinézet. Az Orion kinézet esetében egy felül elhelyezkedő sávban helyezkedik el egy szűrés gomb, amit megnyomva lenyílik a szűrő tartalma a termékek fölé. A Sirius kinézet esetében beállítható, hogy a kategória neve mellett jelenjen meg a gomb vagy bal oldalon a kijelző széléhez tapadva, megnyomáskor pedig bal oldalról úszik be a paraméteres szűrő tartalma.
A kinézetekben lévő funkciók is fontosak lehetnek a döntés meghozatalában, hiszen vannak olyan funkciók, amelyek csak adott kinézetcsaládtól kezdődően kerültek bele a központi kinézetekbe. Ilyen funkciók:
- Lista oldal - Paraméterek megjelenítése (Orion, Polaris, Antares, Pollux, Sirius)
- Lista oldal - Típuskezelés megjelenítése (Sirius)
A kiválasztott kinézet elmásolása
Első lépés minden esetben, ha már megtaláltad a számodra megfelelő sablont vagy a megfelelő alapot a készítendő egyedi elképzelésedhez, hogy az adott kinézetet elmásold egyedivé. Ezt a Beállítások / Kinézet, Arculat / Kinézet módosítás menüpont Választható kinézet átmásolása egyedi kinézethez lapfülén tudod megtenni. Ilyenkor az egyedibe másolt dizájn az alapvetően szükséges fájlokat tartalmazza, amelyek a működéshez elengedhetetlenek. Ezután a számodra szükséges, további sablonokkal ki tudod egészíteni az egyedi kinézeted a teljesből.
Lehetséges megoldás, hogy a teljes kinézetet letöltöd és úgy használod fel egyedi készítéséhez, viszont az egyedi sablonok függetlenek az eredeti, általunk karbantartott és fejlesztett dizájn fájloktól, így az elvégzett módosítások és újítások nem kerülnek bele. Éppen ezért fontos, hogy csak azokat a sablonokat másold el, amelyek ténylegesen fontosak az egyedi kinézet szempontjából. Például jó eséllyel az információk oldalt nem fogod módosítani, így azt felesleges elmásolni az egyedi kinézetbe. Természetesen ez a Te döntésed, de tisztában kell lenned a dolog előnyeivel és hátrányaival egyaránt.
A kinézetek szempontjából felmerülhet a kérdés, hogy miért csak az alap kinézetet lehet elmásolni (pl. Polaris 1), a többi számmal ellátott testvérét pedig nem? Nos, ez azért van így, mert az egyes névben egyező, de sorszámban eltérő testvérei az alap kinézettől csupán a színvilágban térnek el, más alapértelmezett színekkel vannak ellátva a main.cfg fájlban az scss_vars node-on belül. A sablonok pedig egyszerű TWIG extend megoldással vannak behivatkozva, így ha az alapsablon változik, úgy a színváltozatok is megfelelően lekövetik azt!
Az alapvető beállítások elvégzése
A kinézet elmásolása után az első fontos dolog amit meg kell tenni, az alapvető hivatkozások módosítása - amennyiben szükségesnek ítéled meg.
Az egyik ilyen a main.cfg fájl örököltetése. Alapvetően ez a fájl tartalmazza a kinézethez tartozó összes beállítást és információt, viszont ha ezt csak így hagyod alap formájában, akkor ugyanúgy nem kapja meg az esetleges változásokat, amelyek a központi main.cfg fájlban keletkeznek. Ehhez az ebben lévő default beállítás helyett a default_config beállítást tudod használni, így a központi (nem elmásolt) fájlra fog hivatkozni, onnan behúzza első körben a rendszer az adatokat, majd a jelen fájlban lévő adatokhoz fűzi és ami mindkettőben megtalálható, azt a jelenlegivel felülírja. Így nem kell lemondani a frissítésekről, viszont egyedileg felül lehet definiálni az egyes beállításokat.
{
"ver": "4",
"default": "002000",
"variants_base_option": "2",
"product_list_param_max_count": "3",
...
Ezért is célszerű üríteni az egész main.cfg fájlt és örököltetni a központi fájlt a leírt módon és csak azzal kiegészíteni, amivel fontos (scss_vars felülírások vagy egyéb shop_config-ok hozzáadása).
{
"default_config": "002000"
}
A kinézetben használt main.js is egy alapértelmezetten központilag használt szkript, viszont az elmásolt kinézet alap esetben tartalmazza.
<head>
<script src="[unas_shop_url]/!common_design/base/002000/main.js" type="text/javascript"></script>
</head>
Ahhoz, hogy a kinézeted a saját main.js fájlt használja, a main.html sablonban levő hivatkozást kell módosítani. Ehhez a head tag-ben a központi URL-t módosítsd az egyedi kinézet URL-jére az alábbi példa szerint:
<head>
<script src="[unas_design_url]main.js" type="text/javascript"></script>
</head>
Belső sablonok átalakítása
Ha az alap elmásolás nem elegendő számodra, mert például a termék részletek oldalon is szeretnél módosítást végezni, úgy szükséges az érintett fájlok másolata is. Figyelembe kell venni, hogy az adott kinézetcsalád mennyi részletek oldallal rendelkezik és a megfelelőt elmásolni, hogy azon elvégezhesd a szükséges módosítást. Ezt a Beállítások / Kinézet, Arculat / Oldal kinézetek menüpont alatt tudod megnézni a legördülő menüben. Ha itt szerepel Termék részletek oldal, akkor nem csak egy sablon közül lehet választani az adott kinézet családban. A legördülő menüben kiválasztva láthatod, hogy nálad melyik aktív jelenleg. Ezután a teljes kinézet állományából az egyedi kinézetedhez másolhatod a megfelelő content_product_details_X.html-t, majd az ott végzett módosítások feltöltés után érvényre is jutnak.
Vannak olyan sablonok, amelyek nem csak egy, hanem kettő szintből állnak, ilyenek a termék lista oldalak. Itt van egy content_product_list_1.html, ami tulajdonképpen a lista oldal "kerete" és van egy embed_product_list_1.html, amely a tényleges termékeket tartalmazza. Ha a lista oldalon szeretnél módosítani, úgy elegendő a belső lista oldalt elmásolni, a "keretet" csak akkor szükséges, ha az ott található részeken szeretnél módosításokat alkalmazni.
Örökölt sablonok módosítása
A legújabb kinézeteink esetében az egyes belső oldalak örököltetve vannak. Ennek több oka is van, de a legfontosabb a kód újra felhasználása. Alapvetően olyan sablonokat, amelyeket minden kinézetben ugyanúgy használnál fel, felesleges minden esetben berakni az adott kinézetcsaládhoz, hiszen ha bármi változna később, akkor annyi helyen kellene módosítani. Éppen ezért egy helyen elkészül egy ilyen sablon és az őt követő kinézetek csak hivatkoznak rá. A hivatkozás viszont változóval oldható meg, hogy az adott fájl elmásolása nélkül lehessen módosítani a tényleges hivatkozást. Ezt a main.cfg fájlban el tudod végezni.
Nézzünk egy példát!
Ha a tanúsítvány boxot szeretnéd módosítani, akkor elegendő elmásolni a box_cert_1.html fájlt és abba elkészíteni a módosítást. Ehhez az adott kinézethez tartozó main.cfg fájlban megtalálod, hogy melyik kinézetből örökli - ezt kell bemásolnod az egyedi kinézetbe. Ha viszont egy termékkártyát szeretnél ugyanígy beilleszteni, akkor már körültekintőbben kell eljárnod, hiszen az több helyen is használatban lehet. A Polaris sablontól kezdve ez is változókkal van megoldva, így elegendő átírni a main.cfg fájlban a hivatkozást az aktuális kinézetére és ahol pl. az 1-es termékkártya sablon van használva, ott mindenhol az új kerül be.
Az örököltetéshez névtereket használunk: ezek a @base és @actual névterek. Az előbbi a kinézeteink gyökérkönyvtáraira mutat és onnan haladva érhető el az összes központi kinézet összes fájlja. Az utóbbi pedig az egyedi kinézet szempontjából fontos, az adott hivatkozás az egyedi kinézet mappájára kell, hogy mutasson. Ezeket akár sablonon belül vagy a main.cfg fájlban az common_vars -> layout_urls node-on belül adjuk meg.
Példa (main.cfg layout_urls node):
/* központi kinézet */
"embed_product_card_1": "@base/002100/embed_product_card_1.html"
/* egyedi kinézet */
"embed_product_card_1": "@actual/embed_product_card_1.html"
Egyedi sablonok létrehozása
A kinézeteinkben rengeteg olyan sablon van, amelyek alapvetően nem részei az áruháznak, csupán az átláthatóság, kezelhetőség miatt lettek "sablonba zárva". Ezek nagyban megkönnyítik a munkát, hiszen egy adott elemet vagy kódrészt nem kell több helyen karbantartani, elegendő egy ponton kezelni, mégis több helyen felhasználható. A választható kinézeteink esetében is ahogy haladunk az újabb kinézetek felé, egyre több ilyen megoldás jelenik meg, hogy a kód könnyebben használható legyen. Éppen ezért ezeket a sablonokat a dokumentációban nem is tüntetjük fel, hiszen ezek tartalmait az adott helyre beillesztve is ugyanazt eredményezik, azaz nem szükségesek az áruház működése szempontjából önmagukban.
A fentiek alapján tetszőlegesen fel lehet darabolni az egyes részeket, hogy külön egységként legyenek kezelve vagy újra felhasználhasd őket az áruház megjelenésében.
Egyedi szövegek alkalmazása
Az egyedi szövegek is fontos szerepet játszanak az áruház egyedi arculatának kialakításában. A felhasználási körük nagyon széles, szinte bármilyen feladatra alkalmasak. A beállítás aktiválásáról ITT olvashatsz bővebben.
Az egyedi szövegeket felhasználhatod szimpla címekként vagy kiegészítő szövegekként. Ha elhelyezel benne úgynevezett cseremezőket, akkor TWIG-gel azokat ki lehet cserélni például részletek oldalon paraméter értékre vagy egyéb termék adatra. Ha egy fejlesztést úgy készítesz el, hogy az paraméter értékektől függ (például dinamikus értékekből álló lista) vagy adott plusz menü tartalmába kell lenni a tartalomnak, esetleg adott kategóriákon kell működnie, úgy a szövegbe felsorolt értékeket átadva a sablonban fel lehet használni komplex logikák kialakítására. Így ha egy újabb oldalon van szükség a fejlesztésre, újabb paraméterrel kell működnie vagy újabb érték esetén kell érvényre jutnia, kiegészítheted az egyedi szöveget az admin felületen, ezt követően már működik is a funkciód, nem kell a kinézetbe "égetni" a feltételek ezen részét.
Paraméterek felhasználása
A termék részletek oldalon a paraméterek alapvetően egy-egy tömbben vannak elhelyezve (beállítástól függően), viszont ezen kívül direkt módon kinyerhetőek az értékeik a részletek oldalon belül, így szabadon használhatók bármilyen célra. Fontos, hogy nem szükséges a paraméter beállításainál a "Megjelenjen a termék részletek oldalon" alkalmazása, azaz a "rejtett" paraméterek is lekérhetőek ilyen formában.
{% if param_123456_disp %}
{{ param_123456_title }}: {{ param_123456_value }}
{% if param_123456_desc_disp %} {{ param_123456_desc }} {% endif %}
{% endif %}
Így tetszőleges célra fel lehet használni az adott paramétert, annak értékét és tetszőleges tartalmat lehet ez alapján generálni.
Módosítható elemek létrehozása egyedi feladatokra
A módosítható elemek az áruház egyik legszélesebb körben felhasználható elemei. Felhasználhatók szinte bármilyen tartalmi egység kialakítására, illetve változó tartalmú oldalakon belül egységes tartalom létrehozására, pl. termék részletek oldalon, lista oldalakon stb. A módosítható elem a működéséből adódóan paraméterezhető, így akár a termék adatait is megkaphatja, hogy azokat felhasználva épüljön fel a tartalma, ezáltal teljesen termékspecifikus is lehet a generált tartalom.
Az egyedi kinézet szempontjából fontos kérdés, hogy egy meglévő sablont használj fel az adott feladatra (esetleg központi sablont) vagy egyedi sablont készíts? Nos ez egyénileg eldöntendő, hiszen valaki szereti egy helyen kezelni a dolgokat, valaki pedig minden feladatra egy elkülöníthető elemet használ. Szerencsére rendszerünkben megoldható mindkettő, hiszen jól paraméterezhető az elem a kiemelésnél az elemváltozók segítségével, így belső elágazásokkal el lehet térni. Egyedi sablonok készítésében sincs korlát, így szabadon készíthető sablon minden elem számára külön-külön is.
A sablonok újrafelhasználása mellett az adatok újrafelhasználása is lehetséges, ugyanis a módosítható elem kiemelése során a megadott név, szélesség, magasság értékek alapján egyértelműen azonosítható az elem tartalma és az tetszőleges sablonnal megjeleníthető. Tehát egy konkrét, adatokkal feltöltött módosítható elem több helyen, eltérő sablonnal is használható, ezzel segítve az adminisztrátor dolgát. Erre tipikus példa a közösségi média elemek használata, ezek több helyen és formában is megjelenhetnek, de a mögöttes tartalom lényegében ugyanaz az egyetlen link.
A módosítható elemek felhasználhatóak még olyan egyedi funkció fejlesztésekhez is, ahol az adminisztrátornak komplex adatokat kell kitöltenie a fejlesztéshez. Ezt most vagy egyedi szövegben adja meg (összetett adatoknál átláthatatlan) vagy módosítható elemben, aminél az egyes mezők a szükséges adatokat tartalmazzák. A kinézetben a megadott adathalmaz pedig "táblázatszerűen" megjelenítve már megfelelően kezelhető és feldolgozható egy szkript számára.
Gyorsítótárak az áruházban
Az áruház gyors működése érdekében több gyorsítótárral is rendelkezik, illetve több elem kerül gyorsítótárazásra, ami fontos lehet a fejlesztések szempontjából is, alább felsoroljuk ezen elemeket.
A kategória box okoz a fejlesztők számára a legtöbbször problémát, ugyanis hiába módosul a kinézet, feltöltés után nem látható a változás. Ennek az elemnek is van gyorsítótára, amit a kiemelésnél a box változókban lehet szabályozni. Egyrészt a kibontásra van egy gyorsítótár (ami a lekért kategória adatokat tartalmazza), illetve a sablonokhoz is tartozik gyorsítótár, hogy a megjelenő tartalom se legyen minden alkalommal lekérve. Ezekről részletesen ITT olvashatsz.
A másik ilyen elem a paraméteres szűrő, ami 1 órás gyorsítótárral rendelkezik, viszont ellentétben a kategória box-szal, itt csak az adatok vannak gyorsítótárazva. Ezt szintén ki lehet kapcsolni, ehhez viszont már design beállítás szükséges:
"shop_config": {
"filter_box_cache_time": "0"
}
Itt a beállításban megadott érték határozza meg a gyorsítótár idejét órákban. Alapértelmezetten 1 órás gyorsítótár van, ez növelhető, illetve 0-ás értékkel kikapcsolható.
Fontos!
A gyorsítótárakat mindig vissza kell kapcsolni, mert hiányuk lényegesen és nagyságrendileg lassíthatja az oldal működését, ezért azt ajánljuk, hogy csak az adott elem fejlesztése/módosítása során legyen kikapcsolva!
