Háčky ve značkování

Jak háčky fungují

• data-blok stojí na kořeni každého bloku webu, v šabloně Základ i Expert. Hodnota je druh bloku.
• data-cast stojí na části bloku (nadpis, text, tlačítko) a na částech obchodu mimo bloky: kartě produktu, ceně, záhlaví, patičce a částech stránky produktu.
• Část je část, ať je kdekoli. Nadpis bloku i nadpis karty v něm jsou nadpis; kdo chce jen kartu, spojí dva háčky.
• Vlastní CSS obchodu (Engine Vlastní CSS) přijme jen pravidla, která začínají háčkem z tohoto seznamu, případně kořenem stránky podle pravidel na konci této stránky; jiná server před zveřejněním zahodí s nálezem.

Fotky v galerii a nadpisy položek v kterémkoli bloku:

[data-blok='galeria'] [data-cast='obrazok']
[data-cast='polozka'] [data-cast='nadpis']

Pokladna, přihlášení a účet zákazníka háčky nemají. Formulář, do kterého zákazník píše heslo nebo platí, se nesmí měnit podle cizího zápisu.

Z kódu platformy. Tento seznam se skládá přímo ze zdrojového kódu platformy a každé nasazení ověří, že s ním souhlasí.

Bloky webu

Hodnota	Co označuje
data-blok="hlavicka"	Úvod stránky: velký nadpis, věta a tlačítka, v šabloně Základ na fotce přes celou obrazovku.
data-blok="rozcestnik"	Rozcestník: dvě poloviny obrazovky, každá s fotkou, nadpisem a tlačítkem.
data-blok="sekcia"	Sekce: nadpis a text vedle fotky.
data-blok="pas"	Pás přes celou šířku s fotkou nebo barvou a nadpisem uprostřed.
data-blok="pocitadlo"	Čísla: velké číslo s jednotkou a popiskem.
data-blok="formular"	Poptávkový formulář s kontaktem na obchod.
data-blok="kalkulacka"	Kalkulačka ceny akce.
data-blok="video"	Video přes celou šířku.
data-blok="text"	Text s nadpisem, odrážkami a poznámkou.
data-blok="textSObrazkom"	Text s nadpisem vedle obrázku.
data-blok="tim"	Tým: lidé s fotkou, jménem, rolí a krátkým textem.
data-blok="udalosti"	Události s termínem, místem, přihláškou a propozicemi; minulé se skryjí.
data-blok="dlazdice"	Dlaždice s fotkou, názvem a odkazem.
data-blok="galeria"	Galerie fotek.
data-blok="cennik"	Ceník balíčků.
data-blok="referencie"	Reference: slova zákazníků se jménem a firmou.
data-blok="media"	Média: kde o obchodě psali.
data-blok="otazky"	Časté dotazy s odpověďmi.
data-blok="vyzva"	Výzva k akci s tlačítkem.
data-blok="kontakt"	Kontakt: adresa, telefon a e-mail, v šabloně Expert i formulář a pobočky.
data-blok="mapa"	Mapa: adresa, tlačítko navigace a mapa místa; mapa Google se načte až po souhlasu s cookies.
data-blok="nadpisStranky"	Nadpis stránky se štítkem a větou pod ním.
data-blok="loga"	Pás jmen nebo log klientů.
data-blok="ukazka"	Ukázka: postup vedle panelu s číslem a pruhy.
data-blok="sluzby"	Přehled služeb v kartách nebo v seznamech.
data-blok="sluzba"	Jedna služba podrobně: text, odrážky a metrika.
data-blok="kroky"	Postup krok za krokem.
data-blok="vysledky"	Výsledky a případové studie.
data-blok="prednosti"	Přednosti: ikony, nápisy nebo karty s krátkým textem.
data-blok="pripad"	Záhlaví případové studie s čísly.
data-blok="rozsah"	Rozsah prací: odrážky a seznam služeb.
data-blok="pribeh"	Příběh s fotkou a čísly.
data-blok="citat"	Citát s autorem a fotkou.
data-blok="pobocky"	Pobočky: města a země.
data-blok="odkazy"	Odkazy v kartách nebo v řádcích.
data-blok="hlavnaCena"	Jedna cena s popisem, zárukou a tlačítky.
data-blok="zahrnute"	Co je v ceně a co v ní není.
data-blok="tabulka"	Tabulka se záhlavím sloupců.
data-blok="subory"	Soubory ke stažení.
data-blok="farby"	Barvy značky: vzorky s názvem a kódem.
data-blok="autor"	Karta člověka: fotka, jméno, role a odkazy.
data-blok="urovne"	Úrovně programu s podmínkami a výhodami.
data-blok="milniky"	Milníky programu.
data-blok="rezervacia"	Rezervace termínu: kalendář, volné časy a formulář.
data-blok="minuta"	Nejnovější zápisy z Minúty.
data-blok="odber"	Přihlášení k odběru newsletteru.
data-blok="zadanie"	Rozhovor, ze kterého vznikne zadání.
data-blok="cennikSluzieb"	Ceník služeb s objednávkou.
data-blok="ukazkaPonuky"	Zkušební cenová nabídka z textu návštěvníka.
data-blok="ukazkaDokladu"	Zkušební přečtení faktury návštěvníka.
data-blok="ukazkaPodpory"	Zkušební odpověď podpory z webu návštěvníka.
data-blok="ukazkaKontroly"	Zkušební měření stránky produktu.
data-blok="ukazkaPosty"	Zkušební zatřídění e-mailu.
data-blok="ukazkaRozboru"	Rozbor exportu návštěvníka přímo v jeho prohlížeči.
data-blok="dokaz"	Důkaz: text s obrázkem a oddíly.
data-blok="sidlo"	Sídlo firmy: adresa a údaje.
data-blok="nahlad"	Náhled nástroje: obrázek se zprávou a čísly.
data-blok="spravy"	Zprávy nástroje vedle obrázku.
data-blok="smer"	Směr produktu: co je dnes a co se chystá.
data-blok="plavajucaVyzva"	Plovoucí výzva v rohu obrazovky.
data-blok="prihlaskaTvorcu"	Přihláška do programu tvůrců.

