Tests: - Update frontend.e2e.spec.ts with locale testing - Add search.e2e.spec.ts for search functionality - Add i18n.int.spec.ts for localization tests - Add search.int.spec.ts for search integration - Update playwright.config.ts Documentation: - Add CLAUDE.md with project instructions - Add docs/ directory with detailed documentation - Add scripts/ for utility scripts 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
12 KiB
Universal Features - Dokumentation
Übersicht
Die Universal Features erweitern das Payload CMS um wiederverwendbare Collections und Blocks für Blog, News, Testimonials, Newsletter und Prozess-Darstellungen. Alle Features sind Multi-Tenant-fähig.
Collections
1. Posts Collection
Pfad: src/collections/Posts.ts
Slug: posts
Admin-Gruppe: Content
Die Posts Collection dient zur Verwaltung von Blog-Artikeln, News, Pressemitteilungen und Ankündigungen.
Felder
| Feld | Typ | Beschreibung | Pflicht |
|---|---|---|---|
title |
Text | Titel des Beitrags | Ja |
slug |
Text | URL-Pfad (unique) | Ja |
type |
Select | Art des Beitrags | Ja |
isFeatured |
Checkbox | Hervorgehobener Beitrag | Nein |
excerpt |
Textarea | Kurzfassung (max. 300 Zeichen) | Nein |
featuredImage |
Upload | Beitragsbild | Nein |
content |
RichText | Hauptinhalt | Ja |
categories |
Relationship | Kategorien (hasMany) | Nein |
author |
Text | Autorname | Nein |
status |
Select | draft/published/archived | Nein |
publishedAt |
Date | Veröffentlichungsdatum | Nein |
seo |
Group | SEO-Einstellungen | Nein |
Post-Typen
blog- Blog-Artikel (Standard)news- News/Aktuellespress- Pressemitteilungannouncement- Ankündigung
Access Control
- Read: Öffentlich für veröffentlichte Beiträge des eigenen Tenants
- Create/Update/Delete: Nur authentifizierte Benutzer
2. Testimonials Collection
Pfad: src/collections/Testimonials.ts
Slug: testimonials
Admin-Gruppe: Content
Kundenstimmen und Bewertungen für Referenz-Seiten.
Felder
| Feld | Typ | Beschreibung | Pflicht |
|---|---|---|---|
quote |
Textarea | Zitat/Bewertungstext | Ja |
author |
Text | Name des Kunden | Ja |
role |
Text | Position/Rolle | Nein |
company |
Text | Unternehmen | Nein |
image |
Upload | Portrait-Foto | Nein |
rating |
Number | Bewertung 1-5 Sterne | Nein |
source |
Text | Quelle (z.B. "Google Reviews") | Nein |
sourceUrl |
Text | Link zur Original-Bewertung | Nein |
date |
Date | Datum der Bewertung | Nein |
isActive |
Checkbox | Sichtbarkeit | Nein |
order |
Number | Sortierung | Nein |
Access Control
- Read: Öffentlich für aktive Testimonials des eigenen Tenants
- Create/Update/Delete: Nur authentifizierte Benutzer
3. Newsletter Subscribers Collection
Pfad: src/collections/NewsletterSubscribers.ts
Slug: newsletter-subscribers
Admin-Gruppe: Marketing
DSGVO-konforme Speicherung von Newsletter-Anmeldungen mit Double Opt-In Support.
Felder
| Feld | Typ | Beschreibung | Pflicht |
|---|---|---|---|
email |
E-Mail-Adresse | Ja | |
firstName |
Text | Vorname | Nein |
lastName |
Text | Nachname | Nein |
status |
Select | Anmeldestatus | Ja |
interests |
Select (hasMany) | Interessengebiete | Nein |
source |
Text | Anmeldequelle | Nein |
subscribedAt |
Date | Anmeldedatum (auto) | Nein |
confirmedAt |
Date | Bestätigungsdatum (auto) | Nein |
unsubscribedAt |
Date | Abmeldedatum (auto) | Nein |
confirmationToken |
Text | Token für Double Opt-In (auto) | Nein |
ipAddress |
Text | IP-Adresse (DSGVO) | Nein |
userAgent |
Text | Browser-Info | Nein |
Status-Werte
pending- Ausstehend (Double Opt-In)confirmed- Bestätigtunsubscribed- Abgemeldetbounced- E-Mail nicht zustellbar
Interessen-Optionen
general- Allgemeine Updatesblog- Blog-Artikelproducts- Produkt-Newsoffers- Angebote & Aktionenevents- Events
Access Control
- Read: Nur authentifizierte Benutzer (Datenschutz!)
- Create: Öffentlich (für Anmeldungen)
- Update/Delete: Nur authentifizierte Benutzer
Automatische Hooks
Bei der Erstellung wird automatisch:
subscribedAtauf aktuelles Datum gesetztconfirmationTokengeneriert (UUID)
Bei Status-Änderungen:
confirmedAtwird gesetzt bei Wechsel zu "confirmed"unsubscribedAtwird gesetzt bei Wechsel zu "unsubscribed"
Blocks
Alle Blocks können in der Pages Collection verwendet werden.
1. Posts List Block
Slug: posts-list-block
Zeigt eine Liste von Blog-Artikeln, News oder anderen Post-Typen an.
Konfigurationsoptionen
| Option | Typ | Standard | Beschreibung |
|---|---|---|---|
title |
Text | - | Überschrift |
subtitle |
Text | - | Untertitel |
postType |
Select | blog | Beitragstyp-Filter |
layout |
Select | grid | Darstellung |
columns |
Select | 3 | Spaltenanzahl (bei Grid) |
limit |
Number | 6 | Anzahl Beiträge |
showFeaturedOnly |
Checkbox | false | Nur hervorgehobene |
filterByCategory |
Relationship | - | Kategorie-Filter |
showExcerpt |
Checkbox | true | Kurzfassung anzeigen |
showDate |
Checkbox | true | Datum anzeigen |
showAuthor |
Checkbox | false | Autor anzeigen |
showCategory |
Checkbox | true | Kategorie anzeigen |
showPagination |
Checkbox | false | Pagination |
showReadMore |
Checkbox | true | "Alle anzeigen" Link |
readMoreLabel |
Text | "Alle Beiträge anzeigen" | Link-Text |
readMoreLink |
Text | /blog | Ziel-URL |
backgroundColor |
Select | white | Hintergrundfarbe |
Layout-Optionen
grid- Karten im Gridlist- Listenansichtfeatured- Featured + Gridcompact- Kompakt (für Sidebar)masonry- Masonry-Layout
2. Testimonials Block
Slug: testimonials-block
Zeigt Kundenstimmen aus der Testimonials Collection.
Konfigurationsoptionen
| Option | Typ | Standard | Beschreibung |
|---|---|---|---|
title |
Text | "Das sagen unsere Kunden" | Überschrift |
subtitle |
Text | - | Untertitel |
layout |
Select | slider | Darstellung |
columns |
Select | 3 | Spalten (bei Grid) |
displayMode |
Select | all | Auswahl-Modus |
selectedTestimonials |
Relationship | - | Handverlesene Auswahl |
limit |
Number | 6 | Max. Anzahl |
showRating |
Checkbox | true | Sterne anzeigen |
showImage |
Checkbox | true | Foto anzeigen |
showCompany |
Checkbox | true | Unternehmen anzeigen |
showSource |
Checkbox | false | Quelle anzeigen |
autoplay |
Checkbox | true | Auto-Wechsel (Slider) |
autoplaySpeed |
Number | 5000 | Wechselintervall (ms) |
backgroundColor |
Select | light | Hintergrundfarbe |
Layout-Optionen
slider- Karussellgrid- Karten im Gridsingle- Einzeln (Featured)masonry- Masonry-Layoutlist- Listenansicht
3. Newsletter Block
Slug: newsletter-block
Anmeldeformular für Newsletter mit DSGVO-Hinweis.
Konfigurationsoptionen
| Option | Typ | Standard | Beschreibung |
|---|---|---|---|
title |
Text | "Newsletter abonnieren" | Überschrift |
subtitle |
Textarea | Standard-Text | Beschreibung |
layout |
Select | inline | Formular-Layout |
image |
Upload | - | Bild (bei with-image) |
imagePosition |
Select | left | Bildposition |
collectName |
Checkbox | false | Name abfragen |
showInterests |
Checkbox | false | Interessen anzeigen |
availableInterests |
Select (hasMany) | - | Verfügbare Interessen |
buttonText |
Text | "Anmelden" | Button-Text |
placeholderEmail |
Text | "Ihre E-Mail-Adresse" | Placeholder |
successMessage |
Textarea | Standard-Text | Erfolgsmeldung |
errorMessage |
Text | Standard-Text | Fehlermeldung |
privacyText |
Textarea | Standard-Text | Datenschutz-Hinweis |
privacyLink |
Text | /datenschutz | Link zur DSE |
source |
Text | website | Tracking-Quelle |
backgroundColor |
Select | accent | Hintergrundfarbe |
Layout-Optionen
inline- Eingabe + Button nebeneinanderstacked- Untereinanderwith-image- Mit Bild (50/50)minimal- Nur Inputcard- Karten-Design
4. Process Steps Block
Slug: process-steps-block
Zeigt Prozess-Schritte / "So funktioniert es" Darstellungen.
Konfigurationsoptionen
| Option | Typ | Standard | Beschreibung |
|---|---|---|---|
title |
Text | "So funktioniert es" | Überschrift |
subtitle |
Text | - | Untertitel |
layout |
Select | horizontal | Darstellung |
showNumbers |
Checkbox | true | Schritt-Nummern |
showIcons |
Checkbox | true | Icons anzeigen |
steps |
Array | - | Schritte (2-10) |
cta.show |
Checkbox | false | CTA anzeigen |
cta.label |
Text | "Jetzt starten" | Button-Text |
cta.href |
Text | - | Button-Link |
cta.variant |
Select | default | Button-Stil |
backgroundColor |
Select | white | Hintergrundfarbe |
Schritte-Felder
title- Schritt-Titel (Pflicht)description- Beschreibungicon- Emoji oder Icon-Nameimage- Optionales Bild
Layout-Optionen
horizontal- Nebeneinandervertical- Untereinanderalternating- Zickzackconnected- Mit Verbindungslinientimeline- Timeline-Stil
5. Timeline Block
Slug: timeline-block
Chronologische Darstellung von Ereignissen (z.B. Firmengeschichte).
Konfigurationsoptionen
| Option | Typ | Standard | Beschreibung |
|---|---|---|---|
title |
Text | - | Überschrift |
subtitle |
Text | - | Untertitel |
layout |
Select | vertical | Darstellung |
showConnector |
Checkbox | true | Verbindungslinie |
markerStyle |
Select | dot | Marker-Stil |
items |
Array | - | Einträge |
backgroundColor |
Select | white | Hintergrundfarbe |
Einträge-Felder
year- Jahr/Datumtitle- Titel (Pflicht)description- Beschreibungicon- Emoji oder Iconimage- Optionales Bildlink.label- Link-Textlink.href- Link-URL
Layout-Optionen
vertical- Standard vertikalalternating- Links/Rechts wechselndhorizontal- Horizontale Zeitleiste
Marker-Stile
dot- Punktnumber- Nummericon- Icondate- Jahr/Datum
Multi-Tenant Konfiguration
Alle Collections sind für Multi-Tenant konfiguriert:
// payload.config.ts
multiTenantPlugin({
tenantsSlug: 'tenants',
collections: {
posts: {},
testimonials: {},
'newsletter-subscribers': {},
// ... weitere Collections
},
})
Tenant-Zuordnung
Jedes Dokument enthält ein tenant-Feld, das auf die Tenants-Collection verweist. Die Access-Control-Funktionen in src/lib/tenantAccess.ts sorgen für die Isolation:
- Authentifizierte Admins: Sehen alle Dokumente
- Anonyme Requests: Nur Dokumente des Tenants, der zur Domain passt
Dateien-Übersicht
src/
├── collections/
│ ├── Posts.ts # Blog/News Collection
│ ├── Testimonials.ts # Kundenstimmen
│ └── NewsletterSubscribers.ts # Newsletter-Anmeldungen
├── blocks/
│ ├── PostsListBlock.ts # Blog/News-Liste
│ ├── TestimonialsBlock.ts # Testimonials-Anzeige
│ ├── NewsletterBlock.ts # Newsletter-Formular
│ ├── ProcessStepsBlock.ts # Prozess-Schritte
│ ├── TimelineBlock.ts # Timeline
│ └── index.ts # Block-Exports
├── lib/
│ └── tenantAccess.ts # Access-Control-Funktionen
└── payload.config.ts # Haupt-Konfiguration
Datenbank-Tabellen
| Tabelle | Beschreibung |
|---|---|
posts |
Blog/News-Beiträge |
posts_rels |
Kategorien-Beziehungen |
testimonials |
Kundenstimmen |
newsletter_subscribers |
Newsletter-Anmeldungen |
newsletter_subscribers_interests |
Interessen (hasMany) |
pages_rels |
Block-Relationships |
Changelog
Version 1.0 (30.11.2025)
- Posts Collection um
type,isFeatured,excerpterweitert - Testimonials Collection erstellt
- NewsletterSubscribers Collection erstellt (DSGVO-konform)
- 5 neue Blocks für Pages implementiert
- Multi-Tenant Integration für alle Collections
- Migration
20251130_135459erstellt und angewendet