A design configok változók globálisan, a kinézetre hatással lévő beállítások. Ezek a beállítások szánt szándékkal képezik a
main.cfg alapját és túlnyomó részét, hiszen ezek az adott kinézethez kapcsolódnak, így az áruház nem örököl belőle beállítást, következésképp kinézet váltás esetén a másik kinézetben felsorolt beállítások fognak a továbbiakban az áruház megjelenésére hatni.
shop_config
A kinézethez beállított shop config-okat lehet vele beállítani. A shop config-ok globálisan, mind a kinézetre, mind az adminisztrációs felület működésére és megjelenésére hatást gyakorolnak, így használatuk és módosításuk nagy körültekintést igényel. A megadott shop config adott esetben letilthat egy funkciót, befolyásolhatja egyes szkriptek beépülését az áruház működése során vagy további lehetőségeket engedélyez az adminisztrációs felületen való testre szabhatóság szempontjából.
"shop_config": {
.....
}
shop_config.img_resize_ratio
A termékképek négyzetes kiegészítését kapcsolhatod be vele. A beállítás mellett ha van egy nem négyzetes termékkép, akkor a kisebb oldal mentén kiegészíti a rendszer mindkét felén egyforma részen fehér színnel, hogy végül négyzetes képet adjon vissza.
"shop_config": {
"img_resize_ratio": "1"
}
shop_config.lazyload
Ez a beállítás az áruházban globálisan bekapcsolja a lazyload funkciót, amelynek köszönhetően a képek csak akkor töltenek be, ha azok már ténylegesen megjelennek a felhasználó számára a böngészőben, egészen addig egy helyőrző kép jelenik meg, ami a tényleges képre cserélődik.
"shop_config": {
"lazyload": "1"
}
shop_config.lazyload_bgset
Hasonló az alapvető lazyload funkcióhoz, viszont ez a funkció a background esetén adja vissza
style attribútumban az adott elem
background-image URL-ét.
"shop_config": {
"lazyload_bgset": "1"
}
shop_config.box_compare
Ez a shop config az összehasonlítás box alapbeállítás értékére hat, miszerint "Az összehasonlítás ikonra kattintva ugorjon fel az összehasonlítás ablak" beállítás lesz az alapértelmezett, ezáltal nincs összehasonlítás box ebben az esetben. Emellett az adminisztrációs felületen letiltásra kerül a hozzá tartozó beállítás a
Beállítások / Alapbeállítások menüpont alatt lévő
Működés lapfül
Termékkel kapcsolatos szekciójában található
Termék összehasonlítás hogyan működjön beállításnál.
"shop_config": {
"box_compare": "0"
}
shop_config.news_item_per_page
Ez a shop config befolyásolja azt, hogy a hírek oldalon az alapértelmezett 30 darab helyett mennyi hír jelenjen meg oldalanként.
"shop_config": {
"news_item_per_page": "20"
}
shop_config.order_print_payment_status
Ezzel a shop configgal tudod bekapcsolni, hogy a megrendelés nyomtatása oldalon megjelenjen a fizetési státusz. Ez csak adminisztrációs felületről nyomtatott megrendelés vagy szállítólevél esetén lehetséges.
"shop_config": {
"order_print_payment_status": "1"
}
shop_config.order_print_stock
Ezzel a shop configgal tudod bekapcsolni, hogy a megrendelés nyomtatása oldalon megjelenjen a termékeknél a raktárkészlet.
"shop_config": {
"order_print_stock": "1"
}
shop_config.order_print_images
Ezzel a shop configgal tudod bekapcsolni, hogy a megrendelés nyomtatása oldalon megjelenjenek a termékképek.
"shop_config": {
"order_print_images": "1"
}
shop_config.text_custom
Ezzel a shop configgal lehet bekapcsolni az egyedi szövegek funkciót. Ennek eredményeként a
Beállítások / Szövegek, Nyelvek / Alap szövegek menüpont alatt a
Válasszon szöveg csoportot legördülő menüben megjelenik az
Egyedi szövegek opció. Az itt lévő szövegmezőkben megadott egyedi szövegekre lehet hivatkozni saját mezővel, amelyek az adott szövegmező sorszámát tartalmazzák. Példaként a mintakódban az első ilyen szövegmezőhöz tartozó mező látható.
"shop_config": {
"text_custom": "1"
}
{{ text.custom.1 }}
shop_config.text_custom_names
Ezzel a shop configgal az egyedi szövegekhez lehet leírást társítani, ami az admin felületen megjelenik, az adott sorszámú szövegmező jobb felső sarkában a sorszáma mellett.
"shop_config": {
"text_custom_names": {
"1": "Szöveg1",
"2": "Szöveg2",
"3": "Szöveg3"
}
}
shop_config.img_retina_min
Ezzel a shop configgal tudod beállítani, hogy a termékképek esetén a retina méret minimum hányszorosa legyen az eredi méretnek.
"shop_config": {
"img_retina_min": 1.5
}
shop_config.img_retina_max
Ezzel a shop configgal tudod beállítani, hogy a termékképek esetén a retina méret maximum hányszorosa legyen az eredi méretnek.
"shop_config": {
"img_retina_max": 2
}
Példa
A img_retina_min és img_retina_max értékei egy intervallumot definiálnak. A rendszer megvizsgálja, hogy az adott termékképet a sablonban eredetileg legenerált méretéhez képest maximum hányszorosában tudja visszaadni és ha ez az intervallumon belül van, akkor azt adja vissza. Ha a minimum alatt van ez az arány, akkor nem ad vissza retina képet, ha a maximum felett van, akkor a maximum értékű retina képet adja vissza.
Egy 1000x1000-es kép esetében, ha az eredetileg legenerált kép 600x600-as, az intervallum 1.5 és 2, akkor ilyen esetben egy 960x960-as képet ad vissza, ahol az arány 1.6x lesz.
Egy 1000x1000-es kép esetében, ha az eredetileg legenerált kép 200x200-as, az intervallum 1.5 és 2, akkor ilyen esetben 400x400-as képet ad vissza, ahol az arány 2x lesz.
Egy 1000x1000-es kép esetében, ha az eredetileg legenerált kép 800x800-as, az intervallum 1.5 és 2, akkor ilyen esetben nem ad vissza retina képet, mivel a legnagyobb méretű kép, amit le tud generálni az csak 1.25x arányú, ami nem éri el a minimumot.
ver
Az adott kinézet verzióját adhatod meg vele. A verzió a működés szempontjából fontos, meghatározza, hogy az adott kinézethez kapcsolódóan a funkciók milyen módon működnek és mely funkciók érhetőek el. Orion, Castor, Polaris, Antares és Pollux kinézetek esetén az érték előre meghatározott: 4
"ver": "4"
subver
Az adott kinézet alverzióját adhatod meg vele. Ezzel a beállítással lehet a központi sablonjainkba elhelyezni olyan átalakításokat, amelyek az egyedi kinézetekben gondot okozhatnának, így egy alverzióval különíthetőek el. Az egyedibe másolt kinézet
main.cfg fájl nem örökli meg a központiból ezt a változót, így annak az alverziója marad az eredeti, így a kinézet működésében is az eredeti marad. Lokálisan az egyedi kinézet
main.cfg fájljában ki lehet egészíteni ezzel a beállítással. A beállítás maga egy globális mezőt vezérel, ami értékül kapja az itt megadott számot, így bármelyik sablonban fel lehet használni elágazások készítéséhez.
"subver": "1"
{% if subver >= 1 %}
Ez a beállítás kiegészül még azzal, hogy az áruház teljes egészén a body tag kap egy
design_subverX class-t, ami meghatározza melyik alverzión fut a kinézet, így lehet CSS-ben is ehhez kapcsolódó selectorokat készíteni. Illetve egy JS változó is létrejön
unas_design_subver néven, ami tartalmazza az áruházon lévő kinézet alverziójának a számát, így a szkriptekben is lehet elágazásokat készíteni ennek megfelelően.
default
A kinézet alapértelmezett nevét határozza meg, amely főként a színváltozatok esetében fontos. A megadott érték alapján tudja az áruház, hogy ha az egyedi kinézetben nem szerepel egy adott oldal vagy elem sablonja, akkor alapértelmezetten melyik kinézet gyári sablonját használja fel a megjelenítés során. Az egyedi kinézetben csak a megadott sablonok jelennek meg ténylegesen egyedi módon, a többi oldal a meghatározott gyári sablonok szerint jelenik meg.
"default": "001800"
default_config
Hasonlóan az előzőhöz, az alapértelmezett kinézetet határozhatod meg vele, ahonnan a beállítások öröklődnek. Ez a gyári kinézetek színváltozatainál lényeges, ahol meg tudod adni, hogy melyik alap kinézet beállításait örökölje, így csak azokat kell megadni vagy felülírni, amelyek ettől eltérnek.
"default_config": "001800"
selector_demo
Az adminisztrációs felület
Beállítások / Kinézet, Arculat / Kinézet kiválasztása menüpontjában az adott kinézethez tartozó
Mintaáruház gombjának a megnyomása az adott oldalra irányítja a felhasználót. Ez kvázi az adott gyári sablon mintaáruházára mutat.
"selector_demo": "http://orion1.unas.hu"
design_color1
Az adott gyári kinézethez kapcsolódóan a megjelenő színes négyzet bal felső sarkában lévő háromszög színének hexa értékét lehet megadni vele.
"design_color1": "#6ca3d9"
design_color2
Az adott gyári kinézethez kapcsolódóan a megjelenő színes négyzet jobb alsó sarkában lévő háromszög színének hexa értékét lehet megadni vele.
"design_color2": "2c2c2c"
Fontos!
A selector_demo, design_color1 és design_color2 beállítások csak a gyári kinézetek esetén lényegesek, egyedi kinézet esetén elhagyhatóak.
variants_base_option
Ez a config befolyásolja, hogy a változatkezelés működését. Két értéke lehet:
1 esetében termék részletek oldalon a változatkezeléshez kapcsolódó legördülő menübe automatikusan bekerül a "Kérem válasszon" opció, termék lista oldalon pedig a változat neve.
2-es érték esetén termék részletek és termék lista oldalon is automatikusan bekerül a változatkezeléshez kapcsolódó legördülő menübe a "Kérem válasszon" opció.
"variants_base_option": "2"
product_list_param_max_count
Egyrészről aktiválja a funkciót, hogy adminisztrációs felületen a termék paraméternél be lehessen állítani, hogy megjelenjen termék lista oldalon, másrészt meghatározza globálisan azt is, hogy hány darab ilyen paraméter jelenjen meg az egyes lista oldalakon.
"product_list_param_max_count": "3"
box_page
Engedélyezi azt a funkciót, hogy egy plusz menü esetén be lehessen állítani a "Jelenjen meg főoldali szekcióban" opciót a plusz menü szerkesztésénél. Ehhez szükség van egy
Tartalmi elem box elhelyezésére a
Start oldalon.
"box_page": "1"
css_include
Ezzel a beállítással lehet az egyes funkcióhoz vagy szkripthez kötötten hozzáadni a kinézethez a hozzá tartozó CSS-t. Ez azért fontos, hogy feleslegesen ne kerüljön bele a kinézetbe az adott CSS rész, ha nincs is rá ténylegesen szükség.
"css_include": {
"sliderpro": "1",
"slick": "1",
"autocomplete: "1"
}
function_forbidden
Ezzel a beállítással lehet egyes gyári funkciókat kikapcsolni az adott kinézetben. Ennek eredményeként az adminisztrációs felületen sem lesz a továbbiakban elérhető az adott funkció.
"function_forbidden": {
.....
}
function_forbidden.banner_box
Az alábbi beállítás letiltja az adott kinézetben a banner boxokat.
"function_forbidden": {
"banner_box": "1"
}
function_forbidden.product_data_box
Az alábbi beállítás letiltja az áruházban a termék plusz adatokra való szűrés boxot.
"function_forbidden": {
"product_data_box": "1"
}
function_forbidden.counter_box
Az alábbi beállítás letiltja az áruházban a látogatószámláló boxot.
"function_forbidden": {
"counter_box": "1"
}
function_forbidden.last_product_box
Az alábbi beállítás letiltja az utoljára megtekintett termékek boxot.
"function_forbidden": {
"last_product_box": "1"
}
layout_plus
Az adott beállításban megadott kulcs-érték párban megadhatja, hogy az adott sablon melyik fő sablonnal jelenjen meg.
"layout_plus": {
"product_details": "details_layout"
}
title_config
Ezzel a beállítással meg tudja adni, hogy az adott sablon fejléce milyen tag-ekkel jelenjen vagy éppen ne jelenjen meg. Az engedélyezett értékek: disable, h2, h3, h4, h5, h6, div. Ez a beállítás hatással van az
Oldalcím elem működésére, amely a sablonokban
[[ title ]] mezőként szerepel.
"title_config": {
"product_details": "h2",
"contact": "disable"
}
scss_vars
Ebben a beállításban lehet különböző SCSS változókat létrehozni, amik a common.scss és custom.scss fájlok fordításakor felhasználásra kerülnek. Emellett ha Bootstrap-et használsz a kinézetben, akkor ezáltal lehetőség van a bootstrap.scss-t felparaméterezni.
"scss_vars": {
"$primary": "#6ca3d9",
"$secondary": "#fff",
"$text-muted": "#999",
"$container-max-width": "1230px"
}
cart_fly_id
A beállítással lehetőséged van megadni, hogy ha a termékkép repüljön a kosár felé animáció aktív, akkor milyen azonosítójú elem felé repüljön pontosan.
"cart_fly_id": "ID"
cart_refresh_force
A nem látható kosár boxok frissítését aktiválja olyan esetben, ha több kosár box is ki van emelve a kinézetben.
"cart_refresh_force": "1"
paging_count
A beállítással lehetőséged van megadni, hogy a beágyazott lapozás hány darab oldalszámot jelenítsen meg az összesből alapesetben. A megjelenő oldalak száma
2n+1 képlettel adható meg, ahol az
n a módosítható érték. Alapértelmezetten ez az érték
6.
"paging_count": "10"
paging_count_mobile
A beállítással lehetőséged van megadni, hogy a beágyazott lapozás hány darab oldalszámot jelenítsen meg az összesből mobil nézet esetén. A megjelenő oldalak száma
2n+1 képlettel adható meg, ahol az
n a módosítható érték. Alapértelmezetten ez az érték
1.
"paging_count_mobile": "4"
page_content
A beállítással a tartalmi elem tulajdonságait lehet beállítani az adott kinézethez kapcsolódóan. A példában a reszponzív tartalmi elemek esetében a
blog típusú tartalmi elemek méretének a beállítása látható az egyes töréspontokra. Tekintve, hogy a kinézetek bootstrap alapúak, a megadott értékek a
col-okhoz kapcsolódó érték, az adott töréspontnál az adott típusú tartalmi elem a megadott oszlopszélességet kapja meg. Ez az adott kinézethez beállítható alapértékeket definiálja, ha azok eltérnének a teljes szélességtől (12). Természetesen ezek az adott tartalmi elemek szerkesztésénél egyedileg felüldefiniálhatóak.
"page_content": {
"blog": {
"content_size": {
"lg": "6",
"md": "12",
"sm": "12",
"default": "12"
}
}
}
common_vars
Az alábbi beállítás segítségével változókat lehet definiálni a kinézet számára, amelyeket a fő sablon kivételével bárhol fel lehet használni. A példakódban a kinézethez tartozó töréspontok vannak elhelyezve, amelyek a módosítható elemek esetében vannak felhasználva a töréspontok kezelésére; illetve a sablonban használt hivatkozások az egyes kiegészítő sablonokra, amelyeknek köszönhetően nem kell például egy adott termékkártya módosításához elmásolni az összes sablont, ami behívja az adott kártyát, hanem elég itt átírni a hivatkozást és módosítani az adott kártya sablonján. Itt bármilyen változót létre lehet hozni, például paraméter azonosítókat, amelyekre szűrőt szeretnél kialakítani vagy éppen egy tömböt feltölteni paraméter azonosítókkal, amelyeken végighaladva kiemelve őket direktbe a termék részletek oldalon.
"common_vars": {
"grid_breakpoints": {
"lg": "992",
"md": "768",
"sm": "576"
},
"layout_urls": {
"embed_product_card_1": "base/002000/embed_product_card_1.html",
"element_bg_1": "base/001800/element_bg_1.html",
"embed_tag_filter_1": "base/002000/embed_tag_filter_1.html"
}
}
backvar
Az alábbi beállítás segítségével a fájlban lévő back-end változókat lehet felülírni a config fájlon keresztül. Ez azért fontos, mert így ha az adott sablonban van valamilyen back-end változó definiálva, akkor nem szükséges a sablon elmásolása ahhoz, hogy módosítsuk azt, elég csak átírni itt a rá vonatkozó értéket. A példában egy beágyazott termék listában a legenerált képméreteket kerülnek meghatározásra, illetve engedélyezésre kerül a vélemények megjelenése.
"embed_product_list_1": {
"main_img_maxwidth": "264",
"main_img_maxheight": "264",
"enable_reviews": "1"
}
user_config
Ebben a node-ban lehet megadni a kinézethez tartozó beállításokat, amelyek az adminisztrátorok számára megjelennek az admin felületen a
Beállítások / Kinézet, Arculat / Kinézet testreszabása menüpont
Kinézet beállítások lapfülén. A user config-ok globálisan, mind a kinézetre, mind az adminisztrációs felület működésére és megjelenésére hatást gyakorolnak. Ezek olyan funkciókhoz szükségesek, amik erősen backend orientáltak, éppen ezért egyedi fejlesztésekre nem használatosak.
"user_config": {
.....
}
customizable_elements
Ebben a node-ban lehet megadni a kinézethez tartozó testreszabási lehetőségek, amelyek az adminisztrátorok számára megjelennek az admin felületen a
Beállítások / Kinézet, Arculat / Kinézet testreszabása menüpont
Kinézet testreszabása lapfülén. Ezek globálisan, mind a kinézetre, mind az adminisztrációs felület működésére és megjelenésére hatást gyakorolnak. Ezen funkcióval olyan beállítások készíthetők (színezések, méretezések, stb), amelyek később a kinézet elkészülte után segítik az adminisztrátorok munkáját. A kinézet testreszabható (mint a választható kinézeteinkben) és nem kell kód szinten elvégezni azt. A válaszható kinézeteink egyes testreszabási lehetőségei nyelvesítve vannak az admin felületen, az egyedi megoldások viszont csak az itt megadott nevükön tudnak megjelenni. A node-ok sorrendjének jelentősége van a működés szempontjából.
"customizable_elements": {
"group_name": {
"element_name": {
"type": "color|font-weight|color-opacity"
}
}
}
Első körben a csoportnevet határozzuk meg, ami adminon elkülöníti az egyes szekciókat. Ezután az elem nevét határozuk meg, ami egyezik a befolyásolni kívánt SCSS változó nevével. Pl. a
$primary vezérszínt a
primary nevű elembe adjuk meg. Végül megadjuk a típusát a módosítási lehetőségnek, kvázi milyen értéket akarunk kiválasztani. A primary színt alapul véve:
"customizable_elements": {
"base-colors": {
"primary": {
"type": "color"
}
}
}
