Editor kódu

Väčšinu grafických úprav je možné v Upgates vykonať pomocou modulu Dizajnér (viac tu). Editor kódu vám umožní s touto nastavenou grafikou ďalej pracovať a prispôsobiť ju svojim najnáročnejším požiadavkám.

Pre prácu v Editore kódu je potrebné mať aspoň základné znalosti kódovania webových stránok.

Zobrazenie na testovacej verzii

Všetky grafické úpravy vykonávané v Dizajnérovi alebo Editore kódu sa vykonávajú najskôr v testovacej verzii. Aby sa zmeny prejavili tiež na ostrej doméne, je potrebné testovaciu verziu preklopiť (viac tu).

Len vlastné súbory na FTP (viac tu) sa automaticky zobrazia na oboch verziách ihneď, takže nie je potrebné ich preklápať.

Základné možnosti

Pri e-shopoch Upgates sa grafika primárne tvorí pomocou modulu Dizajnér. Takto systémovo generovanú grafiku si však môžete doupraviť v Editore kódu. Pokiaľ využijete len základné možnosti Editora kódu, nie je potrebné vypínať modul Dizajnér. Neupravujete totiž systémový kód grafiky, ale tvoríte jeho grafickú nadstavbu.

Možnosti úprav

V administrácii prejdite do  Grafika / Editor kódu.

• Štýly CSS - V oddiele Styles sa zobrazujú nasledujúce súbory:
  • _custom.scss: slúži na pridanie vlastných štýlov. Viac tu.
  • _variables-custom.scss: slúži na úpravu premenných pre systémové štýly zo súboru _variables.scss (viac tu). Táto funkcia je dostupná od grafických šablón verzie 4.0 (viac tu).
  • _variables.scss: premenné používané pre systémové štýly. Tento súbor je iba na čítanie, úpravy je potrebné vykonávať v súbore _variables-custom.scss.
• Javascript - V základných možnostiach je možné len pridať vlastný súbor .js, nie upravovať systémové súbory. Viac tu.
• Poznámky - V oddiele Poznámky sa nachádza súbor, do ktorého si môžete zapisovať informácie napr. k zmenám vykonaným v kóde. V prípade zmeny verzie dizajnu na novšiu verziu sa tento súbor neaktualizuje (viac tu).

Rozšírené možnosti

Pokiaľ chcete, aby mal Váš e-shop jedinečnú grafiku na mieru, bude potrebné zasiahnuť do kódu HTML šablón (prípadne tiež Javascriptu). Na to je potrebné aktivovať rozšírené možnosti Editora kódu.

K úpravám budete potrebovať odborné znalosti kódovania webových stránok. Prípadne môžete využiť služby niektorého z našich expertov z Marketplace.

Upozornenie! Ak upravujete veľkosti obrázkov, spustí sa pregenerovanie cache všetkých obrázkov, ktorý môže trvať pár minút. Úpravy tak nemusíte vidieť ihneď po vašom uložení.

Možnosti úprav

V administrácii prejdite do  Grafika / Editor kódu.

• Štýly CSS - V oddiele Styles sa zobrazuje súbor _custom.scss, _variables-custom.scss a _variables.scss. Východiskové CSS štýly zostávajú v grafike stále a nie je možné ich vypnúť. Je možné ich len prepísať štýlmi vlastnými. V oddiele Theme sa ďalej zobrazuje súbor _theme.scss. Viac tu.
• Javascript - V oddiele Scripts sa zobrazuje systémový súbor common.js (viac tu). Je možné pridať vlastný súbor.js (viac tu).
• HTML šablóny - V oddiele Templates sa zobrazuje stromová štruktúra šablón grafiky. Viac tu.
• Poznámky - V oddiele Poznámky sa nachádza súbor, do ktorého si môžete zapisovať informácie napr. k zmenám vykonaným v kóde. V prípade zmeny verzie dizajnu na novšiu verziu sa tento súbor neaktualizuje (viac tu).

Aktivácia rozšírených nastavení

Čo tým získate?

