Zelf HTML code bewerken

Hoewel het in feite niet nodig is om zelf HTML code in te voeren, kan het voor ervaren gebruikers soms wel handig zijn. Het is het echter verstandig om hier voorzichtig mee om te gaan. De broncode wordt namelijk door de editor zelf beheerd en het is eigenlijk niet de bedoeling dat je hier al te grote wijzigingen in doorvoert, of bepaalde sleutelelementen verandert of verwijdert. Als je dit wel doet, dan kun je de template kapot maken.

Daarnaast probeert de editor automatisch bepaalde fouten in de HTML code te herstellen om de template zo in een correcte staat te houden. Als je de broncode verandert om, bijvoorbeeld, wat Smarty-personalisatiecode toe te voegen, heb je kans dat wijzigingen anders in de broncode terecht komen dan je had bedoeld omdat jouw code door de editor bij het opslaan of verwerken wordt "gecorrigeerd".

Hoe bewerk je zelf de broncode?

Als je een drag-and-drop template hebt geopend, dan staat linksboven een button code bekijken. Deze button geeft je toegang tot de ruwe broncode van de template. Nadat je een wijziging hebt aangebracht kun je rechtsboven op de button opslaan klikken om je wijzigingen te bewaren.

De button code bekijken werkt anders als je eerst een bepaalde structuur of blok aanklikt. In dat geval wordt alleen de broncode getoond van het actieve element. Als je nog geen element hebt aangeklikt, dan verschijnt de broncode van de gehele template.

Veel elementen in de broncode hebben een class-attribuut dat begint met es- of met esd-. Dit zijn elementen die door de editor zelf zijn aangemaakt en waar je beter niet al te grote wijzigingen in aanbrengt. Beter kun je je beperken tot wat tekstuele aanpassingen, of kleine veranderingen aan de styling.

Gebruik de voorwaarden-editor

Als je bepaalde blokken of structuurelementen conditioneel wilt maken, of wilt herhalen, dan kun je dit doen met de Smarty {if} en {foreach} functies. Deze kun je zelf in de broncode plaatsen rondom de code die je conditioneel wilt maken of die je wilt herhalen. Maar het is verstandiger om hervoor de voorwaarden-editor te gebruiken: de Smarty-code wordt dan precies op de juiste plek in de template geplaatst, zonder dat je hiervoor zelf broncode hoeft te bewerken.

Om de voorwaarden-editor te openen, selecteer je een structuurelement in de editor. In de zijbalk links kun je vervolgens de knop voorwaarden aanklikken, en daarna het schuifknopje voorwaarden voor weergave toepassen activeren. Er opent nu een slide waar je op drie verschillende manieren de voorwaarden kunt invoeren:

• Condities invoeren
• Javascript-code invoeren
• Smarty-code invoeren

Afhankelijk van je voorkeur kan je één van deze drie manieren kiezen om de content conditioneel te maken. Alle drie de methodes genereren uiteindelijk wat Smarty-code die door de editor op precies de juiste plek in de code wordt geplaatst.

Het verschil tussen de drie methodes heeft betrekking op gebruikersgemak: als je niet zelf wilt programmeren, maar gewoon door middel van een formulier een vergelijking wilt invoeren (zoals "woonplaats moet gelijk zijn aan Amsterdam") dan kies je voor de eerste optie. De overige twee opties zijn voor wat geavanceerder gebruik, om de conditie zelf met Javascript of Smarty te schrijven. Als je een herhaling wilt invoeren met behulp van een {foreach}-functie, dan moet je hiervoor Smarty gebruiken.

Toch zelf HTML code invoeren

Als je zelf HTML code invoert, dan kun je de <unchanged> tag gebruiken om aan te geven dat de editor jouw code niet moet "repareren". Bekijk het volgende voorbeeld:

<table>
    <tr>
        <th>Kop 1</th>
        <th>Kop 2</th>
    </tr>
    {foreach $items as $item}
        <tr>
            <td>{$item.property1}</td>
            <td>{$item.property2}</td>
        </tr>
    {/foreach}
</table>

Wanneer je de bovenstaande code opslaat, leest de drag-and-drop editor de HTML-code in, ziet dat er wat ongebruikelijke code tussen de </tr> en <tr> tags staat, en repareeert dit. De tabel wordt hierdoor anders opgeslagen dan je denkt: de {foreach}-tag wordt verschoven naar buiten de tabel, waardoor je mailing er anders uit komt te zien dan je had bedoeld.

De <unchanged>-tag kun je gebruiken om dit te voorkomen. Als je de tabel als volgt invoert, dan wordt de code niet veranderd:

<table>
    <tr>
        <th>Kop 1</th>
        <th>Kop 2</th>
    </tr>
    <!--<unchanged>{foreach $items as $item}</unchanged>-->
        <tr>
            <td>{$item.property1}</td>
            <td>{$item.property2}</td>
        </tr>
    <!--<unchanged>{/foreach}</unchanged>-->
</table>

Bij het opslaan van de code blijft alles tussen de gemarkeerde unchanged tags gewoon op zijn plaats staan. Als de mail daadwerkelijk wordt verstuurd, wordt deze code wel verwijderd.

In het voorbeeld hebben we de <unchanged>-tag gebruikt in combinatie met een {foreach} statement. Je kunt de tag natuurlijk ook gebruiken om {if} of andersoortige constructies te beschermen.