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

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

<div i:dynamic="cart,product" class="cart-items-table"> {# třída není povinná a může být libovolná #}
    {% if arguments['variant']|default(product.variant.id) %}
        abc
    {% endif %}
</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({
    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: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ě.

<i:map grayscale class="map-class">
    <i:map-point address="Drtinova 10, Praha" icon="/images/logo.svg" header="Otevírací doba" tags="praha,kartou">
        Po: 08:00-18:00<br/>
        Út: 08:00-18:00<br/>
        St: 08:00-18:00<br/>
        Čt: 08:00-18:00<br/>
        Pá: 08:00-18:00<br/>
    </i:map-point>
    <i:map-point lat="50.65" lon="14.1456" icon="/images/logo.svg" label="Centrála" tags="usti,kartou"/>
    <i:map-point lat="51.00" lon="15.000" icon="/images/logo.svg" tags="andelka">
        <strong>{%trans%}Otevírací doba{%endtrans%}</strong> <br>
        08:00-18:00
    </i:map-point>

    {% for location in locations %}
        <i:map-point lat="{{location.lat}}" lon="{{location.lon}}" />
    {% endfor %}
</i:map>
<!-- vygenerovaný kód - může se měnit! -->

<div class="map-class global-map grayscale">
    <span data-header="Otevírací doba" data-tags="praha,kartou" data-gps="50.0255597,14.5510733" data-icon="/1585575662/images/logo.svg" data-lat="50.0255597" data-lon="14.5510733">
        Po: 08:00-18:00<br>
        Út: 08:00-18:00<br>
        St: 08:00-18:00<br>
        Čt: 08:00-18:00<br>
        Pá: 08:00-18:00<br>
    </span>
    <span data-lat="50.65" data-lon="14.1456" data-label="Centrála" data-tags="usti,kartou" data-icon="/1585575662/images/logo.svg"></span>
    <span data-lat="51.00" data-lon="15.000" data-tags="andelka" data-icon="/1585575662/images/logo.svg">
        <strong>Otevírací doba</strong> <br>
        08:00-18:00
    </span>
    <div class="mapycz" style="height:400px"></div>
</div>
Atributy i:map
Atribut Povinný Popis
lat=““ ne Zeměpisná šířka středu mapy
lon=““ ne Zeměpisná délka středu mapy
zoom=““ ne Defaultní zoom mapy
height=““ ne Defaultní výška mapy (400px)
controls=“off“ ne Skrýt ovládací prvky
grayscale ne  
Atributy i:map-point
Atribut Povinný Popis
lat=““ a lon=““ ano Souřadnice bodu. Nutno vyplnit lat/lon nebo address
address=““ ano Adresa bodu. Nutno vyplnit lat/lon nebo address
icon=“/images/home.svg“ ne  
label=“Centrála“ ne Hover titulek
header=“Otevírací doba“ ne Titulek „karty“
tags=“praha“ ne Tagy odděleny čárkou
code=“xxx“ ne identifikátor markeru

Externí otevření POI

Po zavolání fuknce window.mapComponent.openMarkerCard(code) lze otevřít libovolný detail POI.

<button type="button" class="show-marker-detail" data-code="simplia">Simplia</button>
<button type="button" class="show-marker-detail" data-code="test">Testovaci</button>

<i:map class="marker-map">
    <i:map-point address="Drtinova 10, Praha" code="simplia">
        Po: 08:00-18:00<br/>
        Út: 08:00-18:00<br/>
        St: 08:00-18:00<br/>
        Čt: 08:00-18:00<br/>
        Pá: 08:00-18:00<br/>
    </i:map-point>
    <i:map-point lat="51.00" lon="15.000" code="test">
        <strong>{%trans%}Otevírací doba{%endtrans%}</strong> <br>
        08:00-18:00
    </i:map-point>
</i:map>
<script type="text/javascript">
    Array.prototype.forEach.call(document.querySelectorAll('.show-marker-detail'), function (el) {
        el.addEventListener('click', function (e) {
            e.preventDefault();

            var targetElement = e.target || e.srcElement;

            window.mapComponent.openMarkerCard('.marker-map', targetElement.dataset.code);
        });
    });
</script>

Filtrace bodů na mapě

Mezi jednotlivými poly s tagy se filtruje pomocí AND v rámci jednotlivých tagů se používá OR. Viz. příklad Praha nebo Usti A kartou

Parametry window.mapComponent.filter
Atribut Povinný Popis
selector ano Selector pro mapu např .global-map
filtr ano Pole s tagy
boolean ne automatické centrování mapy na filtrované POI Defaultní hodnota false
<script type="text/javascript">
    window.mapComponent.filter('.filter-map', [['praha', 'usti'], ['kartou']], true);
</script>

Plánování trasy

Vytvoření URL za pomocí api.mapy.cz pro plánování trasy.

Atributy i:map-route-link
Atribut Povinný Popis
lat=““ a lon=““ ano Souřadnice bodu. Nutno vyplnit lat/lon nebo address
address=““ ano Adresa bodu. Nutno vyplnit lat/lon nebo address
<i:map-route-link lat="50.7700158" lon="15.0595950">Popisek</i:map-route-link>
<!-- vygenerovaný kód - může se měnit! -->

<a class="map-route-link" data-lat="50.7700158" data-lon="15.0595950" href="//mapy.cz/?planovani-trasy&amp;rc=95ra0x1qpF&amp;rs=&amp;rs=coor&amp;ri=&amp;ri=&amp;mrp=&amp;mrp={&quot;c&quot;:111}">
    Popisek
</a>

Odkaz na mapy.cz

Vytvoření URL na POI mapy.cz

<i:map-link search="Helveti.cz">Helveti</i:map-link><br>
<i:map-link search="Jadi.cz, Praha">Jadi.cz Praha</i:map-link><br>
<i:map-link search="Jadi.cz, Liberec">JAdi.cz Liberec</i:map-link><br>
<i:map-link search="Jadi.cz">Jadi.cz</i:map-link><br>
<i:map-link search="Vítkova 244/8, Praha">Adresa</i:map-link>
<!-- vygenerovaný kód - může se měnit! -->
<a class="map-link" href="//mapy.cz/zakladni?x=14.446071624756&amp;y=50.090213775635&amp;id=12903247&amp;source=firm">Helveti</a><br>
<a class="map-link" href="//mapy.cz/zakladni?x=14.429894447327&amp;y=50.081184387207&amp;id=12914136&amp;source=firm">Jadi.cz Praha</a><br>
<a class="map-link" href="//mapy.cz/zakladni?x=15.056777954102&amp;y=50.770107269287&amp;id=2099659&amp;source=firm">JAdi.cz Liberec</a><br>
<a class="map-link" href="//mapy.cz/zakladni?x=15.172479629517&amp;y=50.72388458252&amp;id=726263&amp;source=firm">Jadi.cz</a><br>
<a class="map-link" href="//mapy.cz/zakladni?q=V%C3%ADtkova+244%2F8%2C+Praha">Adresa</a>

i:banners

Šablona pro sjednocený výpis bannerů.

V příkladech níže jsou podstatné i:**** tagy a zbytek šablony bude u každého eshopu historicky jiný.

<i:banners source="repository.banner.findBy({sectionCode: 'testovaci'})" plugin="swiper">
    <source format="1150x630" src="desktop"/>
</i:banners>
<!-- vygenerovaný kód - může se měnit! -->

<div class="banner swiper-container">
    <div class="banner-wrap swiper-wrapper">
        <div class="banner-item banner--item__1 banner--item__first swiper-slide">
            <picture>
                <img width="1150" height="630"
                          srcset="//i00.eu/img/999997/1150x630a/562ojxe8/2229.webp 1x,//i00.eu/img/999997/2300x1260/25nkjd5z/2229.webp 2x"
                          src="//i00.eu/img/999997/1150x630a/562ojxe8/2229.webp">
            </picture>
        </div>
        <div class="banner-item banner--item__2 banner--item__last swiper-slide">
            <picture>
                <img class="auto-lazyload swiper-lazy" width="1150" height="599"
                          data-srcset="//i00.eu/img/999997/1150x630a/a7mwzmns/2237.webp 1x,//i00.eu/img/999997/2300x1260/b9whiv1f/2237.webp 2x"
                          src="//i00.eu/img/999997/1150x630a/a7mwzmns/2237.webp"
                          data-src="//i00.eu/img/999997/1150x630a/a7mwzmns/2237.webp"
                          srcset="//i00.eu/img/999997/1150x630a/a7mwzmns/2237.webp 1x,//i00.eu/img/999997/2300x1260/b9whiv1f/2237.webp 2x"
                          data-loaded="true">
            </picture>
        </div>
    </div>
</div>

Příklad použití vnitřního obalového divu.

<i:banners source="repository.banner.findBy({sectionCode: 'testovaci'})" wrap="div.wrap.www-rap">
    <source format="1150x630" src="desktop"/>

    <h2 data-role="title"/>
    <div data-role="description"/>
    <div data-role="cta"/>
</i:banners>
<div class="banner">
    <div class="banner-wrap">
        <div class="banner-item banner--item__1 banner--item__first">
            <div class="wrap www-rap">
                <picture>
                    <img width="1150" height="630"
                              srcset="//i00.eu/img/999997/1150x630a/562ojxe8/2229.webp 1x,//i00.eu/img/999997/2300x1260/25nkjd5z/2229.webp 2x"
                              src="//i00.eu/img/999997/1150x630a/562ojxe8/2229.webp">
                </picture>
                <div class="banner-info">
                    <h2 class="banner-info__headline">První Slide</h2>
                    <div class="banner-info__description">Popisek....</div>
                    <a class="button banner-info__button" href="https://www.simplia.cz">CTA</a>
                </div>
            </div>
        </div>
        <div class="banner-item banner--item__2">
            <div class="wrap www-rap">
                <picture>
                    <img class="auto-lazyload" width="1150" height="630"
                              data-srcset="//i00.eu/img/999997/1150x630a/79l5pfe2/2234.webp 1x,//i00.eu/img/999997/2300x1260/acf5nmee/2234.webp 2x"
                              src="//i00.eu/img/999997/1150x630a/79l5pfe2/2234.webp"
                              data-src="//i00.eu/img/999997/1150x630a/79l5pfe2/2234.webp"
                              srcset="//i00.eu/img/999997/1150x630a/79l5pfe2/2234.webp 1x,//i00.eu/img/999997/2300x1260/acf5nmee/2234.webp 2x"
                              data-loaded="true">
                </picture>
                <div class="banner-info">
                    <h2 class="banner-info__headline">Druhý slide</h2>
                    <div class="banner-info__description">popis :)</div>
                    <a class="button banner-info__button">CTA</a>
                </div>
            </div>
        </div>
        <div class="banner-item banner--item__3 banner--item__last">
            <div class="wrap www-rap">
                <picture>
                    <img class="auto-lazyload" width="1150" height="599"
                              data-srcset="//i00.eu/img/999997/1150x630a/a7mwzmns/2237.webp 1x,//i00.eu/img/999997/2300x1260/b9whiv1f/2237.webp 2x"
                              src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1150 599'%3E%3C/svg%3E"
                              data-src="//i00.eu/img/999997/1150x630a/a7mwzmns/2237.webp">
                </picture>
                <div class="banner-info">
                    <h2 class="banner-info__headline">Třetí slide</h2>
                </div>
            </div>
        </div>
    </div>
</div>

Zanoření tříd bannerů.

<i:banners source="repository.banner.findBy({sectionCode: 'testovaci'})" wrap="div.inner-wrap-class" banner-item-class="custom-item-class" banner-wrap-class="extra-banner-wrap">
    <source format="1150x630" src="desktop"/>
</i:banners>
<div class="banner">
    <div class="banner-wrap extra-banner-wrap">
        <div class="banner-item banner--item__1 banner--item__first banner--item__last custom-item-class">
            <div class="inner-wrap-class">
                <picture>
                    <img width="1150" height="630"
                         srcset="//i00.eu/img/999997/1150x630a/562ojxe8/2229.webp 1x,//i00.eu/img/999997/2300x1260/25nkjd5z/2229.webp 2x"
                         src="//i00.eu/img/999997/1150x630a/562ojxe8/2229.webp">
                </picture>
            </div>
        </div>
    </div>
</div>

Tooltip k názvu banneru.

<i:banners source="repository.banner.findBy({sectionCode: 'testovaci'})">
    <source format="1150x630" src="desktop"/>

    <h2 data-role="title" tooltip/>
    <span data-role="cta"/>
</i:banners>
<div class="banner">
    <div class="banner-wrap">
        <div class="banner-item banner--item__1 banner--item__first banner--item__last">
            <picture>
                <img width="1150" height="630"
                          srcset="//i00.eu/img/999997/1150x630a/562ojxe8/2229.webp 1x,//i00.eu/img/999997/2300x1260/25nkjd5z/2229.webp 2x"
                          src="//i00.eu/img/999997/1150x630a/562ojxe8/2229.webp">
            </picture>
            <div class="banner-info">
                <h2 class="banner-info__headline">
                    První Slide
                    <span class="banner-info__headline-tooltip-text">Popisek....</span>
                </h2>
                <a class="button banner-info__button" href="https://www.simplia.cz">CTA</a>
            </div>
        </div>
    </div>
</div>
Parametry banners
Parametr Povinný Popis
source ano repository.banner.findBy()
priority ne povolené možnosti high / low (default high). | low - lazyload na všech obrázcích | high - definuje visible-slides
visible-slides ne počet bannerů bez lazyloadu defaultní hodnota 1
wrap ne vnitřní obal banneru
class ne přidání vlastní třídy
banner-item-class ne přidání vlastní třídy pro wrapper bannerů
banner-wrap-class ne přidání vlastní třídy pro wrapper jednotlivých banneru
picture-class ne přidání vlastní třídy pro picture wrapper
plugin ne přidání pomocných tříd pro konkrétní plugin. např. swiper
click ne nastavení prokliku na banner. Povolené možnosti banner / cta / off.
Atributy banners
Atribut Povinný Popis
arrows ne zobrazení šipek pro změnu slidu
dots ne zobrazení navigace slidů
progress ne zobrazení progress baru
thumbnails ne zobrazení náhledu s názvem banneru
transparent ne obrázek má průhlednost
fill ne doplní obrázek bílými okraji
source pro banners
data-role Povinný Attributy
desktop ano format - povinný rozměr banneru | sizes - shodné s HTML5 sizes - povinný při více rozměrech (default 80vw) | class - přidání vlastní třídy
tablet ne format - rozměry banneru | sizes - shodné s HTML5 sizes - povinný při více rozměrech | media - shodné s HTML5 media | class - přidání vlastní třídy
mobile ne format - rozměry banneru | sizes - shodné s HTML5 sizes - povinný při více rozměrech | media - shodné s HTML5 media | class - přidání vlastní třídy
Kompletní seznam data-role pro banners
data-role Povinný Attributy
info-box ne definice tagu
title ne definice tagu
description ne definice tagu
cta ne definice tagu
<i:banners source="repository.banner.findBy({sectionCode: 'testovaci'})" plugin="swiper" class="custom-class,super-class" click="banner" arrows dots progress>
    <source format="1150x630" src="desktop"/>
    <source media="(min-width: 440px) and (max-width: 768px)" format="748x486,249x162" sizes="100vw" src="tablet"/>
    <source media="max-width: 440px" format="640x790,320x340" sizes="100vw" src="mobile"/>

    <div data-role="info-box" class="infobox-extra-class" />
    <h2 data-role="title"/>
    <div data-role="description"/>
    <span data-role="cta"/>
</i:banners>
<!-- vygenerovaný kód - může se měnit! -->

<div class="banner custom-class super-class swiper-container">
    <div class="banner-wrap swiper-wrapper">
        <div class="banner-item banner--item__1 banner--item__first swiper-slide">
            <a href="https://www.simplia.cz">
                <picture>
                    <source srcset="//i00.eu/img/999997/640x790a/5e37hrnn/2227.webp 640w,//i00.eu/img/999997/320x340a/5072sf1e/2227.webp 320w"
                            media="max-width: 440px" sizes="100vw">
                    <source srcset="//i00.eu/img/999997/748x486a/cr5pv3u6/2228.webp 748w,//i00.eu/img/999997/249x162a/85hs2grx/2228.webp 249w"
                            media="(min-width: 440px) and (max-width: 768px)" sizes="100vw">
                    <img width="1150" height="630"
                         srcset="//i00.eu/img/999997/1150x630a/562ojxe8/2229.webp 1x,//i00.eu/img/999997/2300x1260/25nkjd5z/2229.webp 2x"
                         src="//i00.eu/img/999997/1150x630a/562ojxe8/2229.webp">
                </picture>
                <div class="banner-info infobox-extra-class">
                    <h2 class="banner-info__headline">První Slide</h2>
                    <div class="banner-info__description">Popisek....</div>
                    <span class="button banner-info__button">CTA</span>
                </div>
                <div class="banner-progress">
                    <div class="progress"></div>
                </div>
            </a>
        </div>
        <div class="banner-item banner--item__2 banner--item__last swiper-slide">
            <picture>
                <source srcset="//i00.eu/img/999997/640x790a/1ihskwis/2239.webp 640w,//i00.eu/img/999997/320x340a/4dkf8gy0/2239.webp 320w"
                        media="max-width: 440px" sizes="100vw">
                <source srcset="//i00.eu/img/999997/748x486a/697q3ssb/2238.webp 748w,//i00.eu/img/999997/249x162a/25bq8xs2/2238.webp 249w"
                        media="(min-width: 440px) and (max-width: 768px)" sizes="100vw">
                <img class="auto-lazyload swiper-lazy" width="1150" height="599"
                     data-srcset="//i00.eu/img/999997/1150x630a/a7mwzmns/2237.webp 1x,//i00.eu/img/999997/2300x1260/b9whiv1f/2237.webp 2x"
                     src="//i00.eu/img/999997/1150x630a/a7mwzmns/2237.webp"
                     data-src="//i00.eu/img/999997/1150x630a/a7mwzmns/2237.webp"
                     srcset="//i00.eu/img/999997/1150x630a/a7mwzmns/2237.webp 1x,//i00.eu/img/999997/2300x1260/b9whiv1f/2237.webp 2x"
                     data-loaded="true">
            </picture>
            <div class="banner-info infobox-extra-class">
                <h2 class="banner-info__headline">Druhý slide</h2>
            </div>
            <div class="banner-progress">
                <div class="progress"></div>
            </div>
        </div>
    </div>
    <div class="pagination swiper-pagination"></div>
    <div class="button-next swiper-button-next"></div>
    <div class="button-prev swiper-button-prev"></div>
</div>