Známe to moc dobře – s tím, jak se vaše šablony stávají chytřejší, jejich čitelnost se snižuje. V určitém okamžiku se pak začnete ptát, jak jste se sem dostali. Víme to, protože jsme pro naše klienty vytvořili nejednu šablonu. Řešení spočívá v rozdělení obsahu do menších sekcí a includování těchto částí do hlavní šablony.
Jak už jistě víte, šablony mohou obsahovat vícero souboru s různými typy souborů pro různé účely, včetně takzvaných prázdných souborů. Tyto soubory lze zakládat jak ve sdílených šablonách tak i v konkrétní šabloně. Hlavní rozdíl mezi těmito dvěma umístěními je v tom, že soubory sdílených šablon mohou být použity pro includování v jakékoliv šabloně. Teď vás asi napadly hlavičky a patičky – nejčastější kandidáti na sdílení, ale možnosti jdou mnohem dál.
Samozřejmě byste se mohli omezit na hlavičky a patičky, ale jako moc by vám to opravdu pomohlo? Includy nemusí být pouze jednoduché sekce, které jsou použité ve více šablonách. Includy mohou dělat kouzla a pomoci vám ušetřit hromady času. Zamyslete se nad následujícím – kolikrát použijete ve vaší šabloně tlačítko CTA? A co kdyby šlo o JAKÉKOLIV tlačítko?
Než se podíváme na praktické ukázky, musíme si říci, v jakém pořadí jsou soubory šablon includovány/procesovány. Nejprve se požadovaný soubor hledá přímo u použité šablony. Pokud zde není nalezen, hledá se soubor mezi sdílenými šablonami. Pokud soubor není nalezen ani zde, šablona vrátí chybu. Není možné se z jedné šablony odvolávat na soubory v jiné šabloně. Nezapomeňte, že v případě souborů se stejnými názvy uloženými jak u šablony, tak ve sdílených šablonách, má vždy přednost soubor u šablony.
Includování souborů
Pojďme se podívat na praktickou ukázku, jako je například HTML tlačítko uložené jako button.html:
<div><!--[if mso]> <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.sampleurl.site" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="10%" stroke="f" fillcolor="#b2102f"> <w:anchorlock/> <center> <![endif]--> <a href="http://www.sampleurl.site" style="background-color:#b2102f;border-radius:4px;color:#ffffff; display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center; text-decoration:none;width:200px;-webkit-text-size-adjust:none;">Click me!</a> <!--[if mso]> </center> </v:roundrect> <![endif]--></div>
Toto tlačítko můžete snadno includovat do vaší šablony pomocí příkazu include:
Tím dojde k načtení kódu ze souboru button.html do vaší šablony. Takto můžete snadno udělat vaší šablonu lépe čitelnou, ale už vám to nepomůže zvyšit efektivitu.
Aby mělo includování opravdu smysl, je potřeba začít používat proměnné místo natvrdo nastavených hodnot. Rychlým pohledem vidíme hned několik hodnot, které by mělo smysl použít jako proměnné - text tlačítka, url & barva, barva písma a velikost písma. Pojďme si tedy blok obohatit o proměnné:
<div><!--[if mso]> <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="[% url -%]" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="10%" stroke="f" fillcolor="#[% bgcolor -%]"> <w:anchorlock/> <center> <![endif]--> <a href="[% url -%]" style="background-color:#[% bgcolor -%];border-radius:4px;color:#[% text_color -%]; display:inline-block;font-family:sans-serif;font-size:[% text_size -%];font-weight:bold;line-height:40px; text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;">[% text -%]</a> <!--[if mso]> </center> </v:roundrect> <![endif]--></div>
Nyní můžeme toto tlačítko vložit s předáním proměnných includovanému souboru:
bgcolor='ff0000', text_color='ffffff', text_size='14px' -%]
Můžete také nastavit výchozí hodnoty na začátek souboru button.html, aby se správně zobrazil i když nebudete předávat všechny proměnné:
[% IF !url; url='#'; END -%]
[% IF !bgcolor; bgcolor='990000'; END -%]
[% IF !text_color; text_color='ffffff'; END -%]
[% IF !text_size; text_size='13px'; END -%]
Možnosti předávání dat do includovaných souborů jsou v podstatě neomezené a includovaný soubor může používat i globální proměnné dostupné v šabloně, ze které je includován.
Podívejme se na to, jak nám to může pomoci s pokročilejšími šablonami. Pro náš ukázkový newsletter chceme zobrazit náhodné produkty z datového zdroje. Jak na to probíráme s samostatném článku věnujícímu se práci s daty. Začněme tedy vytvořením velice jednoduchého produktového bloku, jehož soubor nazveme product.html:
<table> <tr> <td valign="top"> <a href="[% link -%]" target="_blank"><img src="[% uri -%]" width="200" border="0" alt="[% title -%]"></a> </td> <td valign="top"> <h3>[% title -%]</h3> <p>[% description -%]</p> [% INCLUDE "button.html", text=price, url=link -%] </td> </tr> </table>
Jak vidíte, soubor používá šablony pro zobrazení obsahu a navíc obsahuje tlačítko, do jehož souboru button.html předává jako proměnné cenu a url. Tím, že jsme v souboru button.html nastavili výchozí hodnoty jako velikost písma, barvu písma a barvu pozadí, budou se používat tyto výchozí hodnoty.
Teď, když máte produktový blok nakódovaný, můžete ho snadno použít napříč všemi šablonami. Můžete použít data z webových událostí pro vytvoření šablony e-mailu opuštěného košíku, nebo data z produktového feedu pro sestavení newsletterů. Použijeme podobný příklad jako je popsaný v článku práce s daty:
[% query_items = dbh_sql.prepare('SELECT * FROM ds_3223_products
WHERE `availability`="in stock" ORDER BY RAND() LIMIT 5') %]
[% items=query_items.execute() -%]
[% IF items.size == 0 -%]
[% items=query_items.execute('%') -%]
[% END -%]
[% FOREACH items -%]
<div>[% INCLUDE "product.html" -%]</div>
[% END -%]
Můžete pak očekávat výstup podobný tomuto:
Použití funkce INCLUDE pak získává zcela nový rozměr pokud je použita ve spojení s Drag & Drop bloky stylů obsahu. Pokud je INCLUDE použito v bloku, bude blok vracet dynamický obsah z includovaného souboru. Je to defacto kombinace chytrých šablon s přívětivostí drag & drop rozhraní. Umožní vám to mít bloky, které generují dynamický obsah personalizovaný pro každého příjemce.
Processing souborů
Processing narozdíl od includingu přináší zcela rozdílné výhody. Procesované soubory nejsou pouze jednou načtené na požadované místo, ale zůstávají k dispozici po celou dobu zpracování šablony. To znamená, že můžete opakovaně použít celý soubor nebo jeho části k čemukoliv potřebujete.
Podívejme se znovu na náš příklad s produkty z datového feedu. Zobrazení ceny v tlačítku by určitě mohlo být elegantnější a mohli bychom zobrazovat ceny včetně daně. Mohli bychom to samozřejmě udělat přímo v includu, ale protože se jedná o něco co chceme dělat opakovaně na mnoha místech, budeme to zpracovávat v bloku.
Začneme tím, že založíme nový soubor šablony nazvaný functions.html s následujícím obsahem:
[% BLOCK price_data -%]
[% price = price FILTER remove(' CZK') -%]
[% price_vat = price * 1.21 | format_number(0) -%]
[% price = price | format_number -%]
[% price = price _ ',-' -%]
[% END -%]
A přidáme processing souboru functions.html na začátek našeho hlavního souboru šablony, před veškeré zpracovávání dat:
Teď, když máme soubor zprocesovaný, je nám kdykoliv k dispozici funkce nazvaná price_data, díky které můžeme provádět kouzla s formátováním ceny a počítáním ceny s DPH. Teď už stačí funkci zavolat ze souboru product.html přidáním řádku:
Tím se provedou veškerá formátování cen jednotlivých produktů do výstupu a získáme tak formátovanou cenu jako proměnnou s cenou včetně DPH. Snadno pak tuto proměnnou přidáme do výstupu souboru product.html pod includem tlačítka:
Výsledkem bude krásně formátovaný výstup v požadované podobě:
V této ukázce známe názvy proměnných, a tak je neposíláme explicitně do bloku. Mohli bychom však proměnné předávat jako parametr volání, případně vícero parametrů do bloku a nechat tak blok provést požadované operace nad našimi hodnotami.
Použití příkazu PROCESS má odlišné chování v kontextu použití s Drag & Drop bloky obsahu. Když je PROCESS použit v bloku, dojde k vygenerování dynamického obsahu z procesovaného souboru v okamžiku umístění bloku do zprávy. Představte si blok, který automaticky vygeneruje obsah když ho umístíte do zprávy, abyste ho mohli dále manuálně upravovat. Místo manuálního vybírání 3 produktů pokaždé, kdy skládate kampaň, můžete využít procesovaný blok, který vrátí 3 nejpopulárnější produkty z datového zdroje a vy už jen upravíte popisky a ceny před uložením výsledné kampaně.
Existuje mnoho způsobů jak používat šablony k optimalizaci a zjednodušení vašich kampaní – ať už se jedná o jednoduché formátování hodnot, opakové využítí bloků, nebo generování dynamického obsahu. Neváhejte se kdykoliv obrátit na naši zákaznickou podporu a požádat o pomoc při tvorbě šablon a implementaci pokročilých možností.
