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%.

<i:img src="zbozi.img" format="800x600" />
<i:img src="zbozi.img" format="800x600,300x200" sizes="(min-width: 500px) 50vw, 100vw" />
Atributy list-container
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.

<a href="@"><i:img src="zbozi.img" format="800x600" /></a>
<a href="@"><i:img src="zbozi.img" format="800x600" sizes="(min-width: 500px) 50vw, 100vw" /></a>

i:video

{%for video in zbozi.videa%}
    <i:video src="video" width="400" height="300" />
{%endfor%}
{%for video in zbozi.videa%}
    <i:video src="video" width="400" height="300" class="embedded_video" />
{%endfor%}
Atributy list-container
Atribut Typ Povinný Popis
src ano twig Twig object
width ne int šířka v pixelech (bez jednotek)
height ne int výška v pixelech (bez jednotek)
lazyload ne true|false na mobilu defaultně true
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

<div i:dynamic="cart" class="cart-items-table"> {# třída není povinná a může být libovolná #}

</div>
$('.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({
    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();
    }
});