Transactionele e-mails aanpassen in Magento 2

Transactionele emails in Magento 2

Transactionele emails zijn automatische berichten naar klanten: orderbevestigingen, verzendmeldingen, wachtwoord resets, etc.

Standaard email templates

Magento heeft templates voor:

• Account (aanmaken, wachtwoord reset)
• Orders (nieuw, update, commentaar)
• Invoices (nieuw, update, commentaar)
• Shipments (nieuw, update, commentaar)
• Credit Memos (nieuw, update, commentaar)
• Newsletter

Email templates aanpassen

Navigatie

Marketing > Communications > Email Templates

Template dupliceren

Klik Add New Template

Load default template:

- Template: New Order (of andere)

- Locale: nl_NL

Klik Load Template

Pas Template Name aan: "Orderbevestiging Custom"

Bewerk Template Subject en Template Content

Sla op

Template toewijzen

Stores > Configuration > Sales > Sales Emails

Per email type:

• New Order Confirmation Template: Selecteer je custom template

Template variabelen

Beschikbare variabelen

In de template editor, klik Insert Variable voor lijst:

Order variabelen:

• {{var order.increment_id}} - Ordernummer
• {{var order.created_at}} - Orderdatum
• {{var order.grand_total}} - Totaalbedrag
• {{var order.getCustomerName()}} - Klantnaam

Klant variabelen:

• {{var customer.name}} - Naam
• {{var customer.email}} - Email

Store variabelen:

• {{var store.frontend_name}} - Shopnaam
• {{var store_phone}} - Telefoonnummer

Layout variabelen

• {{layout handle="sales_email_order_items" order_id=$order_id}} - Order items tabel
• {{layout handle="sales_email_order_shipment_items"}} - Shipment items

HTML structuur

Basis template

``html

{{template config_path="design/email/header_template"}}

Beste {{var order.getCustomerName()}}, Bedankt voor je bestelling #{{var order.increment_id}}.

{{layout handle="sales_email_order_items" order_id=$order_id area="frontend"}}

{{template config_path="design/email/footer_template"}}

`

CSS Styling

Magento emails gebruiken inline CSS. Definieer styles in:

Marketing > Communications > Email Templates > Header

Of voeg inline styles toe:

`html

Tekst

``

Logo en header aanpassen

Logo uploaden

Content > Design > Configuration > [Store View] > Transactional Emails

• Logo Image: Upload je logo
• Logo Alt: Alt tekst
• Logo Width/Height: Afmetingen

Header template aanpassen

Maak nieuwe template van "Email - Header"

Pas HTML aan

Wijs toe in Configuration

Footer aanpassen

Footer template

Ga naar Email Templates

Load default: "Email - Footer"

Pas aan met:

- Contactgegevens

- Social media links

- Uitschrijflink

Footer configuratie

Stores > Configuration > General > Store Email Addresses

• Sender Name
• Sender Email

Emails testen

Test verzenden

Open een bestaande order

Klik Send Email dropdown

Of gebruik extensie voor test emails

Email preview

Sommige extensies bieden preview functionaliteit.

Mailcatcher voor development

Gebruik tools zoals Mailhog of Mailtrap voor development:

Configureer SMTP naar Mailhog

Alle emails worden lokaal gevangen

SMTP Configuratie

Waarom SMTP?

Standaard gebruikt Magento PHP mail(). SMTP is betrouwbaarder en biedt tracking.

SMTP extensie installeren

Populaire opties:

• Mageplaza SMTP
• MagePsycho SMTP

Configuratie

Stores > Configuration > [SMTP Extension]

SMTP Host: smtp.example.com

SMTP Port: 587 (TLS) of 465 (SSL)

Username: je_username

Password: je_wachtwoord

Protocol: TLS

Populaire SMTP providers

• SendGrid: Goede deliverability, free tier
• Mailgun: Developer-friendly
• Amazon SES: Goedkoop voor volume
• Office 365/Google Workspace: Als je die al hebt

Veelvoorkomende problemen

Emails komen niet aan

Check spam folder

Verifieer SMTP configuratie

Check email logs (indien extensie)

Verifieer sender email is valide

Variabelen tonen niet

Check variabele syntax

Variabele bestaat in die context

Test met simpele variabele eerst

Layout broken

Check HTML structuur

Inline CSS gebruiken

Test in verschillende email clients

Best practices

Mobile-friendly

• Gebruik responsive tables
• Test op mobiele email clients
• Max breedte ~600px

Plain text versie

Bied ook plain text aan voor oudere clients:

• In template: Template Styles sectie

Consistente branding

• Gebruik je logo
• Consistente kleuren
• Dezelfde tone of voice

Test in email clients

Emails renderen verschillend in:

• Gmail
• Outlook
• Apple Mail
• Mobile clients

Gebruik tools zoals Litmus of Email on Acid voor testing.

Juridische vereisten

• Bedrijfsgegevens in footer
• KvK nummer
• BTW nummer
• Uitschrijfoptie voor marketing emails