mporwoll/cms.c2sgmbh
1
0
Fork 0
mirror of https://github.com/complexcaresolutions/cms.c2sgmbh.git synced 2026-03-17 19:44:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
cms.c2sgmbh/docs/anleitungen/UNIVERSAL_FEATURES.md
Martin Porwoll a88e4f60d0 test: add E2E and integration tests with documentation 
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>
2025-12-01 08:19:52 +00:00

405 lines
12 KiB
Markdown
Raw Blame History

# 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/Aktuelles
- `press` - Pressemitteilung
- `announcement` - 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` | 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ätigt
- `unsubscribed` - Abgemeldet
- `bounced` - E-Mail nicht zustellbar
#### Interessen-Optionen
- `general` - Allgemeine Updates
- `blog` - Blog-Artikel
- `products` - Produkt-News
- `offers` - Angebote & Aktionen
- `events` - 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:
- `subscribedAt` auf aktuelles Datum gesetzt
- `confirmationToken` generiert (UUID)
Bei Status-Änderungen:
- `confirmedAt` wird gesetzt bei Wechsel zu "confirmed"
- `unsubscribedAt` wird 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 Grid
- `list` - Listenansicht
- `featured` - Featured + Grid
- `compact` - 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` - Karussell
- `grid` - Karten im Grid
- `single` - Einzeln (Featured)
- `masonry` - Masonry-Layout
- `list` - 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 nebeneinander
- `stacked` - Untereinander
- `with-image` - Mit Bild (50/50)
- `minimal` - Nur Input
- `card` - 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` - Beschreibung
- `icon` - Emoji oder Icon-Name
- `image` - Optionales Bild
#### Layout-Optionen
- `horizontal` - Nebeneinander
- `vertical` - Untereinander
- `alternating` - Zickzack
- `connected` - Mit Verbindungslinien
- `timeline` - 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/Datum
- `title` - Titel (Pflicht)
- `description` - Beschreibung
- `icon` - Emoji oder Icon
- `image` - Optionales Bild
- `link.label` - Link-Text
- `link.href` - Link-URL
#### Layout-Optionen
- `vertical` - Standard vertikal
- `alternating` - Links/Rechts wechselnd
- `horizontal` - Horizontale Zeitleiste
#### Marker-Stile
- `dot` - Punkt
- `number` - Nummer
- `icon` - Icon
- `date` - Jahr/Datum
---
## Multi-Tenant Konfiguration
Alle Collections sind für Multi-Tenant konfiguriert:
```typescript
// 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`, `excerpt` erweitert
- Testimonials Collection erstellt
- NewsletterSubscribers Collection erstellt (DSGVO-konform)
- 5 neue Blocks für Pages implementiert
- Multi-Tenant Integration für alle Collections
- Migration `20251130_135459` erstellt und angewendet
Reference in a new issue View git blame Copy permalink