#############
HTML elementy
#############
===============
i:img (obrázky)
===============
Obrázek produktu, kategorie, článku atd. Nepoužívá se pro statické obrázky šablony (ikonky atd).
Zajišťuje sestavení URL pro zmenšeninu obrázku, podporu retina displejů a doplnění popisku obrázku.
Při zadání více rozměrů se vygeneruje srcset, který využít lze v kombinaci s HTML5 atributem *sizes*. Pokud není uveden atribut *sizes*, doplní se atributy *width* a *height* podle skutečného výsledného rozměru obrázku.
Pokud není zadán atribut **alt**, vyplní se automaticky podle popisu obrázku nebo názvu produktu/varianty/...
Výstup se liší podle zařízení (retina/non-retina) a podle načtení (první/další). **Retina obrázky mohou přetékat a je nutné vyřešit to v CSS**, například přes *max-width:100%;max-height:100%*.
.. code-block:: html+twig
.. csv-table:: Atributy **list-container**
:header: "data-role", Povinný, "Popis"
**src**, **ano**, Twig object
**format**, **ano**, rozměry obrázku
sizes, *ne*, shodné s HTML5 sizes - povinný při více rozměrech
watermark, *ne*, obrázek bude mít vodoznak
fill, *ne*, doplnit obrázek bílými okraji
vector, *ne*, použít PNG/SVG
transparent, *ne*, obrázek má průhlednost
quality, *ne*, low/normal/high/lossless (defaultně normal)
lazyload, *ne*, *src* a *srcset* jako data atributy
class, --- , třída
----------------
Zvětšení obrázku
----------------
Do odkazu kolem obrázku stačí uvést **@** a nahradí se vhodnou URL. Odkaz může obsahovat **jen jeden obrázek** - pokud je potřeba mít například podmínku, tak je potřeba použít dva odkazy.
.. code-block:: html+twig
===============
i:img360 - 360° zobrazení produktu
===============
.. code-block:: html+twig
.. csv-table:: Atributy **list-container**
:header: "data-role", Povinný, "Popis"
**produkt**, **ano**, Produkt objekt
format, *ne*, rozměry obrázků (stejně jako u i:img). Defaultně [500x500, 1000x1000, 1500x1500, 2000x2000]
sizes, *ne*, responzivita u případného obrázků (stejně jako u i:img). - povinný při více rozměrech
zoom, *ne*, int hodnota zoomu (defaultně 3)
no-steps, *ne*, skryje tlačítko pro kroky vpřed a zpět
no-fullscreen, *ne*, skryje tlačítko pro fullscreen
lazyload, *ne*, načíst knihovnu a obrázky až když je element ve viewportu
hidden, *ne*, element je skrytý (display:none) a aktivuje přes JS (použité pro fancybox)
autoplay, *ne*,
Pro zobrazení ve FancyBoxu je potřeba přidat náhledový obrázek a skrytý přehrávač. Konkrétní třída nehraje roli - důležité je spárovat náhled s přehrávačem.
.. code-block:: html+twig
=======
i:video
=======
.. code-block:: html+twig
{%for video in zbozi.videa%}
{%endfor%}
{%for video in zbozi.videa%}
{%endfor%}
.. csv-table:: Atributy **list-container**
:header: "Atribut", Povinný, Typ, "Popis"
**src**, **ano**, twig, Twig object
width, ne, int, šířka v pixelech (bez jednotek)
height, ne, int, výška v pixelech (bez jednotek)
controls, ne, string, `true` / `false`
loop, ne, string, `true` / `false`
color, ne, string, HEX kód barvy ikonky
autoplay, ne, ,
class, --- , ---, třída
===============================================
i:dynamic (atribut) - definice dynamické části
===============================================
Obalením části kódu do elementu s atributem *i:dynamic* lze definovat, že tuto část bude potřeba z javascriptu dynamicky aktualizovat. V atributu je nutné definovat seznam použitých proměnných a pouze tyto proměnné budou dostupné uvnitř elementu (podobný princip jako u Twig `makra `_).
Přidáním atributu *i:dynamic* se nijak nemění funkčnost kódu a výstup je pořád stejný. Jediným rozdílem je nový atribut ve výsledném HTML, který umožní znovunačtení části stránky z javascriptu.
Při reloadu lze poslat také další vlastní proměnné jako "arguments". Ty jsou pak v šabloně dostupné v poli "arguments". Typické použití je například reload části stránky zobrazující bližší informace o variantě - přes argument lze předat nově vybranou variantu.
Argumenty jsou určeny vždy jen na zpřesnění výběru a **nelze je použít** na načtení nového obsahu. URL je veřejná, takže pokud se argumentem předávalo například číslo objednávky, tak by změnou URL bylo možné zjistit detaily jakékoliv objednávky. V případě údajů variant apod ruční změna id v url ničemu nevadí.
.. code-block:: html+twig
{# třída není povinná a může být libovolná #}
{% if arguments['variant']|default(product.variant.id) %}
abc
{% endif %}
.. code-block:: javascript
$('.cart-items-table').reload(); // reload podle třídy
$('.cart-items-table, .second-dynamic-div').reload(); // reload více částí zároveň
$('.cart-items-table').reload({
callback: function() {
alert('načteno!');
}
});
$('.cart-items-table').reload({
callback: function() {
alert('načteno!');
},
arguments: {
variant: 123
}
});
$('.cart-items-table').reload({
after:function(callback){
// kód, který se spustí po načítací animaci, ale před samotným načtením
// načtení se spustí zavoláním callbacku
// praktické pro asynchronní akce, kdy chceme načítací animaci, ale reload až po dokončení
callback();
}
});
===========================================
i:dynamic (tag) - definice dynamické části
===========================================
Obalením části kódu do elementu lze definovat, že tuto část lze z javascriptu dynamicky aktualizovat (automaticky nebo ručně).
Tag lze využít pro:
- znovu načtení obsahu elementu spuštěné zavoláním javascriptu
- odložení vygenerování obsahu až když je element ve viewportu (lazy="auto")
- odložení vygenerování obsahu až když je vyžadování z javascriptu (lazy="manual")
V atributu *variables* je nutné definovat seznam použitých proměnných a pouze tyto proměnné budou dostupné uvnitř elementu (podobný princip jako u Twig `makra `_).
.. code-block:: html+twig
{# obsah bude ve stránce hned při vygenerování stránky a lze ho z javascriptu nechat obnovit #}
{# třída není povinná a může být libovolná #}
{{ product.name }}
{# obsah nebude ve stránce hned při vygenerování stránky, načte se automaticky při vstupu do viewportu a lze ho z javascriptu nechat obnovit #}
{{ product.name }}
{# obsah nebude ve stránce hned při vygenerování stránky, načte se až při zavolání reload() z javascriptu #}
{{ product.name }}
=========================
i:map - interaktivní mapa
=========================
Cílem je sjednotit a zjednodušit vkládání mapy do šablony. Mapa automaticky zvolí zoom a střed dle vložených bodů (**pokud není definováno!**)
Mapa se vykreslí přes mapy.cz, ale v budoucnu pravděpodobně bude přidána podpora pro další mapy kvůli jazykoývm verzím apod. Zápis v šabloně je ale jednotný a přidání podpory Google Maps apod by nemělo vyžadovat žádnou změnu v šabloně.
.. code-block:: html+twig
Po: 08:00-18:00
Út: 08:00-18:00
St: 08:00-18:00
Čt: 08:00-18:00
Pá: 08:00-18:00 {%trans%}Otevírací doba{%endtrans%}
08:00-18:00
{% for location in locations %}
{% endfor %}
.. code-block:: html
