Afosto CMS - Berichtgeving template editor

In de berichtgeving template editor kun je op maat gemaakte e-mails en pdf’s maken met HTML, Twig en CSS. Het werkt eigenlijk hetzelfde als de webshop editor, maar dan net in een ander jasje en met wat extra handige functionaliteiten.

Wil je meer weten over Twig? Bekijk dan de Twig documentatie.

Als je de editor opent zul je ongeveer hetzelfde zien als onderstaande afbeelding.

Voorbeeld

Aan de rechterzijde staat het voorbeeld paneel. Deze is te openen en te sluiten Door middel van de  knop als je meer ruimte wil om de code zien.

Template selectie

Bovenaan het voorbeeld staat een balk met een veld erin. Met dit veld kun je kiezen van welk template je het voorbeeld wil bekijken. Je kan dan bijvoorbeeld de email van de factuur bekijken.

Herladen en random data

Aan de linkerzijde staan twee knoppen waarmee je het voorbeeld kan herladen en de data kan laten vullen met random data. Zo kun je met allerlei verschillende data testen om te kijken of je email altijd goed werkt. Let er wel op dat bijvoorbeeld de productdata niet overeen zal komen met jouw producten. De specificaties worden bijvoorbeeld niet gevuld met bestaande specificaties met random waardes.

Voorbeeld formaat

aan de rechterzijde van de balk kun je kiezen op welk formaat je het template wil bekijken. Je hebt de keuze uit mobiel, desktop of openen in een nieuw venster. Met de laatste optie kun je dus zelf het venster schalen en het gewenste formaat gebruiken.

Voorbeeld instellingen

Onderaan het voorbeeld paneel vind je de voorbeeld instellingen. Met deze instellingen kun je kiezen welke data in het voorbeeld gebruikt moeten worden. Welke instellingen je kan opgeven verschilt per template, maar voor een order bevestiging kun je bijvoorbeeld een order kiezen.

Bestanden boom

Aan de linkerzijde van de editor staat de boom van bestanden die je uit kan klappen en kan bewerken. Door met de rechtermuisknop op een van de bestanden of mappen te klikken, kun je ook nieuwe mappen of bestanden aanmaken.

Onderaan deze boom staan drie knoppen: Data, Afbeeldingen en Instellingen. Door op een van deze knoppen te klikken opent er een paneel met extra informatie en mogelijkheden.

Data

Onder de knop data vind je alle data die door het backend beschikbaar wordt gemaakt voor het actieve template. Deze is dus gekoppeld aan het gekozen template in het voorbeeld paneel. Je ziet hier dan random data of de data van de door jou gekozen instellingen. Als je dus op zoek bent naar bepaalde informatie van de order kun je deze altijd vinden in het data paneel.

Je kan door middel van een dubbelklik op de naam van een variabele ook deze in het openstaande bestand plaatsen.

Afbeeldingen

In het afbeeldingen paneel kun je afbeeldingen uploaden die je daarna in het template weer kunt gebruiken. Ook hier kun je gebruik maken van dubbelklik om de afbeelding aan je code toe te voegen.

instellingen

In het instellingenpaneel kun je de naam van het template wijzigen. Ook kun je hier een back-up downloaden van het template om bijvoorbeeld in je eigen code-editor te werken.

Status balk

Onderaan de editor staat een balk met drie blokjes. Deze geven aan of de server problemen heeft gevonden in een van de drie onderdelen. Zo kun je zien of de SCSS succesvol gecompileerd is naar CSS, JavaScript succesvol is gecompileerd en of er geen fouten in de TWIG zitten waardoor het voorbeeld niet getoond kan worden. Als er in een van de onderdelen zich een fout voor heeft gedaan wordt dit aangegeven met een rood uitroepteken. Je weet dan waar de fout zit. In veel gevallen krijg je dan ook bij de foutieve regel te zien dat je een fout hebt gemaakt, gemarkeerd met een kruis naast het regelnummer.