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.

<?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"/>
            <content type="select" label="Test selectu" code="selection" width="100">
                <choice code="first" label="První"/>
                <choice code="second" label="Druhý"/>
                <choice code="third" label="Třetí"/>
            </content>
        </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é.

{% 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 %}

{% 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 %}