Vlastní kódování smart šablony
Pokud Vám nevyhovují námi předpřipravené smart šablony můžete si je vytvořit sami. Následně Vám vlastní šablonu nahrajeme pod účet. O obecné struktuře, jak by měla taková smart šablona vypadat se můžete dočíst níže.
1. Koncept šablony
Šablona se skládá z horizontálních elementů. Tyto elementy jsou v kódu speciálně označeny, aby s nimi mohl editor pracovat. Je nutné, aby tyto elementy nebyly do sebe vnořené a aby se všechny nacházely ve společném rodiči (musí být přímými potomky).
Jednotlivé elementy jsou tvořené vnořenými tabulkami. Každý element by se měl skládat minimálně z 2 tabulek. První tabulka má šířku 100 %. Vnořená tabulka má potom požadovanou šířku šablony. Toto děláme, abychom mohli použít pro každý element jinou barvu pozadí a zajistili spolehlivé horizontální centrování elementů.
Šablona je tvořena dvěma soubory. První obsahuje samotný zdrojový kód šablony. Druhý soubor je speciální pomůckou pro Smart Editor. Obsahuje paletu elementů, které mohou být do šablony vloženy. V tomto souboru jsou tedy připravené nakódované elementy. Smart Editor nenabízí předkódované elementy – pokud se tedy element v tomto souboru nenachází, nebude jej možné do šablony vložit.
2. Napojení na Smart Editor
Jako rodič výborně poslouží HTML element <body>. Tento rodičovský element označíme pomocí atributu data-edit-root. Rodič tedy vypadá následovně:
<body data-edit-root>
Prvky jsou tvořeny vnořenými tabulkami. První tabulku je potřeba označit pro Smart Editor. Tabulka může vypadat například takto:
<table data-editable data-edit-description='Free space' width="100%">
Atributem data-editable dáváme editoru vědět, že má s tímto prvkem pracovat. Přidáním tohoto atributu umožníme jeho přesouvání a smazání. Obsahem atributu data-edit-description je, jak už název napovídá popis prvku. Toto označení se využívá při vkládání nových prvků do šablony. Nejjednodušší je použít prvek z předdefinovaného seznamu, který nabízí Smart Editor, můžeme si však vytvářet i vlastní elementy.
3. Dostupné elementy
Níže je aktuálně dostupný seznam elementů. Lze očekávat, že bude postupně doplňován. Níže uvedené elementy mají připravený český překlad a ikonku, která se zobrazí při vkládání.
Název elementu by měl být unikátní v tom smyslu, že jeden název nebudou sdílet 2 odlišné elementy s jiným uspořádáním.
4. Definování vlastního elementu
Pokud chceme definovat vlastní element, tak je potřeba sdělit Editoru 3 věci:
Ikonu, kterou má použít
Anglický název elementu
Český název elementu
Vlastní element tedy může vypadat takto:
<table
data-edit-description = "Heading" data-edit-description-en = "Awesome custom heading" data-edit-description-cs = "Úžasný vlastní nadpis"
>
...
</table>
Pomocí data-edit-description říkáme editoru, jakou z existujících ikon předdefinovaných elementů má pro náš element použít. Následují popisky v angličtině a češtině.