• Vyššie uvedené možnosti editácie grafiky.
• Automaticky sa vytvorí záloha grafiky vytvorenej v module Dizajnér pre prípad, že sa k nej v budúcnosti budete chcieť vrátiť.

O čo tým prichádzate?

• O možnosť naďalej používať modul Designer.
• O nové funkcie, ktoré sa prejavia v budúcich verziách grafiky.
• O všetky úpravy vykonané v Editore kódu v prípade, že sa v budúcnosti budete chcieť vrátiť k modulu Dizajnéra.
• O technickú podporu ku grafike zo strany Upgates (úpravy a opravy chýb). Grafiku získate v stave tak, ako je, s prípadnými chybami, zodpovedajúcemu aktuálnemu stavu systému. Beriete na vedomie, že vlastná grafika od vás bude vyžadovať pravidelnú údržbu a s tým spojené náklady.

Čo sa stane po aktivácii?

1. Po aktivácii sa zruší modul Dizajnér.
2. Na ostrej verzii na doméne (viac tu), ktorú vidia vaši zákazníci, však zostáva grafika stále pôvodná.
3. Upravíte si grafiku v Editore kódu na testovaciu verziu e-shopu (viac tu).
4. Akonáhle máte všetko hotové, preklopíte testovaciu verziu na ostrú doménu. Viac tu.
5. Pokiaľ by bol problém, môžete vykonané zmeny vrátiť zo zálohy. Viac tu.

Rozhranie editora kódu

Po aktivácii rozšírených možností sa v administrácii e-shopu sprístupní grafické rozhranie editora kódu. V ňom je možné vykonávať všetky úpravy kódu, štýlov a skriptov.

K súborom nemožno pristupovať cez FTP a vykonávať úpravy v externom editore.

V ľavom stĺpci editora sú v stromovej štruktúre dostupné jednotlivé súbory.

V priečinku Templates je možné vytvárať vlastné (pod)zložky a .phtml súbory. Takto vytvorené zložky je možné zmazať iba v prípade, že neobsahuje žiadne súbory ani podzložky.

Postup v administrácii

1. V priečinku Templates choďte na niektorú zložku, aby sa zobrazila jej ponuka.
2. Kliknite na tlačidlo +.
   
3. Zobrazí sa vyskakovacie okno. V poli Názov zadajte názov novo vytváranej položky. Pomenovanie podlieha niekoľkým obmedzeniam:
   • Je možné použiť iba znaky: a-z, A-Z, 0-9, -, _
   • Max. dĺžka názvu je 50 znakov.
   
4. V sekcii Typ zvoľte, či vytvorená položka bude .phtml súbor alebo zložka.
5. Kliknite na tlačidlo Vytvoriť.

Pridanie štýlov CSS do grafiky

Pre úpravu štýlov v grafike e-shopu prejdite do sekcie Grafika / Editor kódu, oddiel Styles.

Technické špecifiká

• Šablóny sú navrhnuté v CSS3.
• Základom je upravený framework Bootstrap 4.5.
• Grafika je úplne responzívna.
• Je vytváraná metódou mobile first.
• Ďalej sa používajú vlastné špecifické triedy.

Vlastné štýly

Vlastné štýly môžete vytvárať v súbore _custom.scss. Kód je možné písať v jazyku CSS alebo v jeho preprocesorovej syntaxe SCSS. 

V prípade zmeny verzie dizajnu na novšiu verziu sa tento súbor premaže. Viac tu.

Odporúčania:

