Výpisy

List-container

Výpis produktů dle šablony list-item. Pokud nejsou nalezeny žádné produkty, použije se zpráva definovaná v list-empty.

Do volitelného data-role=“pagination“ je doplněn obsah definovaný přes pagination v souboru _listing.tpl (_listing_article.tpl pro články atd.). Různé šablony lze určit atributem data-name.

POZOR! Není možné obalovat stránkování podmínkou pro zobrazení. Takový kód by nefungoval při fitrování přes AJAX. Pokud je potřeba například skrýt stránkování u výpisů s jen jednou stranou, stačí přidat podmínku do <i:list-pagination>

{# použije šablonu "default" (nebo bez jména) z _listing.tpl #}
<i:list-container type="product">
    <div data-role="pagination"/>
    <div data-role="empty"/>
    <div data-role="list"/>
</i:list-container>
<i:list-container type="product">
    <div data-role="pagination"/>
    <div data-role="empty"/>
    <div data-role="list" data-name="short"/>
    <div data-role="pagination" data-name="simple" />
</i:list-container>
{# obalit boxy po třech do .wrap, proložit <hr> a přidat třídu "third" #}
<i:list-container type="product" wrap="3:div.wrap" append="3:hr" box-class="3:third">
    <div data-role="empty"/>
    <div data-role="list"/>
</i:list-container>
{# obalit boxy po třech do .wrap a .www-rap, proložit <hr> a přidat třídu "third" #}
<i:list-container type="product" wrap="3:div.wrap.www-rap" append="3:hr" box-class="3:third">
    <div data-role="empty"/>
    <div data-role="list"/>
</i:list-container>
{# použije šablonu "news" z _listing.tpl #}
<i:list-container type="product" item="news">
    <div data-role="empty"/>
    <div data-role="list"/>
</i:list-container>
Atributy list-container
data-role Povinný Popis
type ano typ výpisu
source ne Twig object s parametry výpisu
item ne šablona položky (dle list-item)
wrap ne obalovat skupiny boxů
append ne přidat tag za skupinu boxů
box-class ne přidat třídu
hide-empty ne skýt celý container, pokud neobsahuje položky (bez hodnoty)
scroll-offset ne CSS selector pro započítání fixní hlavičky
class třída

hide-empty - skrýt výpis bez položek

Při uvedení atributu hide-empty (uvádí se bez hodnoty) se container vůbec nevypíše, pokud neobsahuje žádné položky. S tímto atributem se pak vůbec nepoužívá definice prázdného výpisu.

<i:list-container type="product" source="{kategorie:123,limit:10}" hide-empty>
    <div data-role="list"/>
</i:list-container>

source - parametry výpisu

Pokud není atribut source uveden, použije se defaultní výpis pro danou stránku. Například v kategorii se budou vypisovat produkty z kategorie atd. Výpis bez uvedeného source aktualizuje URL při změně (strana, filtr, …)

V parametrech je možné použít globální proměnné, ale není možné použít žádnou lokální proměnou. Tzn. zápis musí fungovat úplně stejně, pokud se smaže zbytek šablony.

<i:list-container type="product" source="{kategorie:123,limit:10}">
    <div data-role="empty"/>
    <div data-role="list"/>
</i:list-container>
<i:list-container type="product" source="{kategorie:kategorie.id,limit:10}">
    <div data-role="empty"/>
    <div data-role="list"/>
</i:list-container>

wrap - obalení boxů do jednoho tagu

Atributem wrap lze definovat, jakým tagem s jakou třídou (třída je nepovinná) a z jakých podmínek se mají boxy obalit.

<i:list-container source="zdroj_zbozi" wrap="3:ul.sublist" class="list">
    <div data-role="empty"/>
    <div data-role="list"/>
</i:list-container>
<div class="list">
    <ul class="sublist">
        <li>product</li>
        <li>product</li>
        <li>product</li>
    </ul>
    <ul class="sublist">
        <li>product</li>
        <li>product</li>
        <li>product</li>
    </ul>
    <ul class="sublist">
        <li>product</li>
    </ul>
</div>

append - přidání tagu dle pořádí

Atribut append určuje tag, který se má vkládat za vypisované boxy dle podmínek. Podmínek lze zapsat i více a oddělit je čárkou - použije se první tag, který splňuje podmínku.

<i:list-container append="3:hr.divider,last:hr.last" class="list">
    <div data-role="empty"/>
    <div data-role="list"/>
</i:list-container>
<div class="list">
    <div class="item">product</div>
    <div class="item">product</div>
    <div class="item">product</div>
    <hr class="divider"/>
    <div class="item">product</div>
    <div class="item">product</div>
    <div class="item">product</div>
    <hr class="divider"/>
    <div class="item">product</div>
    <hr class="last"/>
</div>

List pagination

Definice stránkování - vždy v souboru _listing.tpl. Definuje makro, které se následně využívá pro výpis produktů v list-container.

Obvykle obsahuje stránkování, informace o počtu záznamů atd.

Nelze přistupovat ke globálním proměnným a je dostupná pouze proměnná pagination.

{# _listing.tpl #}
<i:list-pagination>
    {%if pagination.stran > 1%}
        {%trans%}celkem položek{%endtrans%}: <strong>{{pagination.nsum}}</strong>
        {%trans%}strana{%endtrans%}:  <strong>{{pagination.strany|raw}}</strong>
    {%endif%}
</i:list-pagination>
{# _listing.tpl #}
<i:list-pagination>
    {# přidá další stranu do výpisu místo změny strany #}
    <button data-role="add-page">další produkty</button>
</i:list-pagination>
Atributy pagination
data-role Default Popis
type typ položky (product, article, …)
name default název boxu pro provázání s list-container
Atributy pagination.strany
Atribut Hodnoty Popis
spaces true/false vkládat mezi stránky nedělitelnou mezeru
size 1/2/3/4/5/… počet zobrazených odkazů
label_next ‚string‘ text odkazu na další stránku
label_previous ‚string‘ text odkazu na předchozí stránku
hash ‚string‘ do odkazu se doplní hash za #
{# _listing.tpl #}
<i:list-pagination>
    {{pagination.strany({spaces: true, label_next: 'next-page'|trans})}}
</i:list-pagination>

List empty

Definice zpráv při prázdném výpisu - vždy v souboru _listing.tpl. Definuje makro, které se následně využívá pro výpis produktů v list-container.

Je dostupná pouze proměnná url.

<i:list-empty type="product" name="short">
    Nebyly nalezeny žádné produkty
</i:list-empty>
<i:list-empty type="product">
    <div data-role="default">Nebyly nalezeny žádné produkty</div>
    <div data-role="filter">
        Filtr nenalezl žádné produkty.
        Zkuste upravit hledané vlastnosti nebo <a href="{{url.reset}}">zrušit filtr</a>.
        </div>
</i:list-empty>
Atributy list-empty
data-role Default Popis
type typ položky (product, article, …)
name default název pro provázání s list-container
Dostupné proměnné
název hodnota
url.reset URL bez filtru a strany

List Item

Definice položky výpisu - vždy v souboru _listing.tpl. Definuje makro, které se následně využívá pro výpis produktů v list-container.

Nelze přistupovat ke globálním proměnným a nelze zjistit pozici ve výpisu.

{# _listing.tpl #}
<i:list-item>
    <h3>{{product.nazev}}</h3>
</i:list-item>
<i:list-item tag="li" name="news">
    <h3>{{product.nazev}}</h3>
</i:list-item>
Atributy list-item
data-role Default Popis
type typ položky (product, article, …)
tag div jakým tagem obalit výsledný box
name default název boxu pro provázání s list-container
class třída