#############
Content grid
#############

Pro strukturovaný obsah je možné definovat schéma, podle kterého se zobrazí ovládací prvky v administrace. Lze tak vytvořit rozhraní pro zadávání obsahu, který by administrace standardně nepodporovala.

Funkce je určená na vzhledové prvky - například vypsání textů na landing page na specifických pozicích spolu s obrázky. Obsah není dostupný mimo šablonu, takže funkce není vhodná na obsha, který bude potřeba například ve feedech, při tisku štítků a podobně.

=================
Definice schématu
=================

Schéma je XML soubor ve složce **content-grid** v šabloně. Podle názvu souboru se následně obsah v šabloně vypisuje (např na obsah definovaný souborem **content-grid/product-cta.xml** se v šabloně použije **{{ product.contentGrid('product-cta') }}**)

V editoru lze importovat schéma https://tpldoc.simplia.cz/xsd/content-grid.xsd, aby mohl napovídat možné hodnoty a kontrolovat validní syntax.

Definovaná struktura nemá přímo vliv na funkčnost a je hlavně pro lepší orientaci v administraci. Rozložení by mělo ideálně přibližně odpovídat výslednému zobrazení v eshopu.

.. code-block:: xml

    <?xml version="1.0" encoding="utf-8"?>
    <schema xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="https://tpldoc.simplia.cz/xsd/content-grid.xsd">
        <config>
            <name>Obsahová mřížka</name> <!-- název pro orientaci v administraci - vypíše se na přidávací tlačítku -->
            <priority>1</priority> <!-- priorita pro řazení v administraci -->
            <translations>false</translations> <!-- při zapnutých překladech se v administraci zakládá obsah pro každý jazyk samostatně -->
            <mode>full_page</mode> <!-- "full_page" nabídne content-grid v roletce typových stránek, "part" vypíše všechny content gridy jako tlačítka -->
            <supported-context type="article"/> <!-- pro jaké kontexty je obsah podporován -->
            <supported-context type="text_page"/>
        </config>
        <grid>
            <row label="Hlavička" code="header"> <!-- "label" určuje nadpis v administraci, "code" definuje, jak se bude na obsah odkazovat v šabloně -->
                <content type="string" label="Nadpis" code="headline" width="20"/> <!-- volitelně lze definovat šířku v procentech -->
                <content type="image" label="Ikonka nadpisu" code="image"/>
            </row>
            <row label="Obsah" code="content">
                <content type="html" label="Text" code="text"/>
                <content type="image" label="Nadpis3" code="image2"/>
                <cell label="vyberte kategorii" code="image2">
                    <row code="text">
                        <content type="html" label="Text" code="text"/>
                    </row>
                    <row code="image2">
                        <content type="image" label="Nadpis3" code="image2" multiple="true" /> <!-- obsah s povoleným opakováním lze v administraci řadit -->
                    </row>
                </cell>
            </row>
            <row label="Obsah2" code="content2" multiple="true"> <!-- atribut "multiple" umožní přidání více bloků (nebo žádného) - v šabloně je pak "content2" dostupný jako pole -->
                <content type="html" label="Text" code="text"/>
                <content type="image" label="Nadpis3" code="image2"/>
                <content type="category" label="kategorie" code="category" multiple="true"/>
            </row>
        </grid>
    </schema>

===============
Režim zobrazení
===============

Nastavení tagu *mode* lze přepnout mezi dvěma způsoby zobrazení:

 - *full_page*: V administraci se zobrazí roletka "Rozložení" na výběr typové stránky. Po výběru roletka mizí a nezobrazují se ani žádná tlačítka pro přidání další contentGrid. Ideální na typové stránky jako třeba stránka *O nás* apod.
 - *part*: Předpokládá se použití i více různých contentGrid na jedné stránce. Typicky contentGrid tvoří nějaký jeden prvek obsahu, ale nepřebírá zbytek stránky.

=================
Použití v šabloně
=================

U podporovaných objektů se obsah načítá vždy metodou *contentGrid* a názvem souboru s definicí. Pokud pro daný objekt nebyl definován, vrací se *null*. Struktura vrácených odpovídá struktuře z XML definice. Všechny hodnoty nemusí být vyplněné.

.. code-block:: html+twig

    {% if product.contentGrid('product-cta') }
        <h3>{{ product.contentGrid('product-cta').header.headline }} <i:img src="product.contentGrid('product-cta').header.image" format="30x30"/> </h3>
        {% for content in product.contentGrid('product-cta').content2 %}
            {{ content.text }}
        {% endfor %}
    {% endif %}


.. code-block:: html+twig

    {% if this.contentGrid('banner-cta') }
        <h3>{{ this.contentGrid('banner-cta').header.headline }} <i:img src="this.contentGrid('banner-cta').header.image" format="30x30"/> </h3>
        {% for content in this.contentGrid('banner-cta').content2 %}
            {{ content.text }}
        {% endfor %}
    {% endif %}