• Nepreformátovávať systémové triedy (class). Radšej si vytvorte v HTML vlastnú a tú následne definujte.
• Nikdy nenadväzujte vlastné štýly na atribúty data-designer. Tieto atribúty sa z kódu po preklopení na ostrú doménu zmažú!
• V CSS zápise nepoužívajte URL odkaz na obrázky z externého zdroja
  (napr. background: url(https://www.domena.sk/obrazok.jpg);). Obrázky uložte na FTP projektu a použite relatívnu adresu /shop-data.

Systémové štýly

Tieto štýly sú už vytvorené a môžete ich podľa vlastnej potreby upravovať, pokiaľ aktivujete rozšírené možnosti Editora kódu.

Variables

Štýly systémovej grafiky upravovať nemožno. Je možné iba meniť ich SCSS premenné zo súboru _variables.scss (len na čítanie). Na úpravu slúži súbor _variables-custom.scss. Táto funkcia je dostupná od grafických šablón verzie 4.0 (viac tu).

Pomocou týchto premenných jednoducho upravíte grafické nastavenia systému bez toho, aby ste akokoľvek zasahovali do štýlopisu.

Odporúčania:

• Používa sa syntax SCSS so symbolom $ pred názvom premennej.
• Premenné nikdy nemažte, pretože štýly vyhodia chybu a zruší sa kompletne formátovanie. Je možné len upravovať ich hodnoty.
• Pri hodnotách nemeňte jednotky.

Theme

V dizajnérovi si môžete nastaviť Motív grafiky. Jeho štýly nájdete v oddiele Theme v súbore _theme.scss. Obsahuje:

• Definíciu scss mixinu, ktorý generuje samotné theme. Ide o factory, do ktorého nemáte prístup.
• A ďalšie špeciálne štýly pre daný motív.

Odporúčanie:

• Atribúty mixinu nikdy nemažte, pretože štýly vyhodia chybu a zruší sa kompletne formátovanie. Je možné len upravovať ich hodnoty.
• Pri hodnotách nemeňte jednotky.

Úprava HTML šablón grafiky

Pokiaľ máte aktivované rozšírené možnosti Editora kódu, môžete upravovať systém HTML šablón e-shopu. Môžete tak ovplyvniť štruktúru vzhľadu stránky. Presunúť alebo upraviť jednotlivé prvky, pridať nové ako napr. vlastné pole atď.

Pre úpravu štýlov prejdite v administrácii do sekcie Grafika / Editor kódu, oddiel Templates.

Technické špecifiká

• Šablóny sú navrhnuté v HTML5. 
• Pre prácu s dynamickými prvkami je používaný šablónovací jazyk Latte, upravený pre potreby Upgates podľa tejto dokumentácie. 
• Stromovú štruktúru zložiek a súborov grafiky nájdete v dokumentácii.
• Základom je upravený framework Bootstrap 4.5.
• Grafika je úplne responzívna a mobile first.

Vlastná šablóna kategórie

V Editore kódu nemožno zakladať nové súbory šablón. Avšak v zložke templates / Category (v stromovej štruktúre HTML šablón) nájdete prednastavené súbory custom1-5.phtml pre vlastné použitie. Vytvoríte tak vlastnú šablónu kategórie typu stránka.

Názov upravovaného súboru (napr. custom1) zapíšete v administrácii do vlastného poľa Šablóna. Nájdete ho v sekcii Kategórie / Zoznam kategórií oddiel Vlastné pole. Viac o zapisovaní do vlastných polí v nápovede tu.

Pridanie Javascriptu do grafiky

Pre prácu s Javascript sa v Upgates využíva knižnica jQuery. 

Prejdite do sekcie Grafika / Editor kódu, oddiel Scripts.

Systémové javascripty

Tieto javascripty sú už vytvorené a grafika s nimi štandardne počíta. Sú zapísané v súbore common.js a pre jeho úpravu je potrebné mať aktivované rozšírené možnosti Editora kódu.

Odporúčanie:

• Pokiaľ je to možné, len pridávajte nové časti kódu.
• Upravujete systémový javascript, preto nemažte existujúce časti kódu, inak to môže mať vplyv na fungovanie grafiky.
• Chyby kontrolujte v debugger.
• V súbore common.js nájdete len časť kódu Javascript, ktorá ovplyvňuje len vizuálnu stránku grafiky. Ďalšie systémové súbory, ktoré majú na starosti funkčnú stránku grafiky sú pre užívateľa nedostupné.
• Robte si pravidelné zálohy. Viac tu.

Vlastný JavaScript súbor do grafiky

Viac tu.