Témata

Každý web na Shopece nebo Webicu má svůj vzhled definovaný tématem (Theme), který obsahuje všechny potřebné frontendové assety (JS, CSS, obrázky, fonty, alternující šablony...)

settings.json

Základem tématu je JSON s nastavením, který obsahuje následující klíče:

• pages - nastavení viditelnosti (pozice) komponent pro jednotlivé typy stránek
• templates - šablony nahrazující defaultní šablony rendererů
• meta-tags - HTML meta tagy do hlavičky webu
• java-script - seznam javascriptů, které budou linkovány z hlavičky
• css - seznam CSS souborů, které budou linkovány z hlavičky
• css-top - seznam CSS souborů, které budou linkovány z hlavičky
• css-bottom - seznam CSS souborů, které budu linkovány z patičky
• less-top - seznam LESS souborů, které budou zkompilovány dohromady a linkovány z hlavičky
• less-bottom - seznam LESS souborů, které budou zkompilovány dohromady a linkovány z patičky

Kompilace tématu

Téma se kompiluje pomocí theme-builderu, který je umístěn v pakage.json pod názvem "build" (při instalaci na serveru je volán script npm run build )

Ukázka nastavení:  "build": "npx theme-builder ./settings.json"

Umístění souborů tématu

Z pohledu prohlížeče se zkompilované téma nachází na adrese /themes/kod-webu/kod-tematu

Odkazování na skripty

Do settings.json umisťujeme odkazy na skripty, které mohou mít formát:

1. Absolutní (pro linkování skriptů z CDN)
2. Relativní (pro linkování skriptů na serveru, stále používané pro starší sdílená CSS a JS)
3. Dynamický (pro linkování skriptů z tématu - můžeme použít na začátku skriptu %THEME_ROOT% nebo ./)

Konfigurace skriptů

V rámci seznamu skriptů je možné uvést link na skript jako string. V tento moment je skriptu v hlavičce (top) automaticky přidán defer atribut, v patičce (bottom) zůstane čistý.

Namísto stringu je možné zapsat odkaz na skript pomocí objektu, který musí obsahovat atribut file.

Příklad pro JS:

"checkout": {
    "file": "%THEME_ROOT%/js/checkout.js",
    "async": true,
    "defer": false
}

Příklad pro CSS:

"checkout-printer": {
    "file": "%THEME_ROOT%/js/checkout-printer.css",
    "preload": true,
    "media": "print"
}