# Templates

### Inleiding

Een template is een HTML-bestand met variabelen. Die variabelen worden door ons vervangen op het moment dat het ticket wordt aangemaakt of de mail wordt verstuurd. Hierdoor kunnen je vormgevers een bestand helemaal in je eigen huisstijl opmaken. Dat gaat met behulp van een template-taal.

### Twig is onze taal

We gebruiken **Twig** als template-taal. Daarmee kun je tussen accolades variabelen in de HTML opnemen: 

`{{ seat.event_name }}`

Of eenvoudige if/then constructies bouwen:

`{% if seat.event_id = 5 %}`\
  `Voor dit evenement geldt: kom binnenlopen wanneer je wilt`\
`{% endif %}`

Of simpele meertalige instructies maken:

`{% if seat.order_lang = 'nl' %}`\
  `Fijn dat je komt!`\
`{% else %}`\
  `Looking forward to meet you!`\
`{% endif %}`

Maar we hebben ook geavanceerde meertalige opties.

Leer meer over Twig in hun handleiding [Twig voor Template Designers.](https://twig.symfony.com/doc/3.x/templates.html) 

### Het ticket-template

Het ticket-template is de HTML die wordt omgezet naar PDF en dat wordt meegestuurd bij een bestelling. Omdat een bestelling natuurlijk meerdere tickets kan bevatten is het ticket-template opgebouwd rondom het `seats-object.`Daarin zit per ticket alle informatie over dat ticket. 

{% hint style="warning" %}
In je template moet je over het seats-object *loopen* om de gegevens per ticket te tonen:

`{% for seat in seats %}`\
`Evenement: {{ seat.event_name }}`\
`Op: {{seat.event_date|format_date(locale=seat.order_lang)}}`\
`{% endfor %}`
{% endhint %}

[Ons basis-template](/ticket-template.md) geeft een goede weergave van hoe je een ticket kan vormgeven en hoe je die *loop* maakt.

### Filters en vertalingen

In de voorbeelden hierboven zie je al dat Twig bepaalde speciale bewerkingen toestaat. Zogenoemde *filters* worden daarbij gebruikt om de data beter weer te geven. Zo voegen we meertaligheid toe aan de templates. 

Neem de variabele `{{ seat.event_date }}` - uit de database komt een waarde in de Amerikaanse datumnotatie: `2022-03-01.` Als je dat in de taal van de gebruiker wilt weergeven filter je die waarde door het [Twig format\_date filter](https://twig.symfony.com/doc/3.x/filters/format_date.html): `{{ seat.event_date|format_date(locale=seat.order_lang) }}`dat wordt dan voor Nederlandse gebruikers *1 apr. 2022*, en voor Engelstalige *Apr. 1, 2022*.

Daarnaast kun je alle ingebouwde taal-prompts gebruiken. Met het filter `lang` worden ze afgestemd op de browser- of gekozen taal van de gebruiker. Zo wordt `{{ 'at'|lang }}` in het Nederlands vertaald naar *om* en in het Duits naar *um.* Kijk welke prompts beschikbaar zijn en hoe je die aanpast [bij de Taal-instellingen.](/dashboard/instellingen/taal.md)

{% hint style="info" %}
Tip: in ons basis-tickettemplate gebruiken we dit fragment

```javascript
{{seat.event_date|format_date('long',locale=seat.order_lang)}} {{'at'|lang}} {{seat.event_time|format_time('short',locale=seat.order_lang)}}
```

{% endhint %}

### Vertaal automatisch met Google Translate

Je kan teksten ook automatisch laten vertalen door Google Translate. Dat doe je als je bijvoorbeeld aanvullende informatie bij een voorstelling wilt geven en er zeker van wilt zijn dat al je bezoekers, ook de internationale, het precies snappen. Gebruik hiervoor het filter `googletrans`

Bijvoorbeeld: bij een evenement geef je aan dat dat het buiten plaatsvindt en dat mensen warme kleding moeten aantrekken:

![bij evenement bewerken geef je aanvullende informatie](/files/-MSm4caVNFztkVE-tKlL)

In het template toon je deze variabele, en pas je het Google Translate filter toe: `{{ seat.event_text|googletrans }}`

Vervolgens zien Nederlandse gebruikers de standaardtekst, maar wanneer we detecteren dat iemand een andere browsertaal gebruikt (of zelf koos voor een andere taal) wordt jouw tekst onder water naar Google Translate gestuurd en in de PDF gezet:

![automatisch vertaald naar het Engels](/files/-MSo0Hjk5qqbj-xJRF6K)

![automatisch vertaald naar Duits](/files/-MSo0cJs8BeIfd4BDlk6)

{% hint style="danger" %}
Elk ticket wordt uniek aangemaakt en dus roepen we voor elk ticket Google Translate aan. Daar rekenen zij kosten voor. Daarom hanteren we een *fair use policy* bij het automatisch vertalen. Dat betekent dat we bijhouden hoeveel je van dit filter gebruik maakt en met je kunnen overleggen over een vergoeding voor het gebruik. Ons uitgangspunt is dat de functie gratis is. Hoor je niets van ons, dan brengen we hiervoor ook niets in rekening. 
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.voordemensen.nl/dashboard/vormgeving/templates.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.