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" />
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:img360 - 360° zobrazení produktu¶
<i:img-360 product="product" />
<i:img-360 product="product" format="800x600,300x200" sizes="(min-width: 500px) 50vw, 100vw"/>
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 |
|||
no-play |
ne |
skryje play/stop tlačítko |
|||
hide-logo |
ne |
skryje logo 360° view |
|||
bottom-circle |
ne |
zobrazí spodní kruh 360° |
|||
lazyload |
ne |
načíst knihovnu a obrázky až když je element ve viewportu |
|||
lazyload=“click“ |
ne |
načíst knihovnu a obrázky až když se klikne na element |
|||
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.
<a data-src=".hidden-fancybox-360" data-type="inline" href="javascript:;" data-fancybox>
<i:img src="product.firstImage360" format="350x350" />
</a>
<i:img-360 product="product" hidden class="hidden-fancybox-360" />
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%}
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í.
<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:dynamic (tag) - definice dynamické části¶
Obalením části kódu do elementu <i:dynamic> 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).
{# obsah bude ve stránce hned při vygenerování stránky a lze ho z javascriptu nechat obnovit #}
<i:dynamic variables="cart,product" class="cart-items-table"> {# třída není povinná a může být libovolná #}
<h4>{{ product.name }}</h4>
</i:dynamic>
{# 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 #}
<i:dynamic variables="cart,product" lazy="auto" class="cart-items-table">
<h4>{{ product.name }}</h4>
</i:dynamic>
{# obsah nebude ve stránce hned při vygenerování stránky, načte se až při zavolání reload() z javascriptu #}
<i:dynamic variables="cart,product" lazy="manual" class="cart-items-table">
<h4>{{ product.name }}</h4>
</i:dynamic>
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" size="40x50" 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" size="40x50" label="Centrála" tags="usti,kartou"/>
<i:map-point lat="51.00" lon="15.000" icon="/images/logo.svg" size="40x50" 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>
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 |
|
clusters=““ |
ne |
Defaultní vzdálenost pro marker v clusteru (40) |
cluster-class=““ |
ne |
vlastní třída pro cluster |
view=““ |
ne |
basic / hybrid / aviation / tourist / winter (defaultně basic) |
view-layers=“basic,aviation“ |
ne |
Zapnutí přepínání jednotlivých map - basic / hybrid / aviation / tourist / winter (defaultně „basic,aviation,hybrid,tourist,winter“) |
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 |
|
size=“20x20“ |
ne |
velikost custom markeru. Defaultní rozměr 23x32 |
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 |
Vlastní třída pro cluster¶
<i:map cluster-class=“embed-map-cluster“></i:map>
cluster-class přepíše originální třídu a vytvoří nové třídy pro cluster
Class |
Popis |
|---|---|
embed-map-cluster |
obecná třída pro všechny clustery |
embed-map-cluster-small |
< 10 points |
embed-map-cluster-medium |
< 40 points |
embed-map-cluster-large |
> 40 points |
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
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.
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&rc=95ra0x1qpF&rs=&rs=coor&ri=&ri=&mrp=&mrp={"c":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&y=50.090213775635&id=12903247&source=firm">Helveti</a><br>
<a class="map-link" href="//mapy.cz/zakladni?x=14.429894447327&y=50.081184387207&id=12914136&source=firm">Jadi.cz Praha</a><br>
<a class="map-link" href="//mapy.cz/zakladni?x=15.056777954102&y=50.770107269287&id=2099659&source=firm">JAdi.cz Liberec</a><br>
<a class="map-link" href="//mapy.cz/zakladni?x=15.172479629517&y=50.72388458252&id=726263&source=firm">Jadi.cz</a><br>
<a class="map-link" href="//mapy.cz/zakladni?q=V%C3%ADtkova+244%2F8%2C+Praha">Adresa</a>