Některé typy šablon je možné použít jako Styl obsahu. Jedná se o šablony, které mají definované Bloky šablony, které se následně po zvolení stylu v kampani zobrazí v levé části jako Bloky obsahu.
Základ šablony, jež má být použita jako Styl obsahu, je definován v souboru Hlavní soubor šablony a jedná se o standardní statické HTML, které definuje hlavičku, patičku, CSS styly, ale např. i skrytý preheader a tzv. drop zóny, do kterých se pomocí Drag & Drop následně umisťují bloky.
Pokud šablona obsahuje skrytý preheader (text, který se v některých e-mailových klientech zobrazuje za předmětem), tak je zapotřebí aby tento preheader měl definovanou class="preheader". Aby byl v editoru obsah preheaderu nebo kterékoliv části šablony editovatelný je potřeba využít atributu mkt-inline-edit="true".
Drop zónou šablony je jakýkoliv blokový HTML element, který má atribut mkt-area-type="droppable", např:
Takových drop zón je možné v šabloně definovat více, ale pokud má Styl obsahu používat Bloky obsahu, tak je nezbytné definovat alespoň jednu drop zónu, aby bylo kam Bloky obsahu vkládat.
Bloky obsahu
Šablonu pro Blok obsahu vytvoříte pomocí tlačítka "Nový soubor šablony" a následně volby "Blok šablony" a vyplněním názvu bloku. Pod tímto názvem se tento Blok bude v editoru zobrazovat v seznamu dostupných bloků.
Aby však byl blok obsahu funkční a použitelný v editoru kampaně, je nezbytné, aby byl celý obalený v elementu s atributem mkt-block="true". V případě, že by blok tento element neměl, nebude možné po vložení bloku do kampaně s tímto blokem dále manipulovat. Není však přípustné mít vnořené bloky, tzn. mít v bloku definovanou drop zónu, nebo mít v bloku definici dalšího bloku.
V rámci bloku pak lze určovat editovatelné oblasti, které se budou v kampani upravovat pomocí inline editoru na úrovni elementů pomocí atributu mkt-inline-edit="true".
Příklad základní definice bloku:
<div align="center" bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" width="100%" mkt-block="true">
<table class="contenttablein" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td mkt-inline-edit="true">this is inline editable content...</td>
</tr>
</tbody>
</table>
</div>
Datasety
Často je editace přímo v obsahu nekomfortní a pro uživatele složitě uchopitelná a naopak je vhodné manipulovat s kompletní sadou údajů, neboli datasetem. Příkladem může být např. produktový blok, který má název produktu, foto, popis, cenu a odkaz – zatímco většina z těchto údajů je použita pouze jednou a na jednom místě a jejich editace je přímočará, odkaz na produkt může být použit na více místech – jako proklik u názvu produktu, na fotografii produktu i call-to-action tlačítku pro nákup. Zadávání odkazu na třech místech by pak vedlo ke vzniku chyb a právě datasety toto riziko chyby minimalizují. Bloky pak mohou obsahovat jeden ale i více datasetů s vícero údaji.
Každý dataset musí být obalen elementem s atributem mkt-block-type="dataset", podle kterého následně editor kampaně identifikuje, kde jsou v bloku datasety. Jakmile je takto v bloku definován dataset, stane se editovatelným a při kliknutí na něj v editoru se otevře okno umožňující editaci datových atributů.
Datové atributy jsou kombinací atributů elementu a jejich hodnot, které do nich patří a akce, která probíhá při jejich změně. Dělí se na jednoduché atributy a komplexní atributy.
Jednoduché atributy
Jednoduchý atribut je atribut, který se aplikuje přímo na element na němž je použit a změna hodnoty se promítne pouze v rámci daného elementu. Příkladem může být položka ceny v bloku – jednoduchý datový atribut by pak měl podobu mkt-data-field="inner" mkt-label-inner="Nová cena". V tomto případě mkt-data-field říká o jaký typ atributu se jedná, tzn. že se jedná o attribut inner. Změna hodnoty tak povede pouze ke změně vnitřního obsahu (innerHTML) tohoto elementu. Atribut mkt-label-inner pak definuje, jak se má jmenovat štítek v dialogovém okně.
Pokud tedy potřebujete měnit např. alt atribut obrázku, pak datový atribut bude vypadat následovně:
Podporované typy atributů jsou inner (pro innerHTML - obsah uvnitř elementu), alt, title, src, href atd. Editor kampaně také detekuje duplicitní pole, která mají mít totožný obsah, pomocí hodnoty uvedené v mkt-label-atribut. Na výše uvedeném příkladu, pokud by v datasetu bylo vícero obrázků s atributem mkt-label-alt nazvaným "ALT obrázku", ve formuláři by se zobrazil pouze jednou. V případě potřeby je u atributů možné určit, že má zadávání obsahu probíhat pomocí textové oblasti (textarea) a to použitím mkt-input-type="textarea".
Komplexní atributy
Druhým typem datových atributů jsou komplexní atributy, které se používají tam, kde je nutné aplikovat na vícero elementů a jejich atributů, které mají obsahovat totožnou hodnotu. Příkladem může být již zmiňovaný odkaz na produkt, případně název produktu, který se používá nejen jako textový nadpis, ale může sloužit zároveň jako popis obrázku. Podívejme se na následující příklad:
<td mkt-data-field="a#product-name1 inner; a title; img alt" mkt-label-title="Název">
<a href="http://somedomain.cz/product-url" id="product-name1" title="Product title">Product title</a>
</td>
<td>
<a title="Product Title" href="#">
<img src="http://somedomain.cz/product-image.jpg" / alt="Product title">
</a>
</td>
V tomto případě je hodnota atributu mkt-data-field v podobě a#product-name1 inner;a title;img alt, což znamená, že kdykoliv bude aktualizována hodnota s názvem produktu, bude zapsána do obsahu elementu a s id product-name1, na všechny elementy a a jejich atribut title a u všech elementů img na jejich alt atribut. Pro přesné určení selektoru je možné jejich sloučení pomocí mezery, pro id elementu se používá "#" a pro třídy pak ".". Výchozí hodnota ve formuláři se načte z hodnoty prvního selektoru.
U komplexních atributů se štítek vždy nastavuje pomocí mkt-label-title. Upozorňujeme také, že je nutné dodržet následující zásady:
- Element, na který se cílí, by měl používat unikátní ID, aby bylo možné přesně zacílit. Ve výše uvedeném příkladu se jednalo o id="product-name1"
- Vnořené datasety nejsou přípustné
Ukázka celého datasetu
Zde je praktická ukázka použití kombinace jednoduchých i komplexních atributů:
<table width="100%" mkt-block-type="dataset">
<tbody>
<tr>
<td>
<a href="#" class="product-link" mkt-data-field=".product-link href;" mkt-label-title="Product Link">
<h2 class="title" mkt-data-field=".title inner;.product-image title;.product-image alt;" mkt-label-title="Product Name">Product Title</h2>
</a>
</td>
</tr>
<tr>
<td>
<a href="#" class="product-link">
<img src="//placehold.it/200x200" alt="Product Title" title="Product Title" class="product-image" mkt-data-field="src" mkt-label-src="IMG SRC"/>
</a>
</td>
</tr>
<tr>
<td>
<p>Some not very long product description.</p>
</td>
</tr>
<tr>
<td>
<span><b>Old Price:</b></span>
<span>
<strike mkt-data-field="inner" mkt-label-inner="Old Price">$200</strike>
</span>
</td>
</tr>
<tr>
<td>
<span><b>New Price:</b></span>
<span mkt-data-field="inner" mkt-label-inner="New Price">$100</span>
</td>
</tr>
<tr>
<td>
<button id="buynow" mkt-data-field="inner" mkt-label-inner="Button Text">Buy Now</button>
</td>
</tr>
</tbody>
</table>
Definice datových zdrojů
I přesto, že jsou Styly obsahu a bloky obsahu určené pro tvorbu kampaní se statickým obsahem, mohou velice efektivně využívat datové zdroje ke zjednodušení přípravy obsahu. Typickým příkladem jsou právě produktové newslettery, u kterých lze obsah efektivně načítat z datového zdroje, např. produktového feedu Heureka, či Zboží.cz a dataset předvyplnit údaji z tohoto zdroje. Aby systém věděl, který z datových zdrojů se má v datasetu použít, je nutné toto určit pomocí atributu mkt-datasource="název zdroje". Datový zdroj, který se má používat pro datasety, je nutné přiřadit k šabloně v části Informace o šabloně kliknutím na tlačítko Upravit a následným výběrem datového zdroje.
Nejdůležitějším polem při využití datových zdrojů je vyhledávací pole, které je definované pomocí mkt-searchable="true". Vyhledávací pole je pole, kde při vyplňování bude systém automaticky doplňovat odpovídající záznamy z datového zdroje. Údaje ze zvoleného záznamu se pak následně přiřazují k elementům v datasetu pomocí mkt-field-name="název pole", kdy název pole musí odpovídat názvu pole v datovém zdroji. Pojďme se podívat na ukázku použití produktového datového zdroje s poli productname, price, imgurl, price_vat a url.
Abychom mohli definovat atributy a vazby k polím, budeme potřebovat následující dataset:
<table mkt-block-type="dataset">
<tbody>
<tr>
<td>
<a mkt-data-field="href" mkt-field-name="url" mkt-label-href="URL" href="#" target="_blank" title="">
<img mkt-field-name="imgurl" mkt-data-field="src" mkt-label-src="Obrázek" src="https://static.mailkit.eu/lekarna-email/product-mini3.jpg">
</a>
</td>
</tr>
<tr>
<td mkt-data-field="a#product-name1 inner;a title;img alt" mkt-label-title="Název" mkt-searchable="true" mkt-datasource="heureka2" mkt-field-name="productname">
<a mkt-data-field="href" mkt-field-name="url" mkt-label-href="URL" href="#">Betakaroten 6 mg 80 + 40 kapslí zdarma</a>
</td>
</tr>
<tr>
<td mkt-field-name="price">589 Kč</td>
</tr>
<tr>
<td>
<span mkt-data-field="inner" mkt-label-inner="Orig cena" mkt-field-name="price_vat">654 Kč</span>
</td>
</tr>
</tbody>
</table>
Jak můžeme vidět, vazby polí musí být definovány na stejném místě, kde je definice mkt-data-field, a mkt-field-name slouží pouze k určení vazby na pole v datovém zdroji. Totéž platí pro umístění mkt-datasource a mkt-searchable.
Formátování a stylování dat
Při práci s daty z datového zdroje v datasetu se často hodí, aby bylo možné hodnoty různě formátovat. Příkladem může být například zobrazení ceny, která je v datovém zdroji uvedena jako číslo 1234, ale zobrazit ji chceme v podobě $1,234.00. Toho je možné docílit pomocí šablonování a formátování polí, kterého docílíme vložením speciálního komentáře uvnitř bloku obsahu, který umožní systému získat více informací o typech polí. Příklad takové definice:
<!--
@START TEMPLATE DEFINITION@
price_vat:$#data#
imgurl:https://img.mailkit.eu/crop?img=#data#
@END TEMPLATE DEFINITION@
@START FORMAT DEFINITION@
price_vat:number_format
url:base64_encode
imgurl:url_encode
@END FORMAT DEFINITION@ -->
Pravidla pro šablonování hodnot jsou v sekci mezi @START TEMPLATE DEFINITION@ a @END TEMPLATE DEFINITION@ a každé pravidlo musí být na samostatném řádku. Pravidlo pak vždy říká vstupní pole a výslednou hodnotu po transformaci původní hodnoty dostupné v #data#.
Stejně tak se pracuje i s formátováním hodnot, které probíhá v sekci mezi @START FORMAT DEFINITION@ a @END FORMAT DEFINITION@ a každé pravidlo musí být na samostatném řádku.
V případě formátování hodnot v tuto chvíli systém podporuje funkce base64_encode, base64_decode, url_encode, url_decode a number_format.
