|
# E-Mail Layout
|
|
# E-Mail Layout
|
|
|
|
|
|
Das E-Mail System besitzt ein eigenes Template Engine Objekt. Jede E-Mail besteht aus 3 Dateien, die [überschrieben werden können](dev/email#e-mail-template-für-ein-projekt-setzen):
|
|
Das E-Mail System besitzt ein eigenes Template Engine Objekt. Jede E-Mail besteht aus 3 Dateien, die [überschrieben werden können](dev/email#e-mail-template-für-ein-projekt-setzen):
|
|
1. `header.html` - beinhaltet `<head>` Bereich und CSS in `<style></style>` Tags. **Achtung: hier befindet sich kein gewöhnlicher Header (mit Logo und Social Icons).**
|
|
1. `header.html` - beinhaltet `<head>` Bereich und CSS in `<style></style>` Tags. **Achtung: hier befindet sich kein gewöhnlicher Header (mit Logo und Social Icons).**
|
|
2. `body.html` - beinhaltet Header (mit Logo und Social Icons) und das den Container für eigentlichen Email Inhalt.
|
|
2. `body.html` - beinhaltet Header (mit Logo und Social Icons) und das den Container für eigentlichen E-Mail Inhalt.
|
|
3. `footer.html` - beinhaltet den Footer Bereich und die abschließenden `</body>` und `</html>` Tags.
|
|
3. `footer.html` - beinhaltet den Footer Bereich und die abschließenden `</body>` und `</html>` Tags.
|
|
|
|
|
|
Die E-Mail Template basiert auf einem [Open Source Projekt Salted](https://github.com/rodriguezcommaj/salted).
|
|
Die E-Mail Template basiert auf einem [Open-Source-Projekt Salted](https://github.com/rodriguezcommaj/salted).
|
|
|
|
|
|
## 1. Standard Layout - einfache Emails versenden
|
|
## 1. Standard Layout - einfache E-Mails versenden
|
|
|
|
|
|
Ohne Anpassungen eignet sich das Template für einfache aber dennoch visuell ansprechende Emails, z. B.:
|
|
Ohne Anpassungen eignet sich das Template für einfache aber dennoch visuell ansprechende Emails, z. B.:
|
|
- diverse Administrator Benachrichtigungen,
|
|
- diverse Administrator Benachrichtigungen,
|
... | @@ -46,7 +46,7 @@ Bitte für die Social Icons keine FontAwesome Icons benutzen! Stattdessen sollen |
... | @@ -46,7 +46,7 @@ Bitte für die Social Icons keine FontAwesome Icons benutzen! Stattdessen sollen |
|
|
|
|
|
|
|
|
|
### 1.2 Einschränkungen
|
|
### 1.2 Einschränkungen
|
|
Es ist auch wichtig zu wissen, dass der Inhalt, der mit der Methode `setBody()` gesetzt wird, wird immer in einem Block platziert (siehe **Screenshot 2** - rot markiert). Das heißt man hat an dieser Stelle automatisch den Abstand von links und rechts genauso wie der Header und Footer. Auch für den Abstand von oben und unten sorgt der Block automatisch. Möchte man jedoch das Template erweitern, neue Blöcke (*sections*) mit eventuell anderer Hintergrundfarbe verwenden, ist das etwas aufwändiger. Siehe dazu den nächsten Abschnitt.
|
|
Es ist auch wichtig zu wissen, dass der Inhalt, der mit der Methode `setBody()` gesetzt wird, wird immer in einem Block platziert (siehe **Screenshot 2** - rot markiert). So hat man an dieser Stelle automatisch den Abstand von links und rechts genauso wie der Header und Footer. Auch für den Abstand von oben und unten sorgt der Block automatisch. Möchte man jedoch das Template erweitern, neue Blöcke (*sections*) mit eventuell anderer Hintergrundfarbe verwenden, ist das etwas aufwändiger. Siehe dazu den nächsten Abschnitt.
|
|
|
|
|
|
**Screenshot 2 - Einschränkungen**
|
|
**Screenshot 2 - Einschränkungen**
|
|
|
|
|
... | @@ -55,12 +55,12 @@ Es ist auch wichtig zu wissen, dass der Inhalt, der mit der Methode `setBody()` |
... | @@ -55,12 +55,12 @@ Es ist auch wichtig zu wissen, dass der Inhalt, der mit der Methode `setBody()` |
|
|
|
|
|
## 2. Template überschreiben - weitere Layouts
|
|
## 2. Template überschreiben - weitere Layouts
|
|
|
|
|
|
Möchte man die Emails neu gestalten bzw komplett überarbeiten (z.B. für Newsletter) hat man dazu 2 Möglichkeiten:
|
|
Möchte man die E-Mails neu gestalten bzw komplett überarbeiten (z.B. für Newsletter) hat man dazu 2 Möglichkeiten:
|
|
1. Template Events verwenden,
|
|
1. Template Events verwenden,
|
|
2. HTML Template im Projekt / Paket überschreiben.
|
|
2. HTML Template im Projekt / Paket überschreiben.
|
|
|
|
|
|
### 2.1 Template Events
|
|
### 2.1 Template Events
|
|
QUIQQER bietet die Möglichkeit auch in Templates an bestimmten Stellen eingreifen zu können. Dafür sind in den 3 Template-Dateien die Template Events eingeführt worden:
|
|
QUIQQER bietet die Möglichkeit auch in Templates an bestimmten Stellen eingreifen zu können. Dafür sind in den 3 Template-Dateien die Template-Events eingeführt worden:
|
|
1. `header.html`
|
|
1. `header.html`
|
|
- *{template_event name="quiqqer::quiqqer::mail::headerHeadEnd"}*
|
|
- *{template_event name="quiqqer::quiqqer::mail::headerHeadEnd"}*
|
|
2. `body.html`
|
|
2. `body.html`
|
... | @@ -74,7 +74,7 @@ QUIQQER bietet die Möglichkeit auch in Templates an bestimmten Stellen eingreif |
... | @@ -74,7 +74,7 @@ QUIQQER bietet die Möglichkeit auch in Templates an bestimmten Stellen eingreif |
|
Somit ist es möglich diese Stellen mit eigenen Templates / HTML zu erweitern. Mehr zu diesem Thema siehe [Template Events](https://dev.quiqqer.com/quiqqer/package-smarty/wikis/function_template_event). Code Beispiele für verschiedene Block Layouts siehe weiter unten in **Abschnitt 3**.
|
|
Somit ist es möglich diese Stellen mit eigenen Templates / HTML zu erweitern. Mehr zu diesem Thema siehe [Template Events](https://dev.quiqqer.com/quiqqer/package-smarty/wikis/function_template_event). Code Beispiele für verschiedene Block Layouts siehe weiter unten in **Abschnitt 3**.
|
|
|
|
|
|
### 2.2. HTML Template überschreiben
|
|
### 2.2. HTML Template überschreiben
|
|
Die Email Templates befinden sich in Haupt QUIQQER Paket unter `quiqqer/lib/template/mail/`. Möchte man z.B. die `body.html` ändern, muss in gewünschtem Paket (oder in `user` Ordner) neue Datei angelegt werden:
|
|
Die E-Mail Templates befinden sich in Haupt QUIQQER Paket unter `quiqqer/lib/template/mail/`. Möchte man z.B. die `body.html` ändern, muss in gewünschtem Paket (oder in `user` Ordner) neue Datei angelegt werden:
|
|
|
|
|
|
```bash
|
|
```bash
|
|
quiqqer/lib/template/mail/body.html
|
|
quiqqer/lib/template/mail/body.html
|
... | | ... | |