Části bloku

Hodnota	Co označuje
data-cast="nadpis"	Nadpis bloku nebo jeho položky.
data-cast="podnadpis"	Krátký nápis u nadpisu: štítek nad ním nebo psaný řádek.
data-cast="textBloku"	Souvislý text bloku nebo položky: věta pod nadpisem, odstavce.
data-cast="tlacidlo"	Tlačítko nebo odkaz, který vede dál.
data-cast="obrazok"	Fotka nebo obrázek bloku či položky.
data-cast="polozka"	Jedna položka seznamu v bloku: karta, řádek, dotaz, fotka galerie.

Části obchodu

Hodnota	Co označuje
data-cast="kartaProduktu"	Karta produktu ve výpisu a v pásech produktů.
data-cast="cena"	Cena produktu na kartě i na stránce produktu.
data-cast="jednotkovaCena"	Cena za měrnou jednotku u ceny produktu.
data-cast="doKosika"	Tlačítko, které vloží produkt do košíku.
data-cast="vypis"	Výpis produktů kategorie a vyhledávání.
data-cast="filter"	Filtr výpisu: vlastnosti a cenová pásma.
data-cast="hlavickaStranky"	Záhlaví stránky s logem, v e-shopu i na webu.
data-cast="ponuka"	Menu stránek a kategorií v záhlaví i na telefonu.
data-cast="paticka"	Patička stránky.
data-cast="kosik"	Stránka košíku.
data-cast="porovnanie"	Tabulka porovnání produktů a jejich vlastností.
data-cast="pasEshopu"	Úvodní pruh e-shopu s nadpisem a fotkou.
data-cast="kategorie"	Kategorie na úvodu e-shopu.
data-cast="pasProduktov"	Pruh produktů na úvodu e-shopu.
data-cast="oznam"	Pruh oznámení nad hlavičkou e-shopu.
data-cast="vsetkyKategorie"	Tlačítko se stromem kategorií v hlavičce e-shopu.
data-cast="zvyrazneny"	Zvýrazněný produkt na úvodu e-shopu.
data-cast="manifest"	Manifest obchodu na úvodu e-shopu.
data-cast="magazin"	Nejnovější články blogu na úvodu e-shopu.
data-cast="odberEshopu"	Odběr newsletteru na úvodu e-shopu.
data-cast="vyhody"	Výhody obchodu na úvodu e-shopu.
data-cast="fotkyProduktu"	Fotky a videa produktu na stránce produktu.
data-cast="udajeProduktu"	Sloupec s názvem, cenou, volbami a tlačítkem na stránce produktu.
data-cast="nazovProduktu"	Název produktu na stránce produktu.
data-cast="popisProduktu"	Popis produktu na stránce produktu, vedle ceny i v záložce pod produktem.
data-cast="variantyProduktu"	Volby varianty na stránce produktu, například velikost nebo barva.
data-cast="zalozkyProduktu"	Záložky s popisem, parametry a soubory pod produktem.
data-cast="recenzie"	Recenze produktu s hodnocením na stránce produktu.
data-cast="doveraProduktu"	Pruh s dopravou, vrácením a bezpečným nákupem pod produktem.
data-cast="stitkyProduktu"	Štítky na fotce produktu: sleva a vyprodáno, na kartě i na stránce produktu.
data-cast="doplnkyProduktu"	Pásy produktů pod produktem a vedle ceny: dražší náhrada, „Koupit společně“ a podobné produkty.
data-cast="bezpecnostVyrobku"	Výrobce, odpovědná osoba v EU, identifikace a upozornění výrobku pod produktem nebo v záložce.
data-cast="otazkyProduktu"	Dotazy zákazníků k produktu a odpovědi obchodu s formulářem na dotaz pod produktem.

