Modifikace kaskádových stylů a Javascriptu v e-shopu

Přizpůsobení e-shopu pomocí CSS je efektivní způsob, jak sladit vzhled vašeho on-line obchodu s identitou vaší značky a zlepšit uživatelskou přitažlivost. Níže naleznete obecný návod, jak provést úpravy pomocí CSS a Javascriptu.

CSS (Cascading Style Sheets) je jazyk používaný k popisu vzhledu a formátování webových stránek. Umožňuje oddělit obsah (HTML) od designu, což usnadňuje údržbu a aktualizaci vzhledu webu. Pro efektivní přizpůsobení e-shopu je vhodné mít základní znalosti CSS a HTML.

JavaScript (nebo zkráceně JS) je jazyk, který dodává stránkám život. Díky němu mohou stránky reagovat na uživatele a jejich akce, například kliknutí na tlačítko.​ Stejně tak lze pomocí JS dynamicky schovávat nebo zobrazovat určité prvky na stránce.

Následující text je určen pro pokročilé uživatele, kteří mají obecnou znalost o tom, jak tyto technologie fungují.

Vkládání CSS a JS z ContOSu

ContOS umožňuje umístit do stránek e-shopu fragmenty CSS a JS. Lze určit, v jaké části html stránky budou jednotlivé fragmenty vloženy. Obecně platí, že CSS by měly být umístěny v hlavičce (<head>) stránky a JavaScript na konci těla (<body>). Toto pravidlo se doporučuje hlavně z důvodů výkonnosti a rychlosti načítání stránky.

Proč umístit CSS do <head>?

  1. Rychlejší vykreslování stránky – Prohlížeče začínají vykreslovat stránku ihned po stažení CSS, což zabraňuje efektu FOUC (Flash of Unstyled Content – krátké zobrazení neformátovaného obsahu).
  2. Blokování vykreslování – CSS soubory mohou blokovat vykreslování stránky, pokud jsou načítány později. Proto se umísťují do hlavičky, aby se načetly dříve.
  3. Zlepšení uživatelského dojmu – Uživatel vidí stránku správně naformátovanou hned, aniž by musel čekat na další načítání.

Proč umístit JavaScript na konec <body>?

  1. Nezpomaluje načítání stránky – Pokud by byl JavaScript umístěn v <head>, blokoval by načítání HTML obsahu stránky, protože JavaScript je zpracován sekvenčně.
  2. Zvyšuje výkon – Umístěním JavaScriptu na konec těla stránky umožníme, aby HTML a CSS byly načteny a vykresleny dříve, čímž se stránka uživateli zobrazí rychleji.
  3. Prevence chyb – Pokud JavaScript manipuluje s DOM (HTML prvky), ale běží předtím, než jsou prvky načteny, může dojít k chybám. Umístění na konec těla tento problém řeší.

Doporučení

✅ CSS umísťovat do <head>, aby se stránka vykreslila co nejrychleji.

✅ JavaScript umístit na konec <body>, pokud není použito defer nebo async: <script src="script.js" async></script>

✅ Použít defer pro skripty, které musí být spuštěny až po načtení stránky.

✅ Použít async jen pro nezávislé skripty, které neovlivňují DOM.



ContOS umožňuje vložit CSS a JS do těchto oblastí stránky, které jsou na obrázku. Máte tedy plnou kontrolu nad tím, abyste dodrželi doporučené standardy, které jsou uvedeny výše.


V nastavení e-shopu je vše k dispozici na záložce Metadata. Původně sloužila pouze ke vkládání META tagů do záhlaví stránky, ale časem se její funkce rozšířila i pro vkládání fragmentů CSS a JS.

Postup doplnění CSS do e-shopu podle zobrazeného rozhraní:

  1. Otevření nastavení e-shopu
    • V ContOSu otevřete správu služeb a poklepejte myší na detail e-shopu, otevře se jeho nastavení
    • Přejděte do sekce Metadata (označeno číslem 1 na obrázku).
  2. Výběr správné sekce pro úpravu kódu
    • Přepněte na kartu „Body (top)“ nebo „Body (bottom)“ (označeno číslem 2 na obrázku), podle toho, kde chcete CSS kód vložit.
  3. Vložení CSS kódu
    • Do editoru vložte požadovaný CSS kód mezi <style> a </style>, jak je vidět v editoru (označeno číslem 3).
  4. Uložení změn
    • Klikněte na tlačítko „Uložit“ v horní části rozhraní.
  5. Kontrola změn
    • Otevřete e-shop v prohlížeči a ověřte, zda se změny v CSS správně aplikovaly.

Tímto způsobem lze přidávat a upravovat CSS styly přímo v administraci e-shopu. Po provedení synchronizace se změny aplikují v e-shopu.


Příklady

Změna písma v celém e-shopu

Vložte uvedený fragment CSS do sekce Head a dojde ke změně výchozího fontu celého e-shopu. Základní písmu bude Georgia a nadpisy budou psány fontem Verdana.

<style>
 body {
  font-family: 'Georgia', sans-serif;
 }
 h1, h2, h3, h4, h5, h6 {
  font-family: 'Verdana', serif;
 }
</style>

Změna zarovnání odstavců pro mobilní zařízení

Ve výchozím stavu je text odstavců zarovnán do bloku bez ohledu na to, na jakém zařízení je stránka zobrazena. Pokud však chceme, aby na mobilních zařízeních, resp. tam, kde není zobrazovací plocha dostatečná, byl text zarovnán doleva, doplňte do sekce Head tento fragment CSS. 

Pokud již v dané sekci máme nějaký tag <style>, pak stačí uvedený fragment doplnit do již existující skupiny mezi tagy <style> a </style>.


<style>
 @media (max-width: 767px) {   
  .document {             
    text-align: start;             
  }      
 }
</style>



Skrytí pruhu novinek pomocí Javascriptu

Pomocí níže uvedeného JS kódu lze schovat kontejnerový pruh s produktovými novinkami. Najdeme elemenet, ve kterém je kontejner umístěn a pomocí JS ho zneviditelníme. Script umístíme do sekce BODY (Bottom).


<script>
 if ( window.location.pathname == '/' ){
       document.querySelector("body > div.site > div.site__body > div:nth-last-child(4)").hidden=true       
  }  
</script>