Editor kódu

Většinu grafických úprav lze v Upgates provést pomocí modulu Designer (více zde). Editor kódu vám umožní s touto nastavenou grafikou dále pracovat a přizpůsobit ji svým nejnáročnějším požadavkům.

Pro práci v Editoru kódu je třeba mít alespoň základní znalosti kódování webových stránek.

Zobrazení na testovací verzi

Veškeré grafické úpravy prováděné v Designerovi nebo Editoru kódu se provádějí nejdříve v testovací verzi. Aby se změny projevily také na ostré doméně, je potřeba testovací verzi překlopit (více zde).

Pouze vlastní soubory na FTP (více zde) se automaticky zobrazí na obou verzích ihned, takže není třeba je překlápět.

Základní možnosti

U e-shopů Upgates se grafika primárně tvoří pomocí modulu Designer. Takto systémově generovanou grafiku si však můžete doupravit v Editoru kódu. Pokud využijete pouze základní možnosti Editoru kódu, není potřeba vypínat modul Designer. Neupravujete totiž systémový kód grafiky, ale tvoříte jeho grafickou nádstavbu.

Možnosti úprav

V administraci přejděte do sekce  Grafika / Editor kódu.

• Styly CSS - V oddílu Styles se zobrazují následující soubory:
  • _custom.scss: slouží pro přidání vlastních stylů. Více zde.
  • _variables-custom.scss: slouží k úpravě proměnných pro systémové styly ze souboru _variables.scss (více zde). Tato funkce je dostupná od grafických šablon verze 4.0 (více zde).
  • _variables.scss: proměnné používané pro systémové styly. Tento soubor je pouze pro čtení, úpravy je potřeba provádět v souboru _variables-custom.scss.
• Javascript - V základních možnostech lze pouze přidat vlastní soubor .js, nikoli upravovat systémové soubory. Více zde.
• Poznámky - V oddílu Poznámky se nachází soubor, do kterého si můžete zapisovat informace např. ke změnám provedeným v kódu. V případě změny verze designu na novější verzi se tento soubor neaktualizuje (více zde).

Pokud vám základní možnosti nepostačují, je potřeba aktivovat rozšířené možnosti editoru kódu - více zde.

Rozšířené možnosti

Pokud chcete, aby měl Váš e-shop jedinečnou grafiku na míru, bude potřeba zasáhnout do kódu HTML šablon (případně také Javascriptu). K tomu je třeba aktivovat rozšířené možnosti Editoru kódu.

K úpravám budete potřebovat odborné znalosti kódování webových stránek. Případně můžete využít služeb některého z našich expertů z Marketplace.

Upozornění! Rozšířené možnosti Editoru kódu vyžadují deaktivaci modulu Designer. Zasahujete totiž do samotného grafického systému e-shopu. Proto doporučujeme si grafiku nejdříve co nejdetailněji nastavit v Designerovi, dodat vlastní styly v základních možnostech Editoru kódu (více zde) a až poté, když jste vyčerpali všechny systémové možnosti, si zapněte rozšířené možnosti Editoru kódu. 

Možnosti úprav

V administraci přejděte do  Grafika / Editor kódu.

• Styly CSS - V oddílu Styles se zobrazují soubory _custom.scss, _variables-custom.scss a _variables.scss. Výchozí CSS styly zůstávají v grafice stále a nelze je vypnout. Je možné je pouze přepsat styly vlastními. V oddílu Theme se dále zobrazuje soubor _theme.scss. Více zde.
• Javascript - V oddílu Scripts se zobrazuje systémový soubor common.js (více zde). Lze přidat vlastní soubor .js (více zde).
• HTML šablony - V oddílu Templates se zobrazuje stromová struktura šablon grafiky. Více zde.
• Poznámky - V oddílu Poznámky se nachází soubor, do kterého si můžete zapisovat informace např. ke změnám provedeným v kódu. V případě změny verze designu na novější verzi se tento soubor neaktualizuje (více zde).