Kořen stránky: proměnné a větvení

• Před háčkem smí stát :root s atributy a třídou z tabulky níže, například :root[data-podoba-karta='vzdusna'] [data-cast='kartaProduktu']. Tak styl větvíte podle šablony webu, tmavého režimu a podoby e-shopu.
• Atribut podoby e-shopu stojí na kořeni, jen když obchodník zvolil jinou než dnešní podobu; u dnešní podoby atribut chybí. Styl pro dnešní podobu proto napište bez kořene a pro jinou volbu ho přepište pravidlem s atributem, které má vyšší váhu. Volby a jejich hodnoty jsou v části Předloha webu.
• Pravidlo jen s :root, bez háčku, projde, když nese pouze proměnné tématu z tabulky níže nebo vlastní proměnné s předponou --vlastne- (za ní malá písmena, číslice a spojovník). Jiná deklarace na kořeni je nález. Kořen bez háčku musí být v pravidle sám, ne v seznamu s dalšími selektory.
• Vlastní proměnnou čtete v pravidlech nad háčky, například var(--vlastne-medzera). Proměnná tématu mění hodnotu, kterou obchod už používá: nová hlavní barva se projeví všude, kde ji obchod kreslí, kromě stránek, na kterých vlastní CSS neplatí.
• Proměnná na samotném :root platí i v tmavém režimu. Jinou hodnotu pro tmavý režim dáte do :root.dark.
• Kontrast, který Vzhled hlídá u barev tématu, u proměnných ve vlastním CSS nikdo neověří. Za čitelný text na nové barvě odpovídáte vy.

Hlavní barva, zaoblení a vlastní proměnná pro celý obchod, jiná hlavní barva v tmavém režimu a karta produktu, která se mění podle 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;
}

Atributy a třídy kořene

Z kódu platformy. Tento seznam se skládá přímo ze zdrojového kódu platformy a každé nasazení ověří, že s ním souhlasí.

Na kořeni	Co znamená
[data-styl]	Styl šablony webu Expert, když je jiný než výchozí (vyrazny). Hodnota je kód stylu z pole styl tématu.
[data-tmave]	Tmavé pozadí šablony webu Expert. Atribut je bez hodnoty.
[data-sablona]	Šablona webu Expert, hodnota expert. U šablony Základ atribut chybí.
.dark	Tmavý režim obchodu. Jen v obchodě, který ho má zapnutý v tématu (pole tmavyRezim), podle systému návštěvníka nebo jeho volby v obchodě.
Podoba e-shopu	Volba podoby e-shopu s hodnotou, jen když není dnešní. Volby a hodnoty jsou v části Předloha 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]

Proměnné tématu

Proměnná	Co znamená
--radius	Zaoblení rohů, například 0.75rem.
--background	Pozadí stránky.
--foreground	Text na pozadí.
--primary	Hlavní barva značky: tlačítka, odkazy, zvýraznění.
--primary-foreground	Text na hlavní barvě.
--accent	Jemné zvýraznění: pozadí karet, najetí myší.
--accent-foreground	Text na jemném zvýraznění.
--muted-foreground	Tlumený text: popisky, data, buňky tabulek.
--surface	Plocha karet a panelů.
--line	Čáry a okraje karet.
--brand-2	Druhá barva značky.
--brand-3	Třetí barva značky.

Limity

• Nejvýše 64 KB zdroje. Styl jde do každé stránky obchodu a každý kilobajt navíc platí každý návštěvník.
• z-index nejvýše 40: lišta souhlasu s cookies a dialogy obchodu musí zůstat navrchu.
• Název vlastní animace v @keyframes začíná vlastne-, aby nepřepsala animaci obchodu.
• Kromě pravidel projdou jen @media, @supports a @keyframes. @import ani @font-face neprojdou.
• Obrázky v url() jen přes https z knihovny médií obchodu.