Personaliseren in het echt

Bij het programmeren met Smarty en het gebruik van constructies zoals {if} en {foreach}, heb je soms wat trucjes nodig om de volledige kracht van Smarty te benutten. In de meeste voorbeelden in de documentatie vind je eenvoudige constructies, zoals hieronder:

{if $geslacht == 'man'}
  Geachte heer,
{else}
  Geachte mevrouw,
{/if}

U heeft de volgende producten aangeschaft:
{foreach $products as $product}
- {$product.name}
{/foreach}

Hoewel bovenstaande voorbeelden goed illustreren hoe Smarty werkt, ziet personalisatiecode er in werkelijkheid vaak anders uit. In echte nieuwsbrieven worden productgegevens namelijk getoond in een mooi opgemaakte layout, en volstaat een opsomming met gedachtestreepjes meestal niet. De {foreach} statements staan in werkelijkheid veel verder uit elkaar, en er wordt veel HTML code gebruikt.

Begin zonder personalisatie

Voordat je je template voorziet van allerlei ingewikkelde personalisatiecode, raden we aan om je mailing eerst op te bouwen zonder personalisatie. Gebruik gewoon de drag-and-drop editor om teksten en afbeeldingen te plaatsen. Als je bijvoorbeeld een mailing wilt maken met een overzicht van aangeschafte producten, bouw dan eerst een template waarin je één product toont. Zorg ervoor dat de template, als hij echt wordt gebruikt, net zo makkelijk voor 2, 3 of 20 producten kan worden ingezet.

In deze eerste fase richt je je op het maken van de layout, de plaatsing van de foto's en teksten, en zorg je dat links en buttons duidelijk zijn. Pas als je tevreden bent over de opmaak, kun je je richten op het personaliseren. Het is handig om in deze fase gebruik te maken van standaardteksten zoals "voorbeeld_titel" en "voorbeeld_omschrijving", zodat je later, als je de Smarty code gaat toevoegen, kunt zoeken naar het woord "voorbeeld" om te weten waar de uiteindelijke personalisatiecodes moeten komen te staan.

Pas op met het bewerken van de broncode

Als je eenmaal tevreden bent met de opmaak van je template, kun je beginnen met het plaatsen van Smarty code. Dat gaat vaak makkelijk door rechtstreeks de broncode te bewerken, omdat je dan snel kunt zoeken naar de standaardteksten (zie hierboven) en je zeker weet dat je niks vergeet. Als je met de drag-and-drop editor werkt, gebruik je hiervoor de button "code bekijken". Hiermee kun je de broncode van de template bewerken. Je kunt je voorbeeldteksten vervangen door personalisatiecode. Daar waar je "Beste voorbeeld_voornaam" had ingevoerd, kun je dat bijvoorbeeld vervangen door "Beste {$voornaam|escape}".

Op zich kun je prima met de hand de broncode aanpassen, zolang je het eenvoudig houdt. Maar als je ingewikkeldere constructies aan de broncode wilt toevoegen, dan moet je hier voorzichtig mee zijn: als je op de verkeerde plek opeens {if} en {foreach} statements plaatst, kun je hiermee de template kapot maken. De drag-and-drop editor werkt dan niet meer, of de opmaak raakt verstoord.

Elementen herhalen in e-mailtemplates

Gewone personalisatiecode als "beste voornaam" wijst zich meestal vanzelf. Het wordt vaak wat ingewikkelder als je herhalingen wilt personaliseren. Als je je template bij het ontwerpen hebt gevuld met 1 product, moet je hem nu gaan omzetten voor een variabel aantal producten, wellicht zelfs rechtstreeks ingeladen vanuit je webshop. Maar hoe doe je dat dan? Dit probleem kun je het beste in twee onderdelen opsplitsen:

  • Je maakt eerst een {foreach} statement maken om de juiste producten te tonen.
  • Daarna plaats je dit {foreach} statement op de juiste plaats in de template.

Beide taken vergen wat aandacht, en we raden aan om ze afzonderlijk van elkaar uit te voeren. Eerst richt je je op het maken van een {foreach}-loop om de juiste gegevens te tonen, en daarna zoek je de juiste plek in de template om deze code te plaatsen.

Het foreach-statement maken

Ergens in template moet een {foreach}-loop komen waarmee je gegevens uitleest uit een bepaalde databron, zoals een variabele met de producten van een bestelling, of een lijst van subprofielen.

{foreach from=$some_data_source item=some_item}
   {$some_item.count} x {$some_item.name|escape}: {$some_item.price}
{/foreach}

We raden aan om je eerste te richten op de correctheid van het foreach-statement. Experimenteer bijvoorbeeld met het statement binnen een tekstblok, gewoon om te kijken of het aantal herhalingen en de getoonde items correct zijn. Pas als je na wat experimenteren de juiste loop hebt gevonden, kun je gaan zoeken naar de juiste plaats in de template waar de loop moet komen.

Het foreach-statement plaatsen

Een {foreach} statement is altijd een combinatie van {foreach} en {/foreach}. Deze statements moet je om een stuk HTML code plaatsen dat herhaald moet gaan worden. Je kunt dit doen door zelf de HTML code te bewerken, maar veiliger is het om condities binnen een element (lijn, container of structuur) te gebruiken:

  • Zoek in de editor naar het element die je wilt herhalen.
  • In het tabblad 'inhoud' klik je op de button 'voorwaarden'.
  • Activeer het schuifje 'voorwaarden voor weergave toepassen'.
  • Er opent een slide om de condities voor het element in te voeren.

Je kunt nu de weergave-condities van het element aanpassen. Dit formulier is normaal gesproken bedoeld om te bepalen of het element wél of juist niet in de mailing moet verschijnen, maar als je kiest voor de optie om handmatig code te plaatsen, kom je bij een formulier om scripts in te voeren die je rondom het element kan plaatsen.

  • Als code voor het element voer je het {foreach} statement in.
  • Als code na het element voer je {/foreach} in.

De editor zorgt er nu voor dat het {foreach} statement op de juiste plaats wordt gezet. In de blokken binnen het element kun je nu de variabele gebruiken die door het {foreach} statement is aangemaakt. In het voorbeeld heette deze variabele {$some_item}.