Snippety šablon

Není novinkou že šablony v Mailkitu jsou tak trochu něco jiného, než si obvykle pod šablonami představujeme - nejedná se o vzorové emaily, které si zákazník upraví dle svých potřeb. Jde o komplexní systém, který umožňuje využívat vysoce pokročilé funkce pro personalizaci obsahu pomocí šablonovacího jazyka. Nově jsme do systému přidali možnost vytvářet si snippety, neboli kousky kódu, které lze používat napříč šablonami.

Již od počátku je v Mailkitu dostupná možnost využívat komplexního šablonovacího jazyka pro maximálně dynamický obsah e-mailových kampaní. Od počátku je k dispozici i možnost mít těchto šablon neomezené množství a v každé šabloně pak mít neomezené množství souborů, které se do hlavního souboru šablony načítají (includují či procesují). Je však mnoho situací, kdy by bylo vhodné určitou část kódu šablony sdílet napříč vícero šablonami a mít tak možnost snadno provádět změny, které se promítnou do všech šablon. Právě k tomuto účelu jsme zavedli snippety šablon.

Představte si nejčastější situaci - hlavičku a patičku vašich zpráv - obvykle jsou stejné ve všech vašich kampaních, nebo alespoň velice podobné. Proč by se tedy nemohli definovat na jednom místě a používat v jednotlivých šablonách a ušetřit vám tak práci při jejich přípravě, změnách, či kompletním redesignu? Ale není to jen hlavička a patička, opakujících se prvků, které jsou často náročné na přípravu a údržbu je mnohem více - mohou to být produktové boxy, nebo i tak zdánlivě jednoduchá věc jako akční tlačítka. Právě na příkladu akčních tlačítek si možnost snippetů předvedeme.

I přesto, že tato dvě tlačítka se liší textem, barvou i odkazem, může se jednat o totožný snippet, jehož podoba a obsah je dána parametry. Místo toho aby tedy v šabloně byl přímo zápis HTML kódu pro každé tlačítko, je tento kód umístěn ve snippetu, který se následně používá v šabloně a je parametrizován.

Založili jsme si za tímto účelem v snippetech šablon soubor tlacitko.html, jehož obsahem je následující kód:

<a href="[% link -%]" target="_blank" style="text-decoration: none!important; color: #ffffff;display:block; font-weight: bold; padding: 10px 17px; font-family: Arial, Helvetica, sans-serif; font-size: 16px; background-color:[% color -%]; ">[% text -%]</a>

Jak vidíte snippet obsahuje proměnné link, color a text, které musíme doplnit. V šabloně kampaně tak v souboru šablony provedeme na místě, kde chceme tlačítko použít pouze načtení snippetu s patřičnými parametry s hodnotami proměnných:

[% INCLUDE “tlacitko.html” link=> ‘http://www.adresa.cz’, color=> ‘#660033’, text=> ‘100 kč’ -%]

Samozřejmě můžete říci, že jednoduchý odkaz přeci můžete dát rovnou do šablony, ale bude to také znamenat, že kvůli změně vzhledu tlačítek, bude nutné udělat úpravy na mnoha místech místo jednoho. Pokud používáte vizuálně atraktivnější tlačítka vytvářená např. tabulkou s vícero buňkami, nebo používáte různá zaoblení, atp. tak bude váš kód nesrovnatelně složitějším.

Největší výhody samozřejmě přináší snippety tam, kde dochází ke komplikovanějšímu větvení většího HTML bloku. Takovým příkladem jsou často např. produktové boxy, které se v lehkých obměnách vyskytůjí v několika kampaních a různých jazykových mutacích. Příprava jednoho snippetu a jeho použití, tak může ušetřit hodiny příprav jednotlivých šablon a nesrovnatelně více při jejich úpravách. Pokud připravujete šablonu, nebo hledáte radu jak vaše současné šablony optimalizovat, neváhejte se na nás obrátit.