Háčiky v značkovaní
Triedy v značkovaní obchodu sa menia s každou úpravou vzhľadu. Háčiky nie: kým je háčik v tomto zozname, značkovanie ho nesie a jeho význam sa nemení.
Ako háčiky fungujú
data-blokstojí na koreni každého bloku webu, v šablóne Základ aj Expert. Hodnota je druh bloku.data-caststojí na časti bloku (nadpis, text, tlačidlo) a na častiach obchodu mimo blokov: karte produktu, cene, hlavičke, pätičke a častiach stránky produktu.- Časť je časť, nech je kdekoľvek. Nadpis bloku aj nadpis karty v ňom sú nadpis; kto chce len kartu, spojí dva háčiky.
- Vlastné CSS obchodu (Engine Vlastné CSS) prijme len pravidlá, ktoré začínajú háčikom z tohto zoznamu, prípadne koreňom stránky podľa pravidiel na konci tejto stránky; iné server pred zverejnením zahodí s nálezom.
Fotky v galérii a nadpisy položiek v ktoromkoľvek bloku:
[data-blok='galeria'] [data-cast='obrazok']
[data-cast='polozka'] [data-cast='nadpis']Pokladňa, prihlásenie a účet zákazníka háčiky nemajú. Formulár, do ktorého zákazník píše heslo alebo platí, sa nesmie meniť podľa cudzieho zápisu.
Z kódu platformy. Tento zoznam sa skladá priamo zo zdrojového kódu platformy a každé nasadenie overí, že s ním sedí.
Bloky webu
| Hodnota | Čo označuje |
|---|---|
data-blok="hlavicka" | Úvod stránky: veľký nadpis, veta a tlačidlá, v Základe na fotke cez celú obrazovku. |
data-blok="rozcestnik" | Rozcestník: dve polovice obrazovky, každá s fotkou, nadpisom a tlačidlom. |
data-blok="sekcia" | Sekcia: nadpis a text vedľa fotky. |
data-blok="pas" | Pás cez celú šírku s fotkou alebo farbou a nadpisom v strede. |
data-blok="pocitadlo" | Čísla: veľké číslo s jednotkou a popisom. |
data-blok="formular" | Dopytový formulár s kontaktom obchodu. |
data-blok="kalkulacka" | Kalkulačka ceny podujatia. |
data-blok="video" | Video cez celú šírku. |
data-blok="text" | Text s nadpisom, bodmi a poznámkou. |
data-blok="textSObrazkom" | Text s nadpisom vedľa obrázka. |
data-blok="tim" | Tím: ľudia s fotkou, menom, rolou a krátkym textom. |
data-blok="udalosti" | Udalosti s termínom, miestom, prihláškou a propozíciami; minulé sa skryjú. |
data-blok="dlazdice" | Dlaždice s fotkou, názvom a odkazom. |
data-blok="galeria" | Galéria fotiek. |
data-blok="cennik" | Cenník balíkov. |
data-blok="referencie" | Referencie: slová zákazníkov s menom a firmou. |
data-blok="media" | Médiá: kde o obchode písali. |
data-blok="otazky" | Časté otázky s odpoveďami. |
data-blok="vyzva" | Výzva k akcii s tlačidlom. |
data-blok="kontakt" | Kontakt: adresa, telefón a e-mail, v šablóne Expert aj formulár a pobočky. |
data-blok="mapa" | Mapa: adresa, tlačidlo navigácie a mapa miesta; mapa Google sa načíta až po súhlase s cookies. |
data-blok="nadpisStranky" | Nadpis stránky so štítkom a vetou pod ním. |
data-blok="loga" | Pás mien alebo log klientov. |
data-blok="ukazka" | Ukážka: postup vedľa panela s číslom a pruhmi. |
data-blok="sluzby" | Prehľad služieb v kartách alebo v zoznamoch. |
data-blok="sluzba" | Jedna služba podrobne: text, body a metrika. |
data-blok="kroky" | Postup po krokoch. |
data-blok="vysledky" | Výsledky a prípadové štúdie. |
data-blok="prednosti" | Prednosti: ikony, nápisy alebo karty s krátkym textom. |
data-blok="pripad" | Hlavička prípadovej štúdie s číslami. |
data-blok="rozsah" | Rozsah prác: body a zoznam služieb. |
data-blok="pribeh" | Príbeh s fotkou a číslami. |
data-blok="citat" | Citát s autorom a fotkou. |
data-blok="pobocky" | Pobočky: mestá a krajiny. |
data-blok="odkazy" | Odkazy v kartách alebo v riadkoch. |
data-blok="hlavnaCena" | Jedna cena s popisom, zárukou a tlačidlami. |
data-blok="zahrnute" | Čo je v cene a čo v nej nie je. |
data-blok="tabulka" | Tabuľka s hlavičkou stĺpcov. |
data-blok="subory" | Súbory na stiahnutie. |
data-blok="farby" | Farby značky: vzorky s názvom a kódom. |
data-blok="autor" | Karta človeka: fotka, meno, úloha a odkazy. |
data-blok="urovne" | Úrovne programu s podmienkami a výhodami. |
data-blok="milniky" | Míľniky programu. |
data-blok="rezervacia" | Rezervácia termínu: kalendár, voľné časy a formulár. |
data-blok="minuta" | Najnovšie zápisy z Minúty. |
data-blok="odber" | Odber newslettera. |
data-blok="zadanie" | Rozhovor, z ktorého vznikne zadanie. |
data-blok="cennikSluzieb" | Cenník služieb s objednávkou. |
data-blok="ukazkaPonuky" | Skúšobná cenová ponuka z textu návštevníka. |
data-blok="ukazkaDokladu" | Skúšobné prečítanie faktúry návštevníka. |
data-blok="ukazkaPodpory" | Skúšobná odpoveď podpory z webu návštevníka. |
data-blok="ukazkaKontroly" | Skúšobné meranie stránky produktu. |
data-blok="ukazkaPosty" | Skúšobné zatriedenie e-mailu. |
data-blok="ukazkaRozboru" | Rozbor exportu návštevníka v jeho prehliadači. |
data-blok="dokaz" | Dôkaz: text s obrázkom a oddielmi. |
data-blok="sidlo" | Sídlo firmy: adresa a údaje. |
data-blok="nahlad" | Náhľad nástroja: obrázok so správou a číslami. |
data-blok="spravy" | Správy nástroja vedľa obrázka. |
data-blok="smer" | Smer produktu: čo je dnes a čo sa chystá. |
data-blok="plavajucaVyzva" | Plávajúca výzva v rohu obrazovky. |
data-blok="prihlaskaTvorcu" | Prihláška do programu tvorcov. |
Časti bloku
| Hodnota | Čo označuje |
|---|---|
data-cast="nadpis" | Nadpis bloku alebo jeho položky. |
data-cast="podnadpis" | Krátky nápis pri nadpise: štítok nad ním alebo písaný riadok. |
data-cast="textBloku" | Súvislý text bloku alebo položky: veta pod nadpisom, odseky. |
data-cast="tlacidlo" | Tlačidlo alebo odkaz, ktorý vedie ďalej. |
data-cast="obrazok" | Fotka alebo obrázok bloku či položky. |
data-cast="polozka" | Jedna položka zoznamu v bloku: karta, riadok, otázka, fotka galérie. |
Časti obchodu
| Hodnota | Čo označuje |
|---|---|
data-cast="kartaProduktu" | Karta produktu vo výpise a v pásoch produktov. |
data-cast="cena" | Cena produktu na karte aj na stránke produktu. |
data-cast="jednotkovaCena" | Cena za mernú jednotku pri cene produktu. |
data-cast="doKosika" | Tlačidlo, ktoré vloží produkt do košíka. |
data-cast="vypis" | Výpis produktov kategórie a vyhľadávania. |
data-cast="filter" | Filter výpisu: vlastnosti a cenové pásma. |
data-cast="hlavickaStranky" | Hlavička stránky s logom, v e-shope aj na webe. |
data-cast="ponuka" | Ponuka stránok a kategórií v hlavičke aj na telefóne. |
data-cast="paticka" | Pätička stránky. |
data-cast="kosik" | Stránka košíka. |
data-cast="porovnanie" | Tabuľka porovnania produktov a ich vlastností. |
data-cast="pasEshopu" | Úvodný pás e-shopu s nadpisom a fotkou. |
data-cast="kategorie" | Kategórie na úvode e-shopu. |
data-cast="pasProduktov" | Pás produktov na úvode e-shopu. |
data-cast="oznam" | Pás oznamu nad hlavičkou e-shopu. |
data-cast="vsetkyKategorie" | Tlačidlo so stromom kategórií v hlavičke e-shopu. |
data-cast="zvyrazneny" | Zvýraznený produkt na úvode e-shopu. |
data-cast="manifest" | Manifest obchodu na úvode e-shopu. |
data-cast="magazin" | Najnovšie články blogu na úvode e-shopu. |
data-cast="odberEshopu" | Odber newslettera na úvode e-shopu. |
data-cast="vyhody" | Výhody obchodu na úvode e-shopu. |
data-cast="fotkyProduktu" | Fotky a videá produktu na stránke produktu. |
data-cast="udajeProduktu" | Stĺpec s názvom, cenou, voľbami a tlačidlom na stránke produktu. |
data-cast="nazovProduktu" | Názov produktu na stránke produktu. |
data-cast="popisProduktu" | Popis produktu na stránke produktu, vedľa ceny aj v záložke pod produktom. |
data-cast="variantyProduktu" | Voľby variantu na stránke produktu, napríklad veľkosť alebo farba. |
data-cast="zalozkyProduktu" | Záložky s popisom, parametrami a súbormi pod produktom. |
data-cast="recenzie" | Recenzie produktu s hodnotením na stránke produktu. |
data-cast="doveraProduktu" | Pás s dopravou, vrátením a bezpečným nákupom pod produktom. |
data-cast="stitkyProduktu" | Štítky na fotke produktu: zľava a vypredané, na karte aj na stránke produktu. |
data-cast="doplnkyProduktu" | Pásy produktov pod produktom a vedľa ceny: drahšia náhrada, „Kúpiť spolu“ a podobné produkty. |
data-cast="bezpecnostVyrobku" | Výrobca, zodpovedná osoba v EÚ, identifikácia a varovania výrobku pod produktom alebo v záložke. |
data-cast="otazkyProduktu" | Otázky zákazníkov k produktu a odpovede obchodu s formulárom na otázku pod produktom. |
Koreň stránky: premenné a vetvenie
- Pred háčikom smie stáť
:roots atribútmi a triedou z tabuľky nižšie, napríklad:root[data-podoba-karta='vzdusna'] [data-cast='kartaProduktu']. Tak štýl vetvíte podľa šablóny webu, tmavého režimu a podoby e-shopu. - Atribút podoby e-shopu stojí na koreni, len keď obchodník zvolil inú než dnešnú podobu; pri dnešnej podobe atribút nie je. Štýl pre dnešnú podobu preto napíšte bez koreňa a pre inú voľbu ho prepíšte pravidlom s atribútom, ktoré má vyššiu váhu. Voľby a ich hodnoty sú v časti Predvoľba webu.
- Pravidlo len s
:root, bez háčika, prejde, keď nesie iba premenné témy z tabuľky nižšie alebo vlastné premenné s predponou--vlastne-(za ňou malé písmená, číslice a spojovník). Iná deklarácia na koreni je nález. Koreň bez háčika musí byť v pravidle sám, nie v zozname s ďalšími selektormi. - Vlastnú premennú čítate v pravidlách nad háčikmi, napríklad
var(--vlastne-medzera). Premenná témy mení hodnotu, ktorú obchod už používa: nová hlavná farba sa prejaví všade, kde ju obchod kreslí, okrem stránok, na ktorých vlastné CSS neplatí. - Premenná na samotnom
:rootplatí aj v tmavom režime. Inú hodnotu pre tmavý režim dáte do:root.dark. - Kontrast, ktorý Vzhľad stráži pri farbách témy, pri premenných vo vlastnom CSS nikto neoverí. Za čitateľný text na novej farbe zodpovedáte vy.
Hlavná farba, zaoblenie a vlastná premenná pre celý obchod, iná hlavná farba v tmavom režime a karta produktu, ktorá sa mení podľa podoby e-shopu:
:root {
--primary: #0f766e;
--radius: 0.5rem;
--vlastne-medzera: 1.5rem;
}
:root.dark {
--primary: #5eead4;
}
[data-cast='kartaProduktu'] {
padding: var(--vlastne-medzera);
}
:root[data-podoba-karta='vzdusna'] [data-cast='kartaProduktu'] {
padding: 0;
}Atribúty a triedy koreňa
Z kódu platformy. Tento zoznam sa skladá priamo zo zdrojového kódu platformy a každé nasadenie overí, že s ním sedí.
| Na koreni | Čo znamená |
|---|---|
[data-styl] | Štýl šablóny webu Expert, keď je iný než predvolený (vyrazny). Hodnota je kód štýlu z poľa styl témy. |
[data-tmave] | Tmavé pozadie šablóny webu Expert. Atribút je bez hodnoty. |
[data-sablona] | Šablóna webu Expert, hodnota expert. Pri šablóne Základ atribút nie je. |
.dark | Tmavý režim obchodu. Len v obchode, ktorý ho má zapnutý v téme (pole tmavyRezim), podľa systému návštevníka alebo jeho voľby v obchode. |
| Podoba e-shopu | Voľba podoby e-shopu s hodnotou, len keď nie je dnešná. Voľby a hodnoty sú v časti Predvoľba webu.[data-podoba-pas], [data-podoba-stlpce], [data-podoba-kategorie], [data-podoba-karta], [data-podoba-hlavicka], [data-podoba-produkt], [data-podoba-produkty], [data-podoba-pata], [data-podoba-pozadia], [data-podoba-stranky], [data-podoba-vyhody], [data-podoba-odber], [data-podoba-zvyrazneny], [data-podoba-magazin], [data-podoba-manifest], [data-podoba-medzery], [data-podoba-nadpisy] |
Premenné témy
| Premenná | Čo znamená |
|---|---|
--radius | Zaoblenie rohov, napríklad 0.75rem. |
--background | Pozadie stránky. |
--foreground | Text na pozadí. |
--primary | Hlavná farba značky: tlačidlá, odkazy, zvýraznenia. |
--primary-foreground | Text na hlavnej farbe. |
--accent | Jemné zvýraznenie: pozadie kariet, prejdenie myšou. |
--accent-foreground | Text na jemnom zvýraznení. |
--muted-foreground | Stlmený text: popisky, dátumy, bunky tabuliek. |
--surface | Plocha kariet a panelov. |
--line | Čiary a okraje kariet. |
--brand-2 | Druhá farba značky. |
--brand-3 | Tretia farba značky. |
Hranice
- Najviac 64 KB zdroja. Štýl ide do každej stránky obchodu a každý kilobajt navyše platí každý návštevník.
- z-index najviac 40: lišta súhlasu s cookies a dialógy obchodu musia ostať navrchu.
- Meno vlastnej animácie v @keyframes začína
vlastne-, aby neprepísala animáciu obchodu. - Okrem pravidiel prejdú len @media, @supports a @keyframes. @import ani @font-face neprejdú.
- Obrázky v url() len cez https z knižnice médií obchodu.