Aktivace rozšířených nastavení

Rozšířené možnosti editoru kódu lze aktivovat pouze, pokud máte ve vašem účtu vyplněny fakturační údaje (více zde) a e-shop má nabitou peněženku (více zde). Jedná se o bezpečnostní opatření proti zneužívání datového prostoru.

Co tím získáte?

• Výše uvedené možnosti editace grafiky.
• Automaticky se vytvoří záloha grafiky vytvořené v modulu Designer pro případ, že se k ní v budoucnu budete chtít vrátit.

O co tím přicházíte?

• O možnost nadále používat modul Designer.
• O nové funkce, které se projeví v budoucích verzích grafiky.
• O veškeré úpravy provedené v Editoru kódu v případě, že se v budoucnu budete chtít vrátit k modulu Designera.
• O technickou podporu ke grafice ze strany Upgates (úpravy a opravy chyb). Grafiku získáte ve stavu tak, jak je, s případnými chybami, odpovídající aktuálnímu stavu systému. Berete na vědomí, že vlastní grafika od vás bude vyžadovat pravidelnou údržbu a s tím spojené náklady.

Co se stane po aktivaci?

1. Po aktivaci se zruší modul Designer.
2. Na ostré verzi na doméně (více zde), kterou vidí vaši zákazníci, však zůstává grafika stále původní.
3. Úpravíte si grafiku v Editoru kódu na testovací verzi e-shopu (více zde).
4. Jakmile máte vše hotovo, překlopíte testovací verzi na ostrou doménu. Více zde.
5. Pokud by byl problém, můžete provedené změny vrátit ze zálohy. Více zde.

Veškerý obsah vložený přes administraci (produkty, kategorie, články, nastavení systému) se zachová a nemá vliv na nastavení Editoru kódu.

Rozhraní editoru kódu

Po aktivaci rozšířených možností se v administraci e-shopu zpřístupní grafické rozhraní editoru kódu. V něm lze provádět veškeré úpravy kódu, stylů a skriptů.

K souborům nelze přistupovat přes FTP a provádět úpravy v externím editoru.

V levém sloupci editoru jsou ve stromové struktuře dostupné jednotlivé soubory.

Ve složce Templates je možné vytvářet vlastní (pod)složky a .phtml soubory. Takto vytvořené složky lze smazat pouze v případě, že neobsahují žádné soubory ani podsložky.

Postup v administraci

1. Ve složce Templates najeďte na některou složku, aby se zobrazila její nabídka.
2. Klikněte na tlačítko +.
   
3. Zobrazí se vyskakovací okno. V poli Název zadejte název nově vytvářené položky. Pojmenování podléhá několika omezením:
   • Lze použít pouze znaky: a-z, A-Z, 0-9, -, _
   • Max. délka názvu je 50 znaků.
   
4. V sekci Typ zvolte, zdali vytvořená položka bude .phtml soubor nebo složka.
5. Klikněte na tlačítko Vytvořit.

Přidání stylů CSS do grafiky

Pro úpravu stylů v grafice e-shopu přejděte do sekce Grafika / Editor kódu, oddíl Styles.

Technická specifika

• Šablony jsou navrženy v CSS3.
• Základem je upravený framework Bootstrap 4.5.
• Grafika je plně responzivní.
• Je vytvářená metodou mobile first.
• Dále se používá vlastních specifických tříd.

Vlastní styly

Vlastní styly můžete vytvářet v souboru _custom.scss. Kód je možné psát v jazyku CSS nebo v jeho preprocesorové syntaxi SCSS. 

V případě změny verze designu na novější verzi se tento soubor promaže. Více zde.

Doporučení:

• Nepřeformátovávat systémové třídy (class). Raději si vytvořte v HTML vlastní třídu a tu následně definujte.
• Nikdy nenavazujte vlastní styly na attributy data-designer. Tyto attributy se z kódu po překlopení na ostrou doménu smažou!

Systémové styly

Tyto styly jsou již vytvořené a můžete je dle vlastní potřeby upravovat, pokud aktivujete rozšířené možnosti Editoru kódu.

Variables

Styly systémové grafiky upravovat nelze. Je možné pouze měnit jejich SCSS proměnné ze souboru _variables.scss (jen pro čtení). K úpravě slouží soubor _variables-custom.scss. Tato funkce je dostupná od grafických šablon verze 4.0 (více zde).

Pomocí těchto proměnných jednoduše upravíte grafická nastavení systému, aniž byste jakkoli zasahovali do stylopisu.

Doporučení:

• Používá se syntaxe SCSS se symbolem $ před názvem proměnné.
• Proměnné nikdy nemažte, protože styly vyhodí chybu a zruší se kompletně formátování. Je možné pouze upravovat jejich hodnoty.
• U hodnot neměňte jednotky.

V případě zapsání špatné syntaxe se zobrazí chyba. Její definici najdete v hlavičce zdrojového kódu stránky. V tom případě použijte původní soubor ze zálohy.

Theme

V designerovi si můžete nastavit Motiv grafiky. Jeho styly najdete v oddílu Theme v souboru _theme.scss. Obsahuje:

• Definici scss mixinu, který generuje samotné theme. Jedná se o factory, do kterého nemáte přístup.
• A další speciální styly pro daný motiv.

Doporučení:

• Atributy mixinu nikdy nemažte, protože styly vyhodí chybu a zruší se kompletně formátování. Je možné pouze upravovat jejich hodnoty.
• U hodnot neměňte jednotky.

Úprava HTML šablon grafiky

Pokud máte aktivované rozšířené možnosti Editoru kódu, můžete upravovat systém HTML šablon e-shopu. Můžete tak ovlivnit strukturu vzhledu stránky. Přesunout nebo upravit jednotlivé prvky, přidat nové jako např. vlastní pole atd.

Pro úpravu stylů přejděte v administraci do sekce Grafika / Editor kódu, oddíl Templates.

Technická specifika

• Šablony jsou navrženy v HTML5. 
• Pro práci s dynamickými prvky je používán šablonovací jazyk Latte, upravený pro potřeby Upgates dle této dokumentace. 
• Stromovou strukturu složek a souborů grafiky najdete v dokumentaci.
• Základem je upravený framework Bootstrap 4.5.
• Grafika je plně responzivní a mobile first.

Vlastní šablona kategorie

V Editoru kódu nelze zakládat nové soubory šablon. Nicméně ve složce templates / Category (ve stromové struktuře HTML šablon) najdete přednastavené soubory custom1-5.phtml pro vlastní použití. Vytvoříte tak vlastní šablonu kategorie typu stránka.

Název upravovaného souboru (např. custom1) zapíšete v administraci do vlastního pole Šablona. Najdete ho v sekci Kategorie / Seznam kategorií oddíl Vlastní pole. Více o zapisování do vlastních polí v nápovědě zde.

Přidání Javascriptu do grafiky

Pro práci s Javascripty se v Upgates využívá knihovna jQuery. 

Přejděte do sekce Grafika / Editor kódu, oddíl Scripts.

Systémové javascripty

Tyto javascripty jsou již vytvořené a grafika s nimi standardně počítá. Jsou zapsány v souboru common.js a pro jeho úpravu je třeba mít aktivované rozšířené možnosti Editoru kódu.

Doporučení:

• Pokud je to možné, pouze přidávejte nové části kódu.
• Upravujete systémový javascript, proto nemažte existující části kódu. Aby nedošlo k ovlivnění funkčnosti stránek e-shopu.
• Chyby kontrolujte v debuggeru.
• V souboru common.js najdete jen část kódu Javascript, která ovlivňuje pouze vizuální stránku grafiky. Další systémové soubory, které mají na starost funkční stránku grafiky, jsou pro uživatele nedostupné.
• Provádějte si pravidelné zálohy. Více zde.

Vlastní JavaScript soubor do grafiky

Přidání je možné provést následujícím postupem - více zde.