319 lines
7.3 KiB
Markdown
319 lines
7.3 KiB
Markdown
# Skrift Konfigurator - WordPress Plugin
|
|
|
|
Interaktiver Konfigurator für handgeschriebene Briefe, Postkarten und Einladungen.
|
|
|
|
## Features
|
|
|
|
- ✅ Multi-Step Konfigurator mit 6 Schritten
|
|
- ✅ B2B und B2C Workflows
|
|
- ✅ Dynamische Preisberechnung
|
|
- ✅ Gutschein-System
|
|
- ✅ Backend-Integration für SVG-Generierung
|
|
- ✅ Preview-System (in Entwicklung)
|
|
- ✅ Responsive Design
|
|
- ✅ Vollständig anpassbare Preise und Produkte
|
|
|
|
## Installation
|
|
|
|
1. Plugin-Ordner nach `wp-content/plugins/skrift-konfigurator/` kopieren
|
|
2. In WordPress: **Plugins → Installierte Plugins**
|
|
3. "Skrift Konfigurator" aktivieren
|
|
4. Zu **Einstellungen → Skrift Konfigurator** gehen
|
|
5. Einstellungen konfigurieren
|
|
|
|
## Konfiguration
|
|
|
|
### 1. Produkte
|
|
|
|
Verwalte Namen, Beschreibungen und Basispreise für alle 5 Produkte:
|
|
- Businessbriefe
|
|
- Business Postkarten
|
|
- Follow-ups
|
|
- Einladungen
|
|
- Private Briefe
|
|
|
|
### 2. Preise
|
|
|
|
Konfiguriere Aufpreise für:
|
|
- Formate (A4 Upgrade)
|
|
- Versand (Direkt vs. Bulk)
|
|
- Umschläge (mit Adresse vs. Custom Text)
|
|
- Zusatzleistungen (Motiv-Upload, Design-Service, etc.)
|
|
- Schriftarten (Tilda, Alva, Ellie)
|
|
|
|
### 3. Dynamische Preisformeln
|
|
|
|
Erstelle Mengenrabatt-Formeln für Business und Privatkunden:
|
|
|
|
**Beispiel Business:**
|
|
```
|
|
if (q < 50) return 2.50;
|
|
if (q < 100) return 2.30;
|
|
if (q < 200) return 2.10;
|
|
return 1.90;
|
|
```
|
|
|
|
**Beispiel Privat:**
|
|
```
|
|
if (q < 10) return 3.00;
|
|
if (q < 25) return 2.80;
|
|
return 2.50;
|
|
```
|
|
|
|
### 4. Backend-Verbindung
|
|
|
|
**WICHTIG:** Für die SVG-Generierung!
|
|
|
|
- **API URL:** `https://backend.deine-domain.de`
|
|
- **Order Webhook URL:** `https://n8n.deine-domain.de/webhook/order` (optional)
|
|
- **Redirect URLs:** Wohin nach Bestellung weitergeleitet wird
|
|
|
|
Siehe [BACKEND_INTEGRATION.md](./BACKEND_INTEGRATION.md) für Details.
|
|
|
|
### 5. Gutscheine
|
|
|
|
Erstelle Gutschein-Codes für Rabatte oder Testbestellungen.
|
|
|
|
**Arten:**
|
|
- **Prozentual:** 10%, 20%, 50%
|
|
- **Festbetrag:** 5€, 10€, 20€
|
|
- **Gratis:** 100% Rabatt
|
|
|
|
**Einstellungen:**
|
|
- Einmalverwendung oder Mehrfachnutzung
|
|
- Aktiv/Inaktiv Toggle
|
|
|
|
## Verwendung
|
|
|
|
### Shortcode einfügen
|
|
|
|
```
|
|
[skrift_konfigurator]
|
|
```
|
|
|
|
Füge diesen Shortcode auf jeder Seite oder jedem Beitrag ein.
|
|
|
|
### Mit URL-Parametern
|
|
|
|
Direktlink zu einem Produkt:
|
|
|
|
```
|
|
https://deine-domain.de/konfigurator/?businessbriefe
|
|
https://deine-domain.de/konfigurator/?private-briefe
|
|
https://deine-domain.de/konfigurator/?einladungen
|
|
```
|
|
|
|
## Datei-Struktur
|
|
|
|
```
|
|
skrift-konfigurator/
|
|
├── assets/
|
|
│ ├── css/
|
|
│ │ └── configurator.css # Styling
|
|
│ └── js/
|
|
│ ├── configurator-app.js # Main App
|
|
│ ├── configurator-state.js # State Management
|
|
│ ├── configurator-ui.js # UI Rendering
|
|
│ ├── configurator-pricing.js # Price Calculation
|
|
│ ├── configurator-api.js # Backend API Client
|
|
│ └── configurator-backend-integration.js # Backend Integration
|
|
├── includes/
|
|
│ ├── admin-settings.php # Admin Settings Page
|
|
│ └── admin-vouchers.php # Voucher Management
|
|
├── skrift-konfigurator.php # Main Plugin File
|
|
├── BACKEND_INTEGRATION.md # Backend Integration Guide
|
|
└── README.md # This file
|
|
```
|
|
|
|
## API Integration
|
|
|
|
Das Plugin kommuniziert mit dem Node.js Backend über REST API.
|
|
|
|
### Endpoints
|
|
|
|
| Endpoint | Method | Beschreibung |
|
|
|----------|--------|--------------|
|
|
| `/health` | GET | Health-Check |
|
|
| `/api/preview/batch` | POST | Preview generieren |
|
|
| `/api/order/generate` | POST | Order erstellen |
|
|
| `/api/order/finalize` | POST | Order aus Preview finalisieren |
|
|
|
|
Siehe [BACKEND_INTEGRATION.md](./BACKEND_INTEGRATION.md) für vollständige API-Dokumentation.
|
|
|
|
## Workflow
|
|
|
|
### Business-Kunde
|
|
|
|
```
|
|
1. Produkt auswählen (Businessbriefe, Business Postkarten, Follow-ups)
|
|
2. Menge eingeben
|
|
3. Format wählen
|
|
4. Versand & Umschlag konfigurieren
|
|
5. Inhalt eingeben (Text)
|
|
6. Kundendaten eingeben
|
|
7. Prüfen & Bestellen
|
|
→ Backend generiert SVG-Dateien
|
|
→ Webhook wird aufgerufen
|
|
→ Weiterleitung zu Danke-Seite
|
|
```
|
|
|
|
### Privat-Kunde
|
|
|
|
```
|
|
1. Produkt auswählen (Private Briefe, Einladungen)
|
|
2. Menge eingeben
|
|
3. Format wählen
|
|
4. Versand & Umschlag konfigurieren
|
|
5. Inhalt eingeben (Text + optional Motiv)
|
|
6. Kundendaten eingeben
|
|
7. Prüfen & Bestellen
|
|
→ PayPal-Checkout (später)
|
|
→ Backend generiert SVG-Dateien
|
|
→ Webhook wird aufgerufen
|
|
→ Weiterleitung zu Danke-Seite
|
|
```
|
|
|
|
## Entwicklung
|
|
|
|
### Requirements
|
|
|
|
- PHP 7.4+
|
|
- WordPress 5.8+
|
|
- Modern Browser mit ES6+ Support
|
|
|
|
### JavaScript
|
|
|
|
Das Plugin nutzt ES6 Modules und läuft ohne Build-Step.
|
|
|
|
**State Management:**
|
|
- Reducer-Pattern (ähnlich Redux)
|
|
- Immutable State Updates
|
|
- Uni-directional Data Flow
|
|
|
|
**UI Rendering:**
|
|
- Virtual DOM mit `h()` Helper
|
|
- Deklaratives Rendering
|
|
- Event-Delegation
|
|
|
|
### Debugging
|
|
|
|
Browser-Console öffnen (F12):
|
|
|
|
```javascript
|
|
// State prüfen
|
|
console.log(window.currentState);
|
|
|
|
// Backend API testen
|
|
const api = window.SkriftBackendAPI;
|
|
await api.healthCheck();
|
|
|
|
// Test-Order erstellen
|
|
await api.generateOrder(
|
|
api.generateOrderNumber(),
|
|
[{ text: 'Test', font: 'tilda', format: 'A4', placeholders: {} }],
|
|
[],
|
|
{ customer: { type: 'business', firstName: 'Test' } }
|
|
);
|
|
```
|
|
|
|
## Deployment
|
|
|
|
### 1. Plugin auf Server hochladen
|
|
|
|
Via FTP, SSH oder WordPress Dashboard:
|
|
```
|
|
wp-content/plugins/skrift-konfigurator/
|
|
```
|
|
|
|
### 2. Backend deployen
|
|
|
|
Siehe `Docker Backend/DEPLOYMENT.md`
|
|
|
|
### 3. WordPress konfigurieren
|
|
|
|
- Einstellungen → Skrift Konfigurator
|
|
- Backend-URL setzen
|
|
- Preise anpassen
|
|
- Gutscheine erstellen (optional)
|
|
|
|
### 4. Seite erstellen
|
|
|
|
- Neue Seite: "Konfigurator"
|
|
- Shortcode einfügen: `[skrift_konfigurator]`
|
|
- Veröffentlichen
|
|
|
|
### 5. Testen
|
|
|
|
- Produkt durchklicken
|
|
- Test-Bestellung aufgeben
|
|
- Prüfen ob Backend-Order erstellt wurde
|
|
- Prüfen ob Dateien in `/var/skrift-output/` erstellt wurden
|
|
|
|
## Troubleshooting
|
|
|
|
### Konfigurator wird nicht angezeigt
|
|
|
|
**Lösung:**
|
|
- Shortcode korrekt? `[skrift_konfigurator]`
|
|
- JavaScript-Fehler in Console? (F12)
|
|
- Plugin aktiviert?
|
|
|
|
### Backend-Verbindung fehlgeschlagen
|
|
|
|
**Lösung:**
|
|
- Backend URL korrekt in Einstellungen?
|
|
- Backend erreichbar? `curl https://backend.domain.de/health`
|
|
- CORS konfiguriert? (Nginx Proxy Manager)
|
|
|
|
### Preise werden falsch berechnet
|
|
|
|
**Lösung:**
|
|
- Preise in Einstellungen prüfen
|
|
- Dynamische Formeln prüfen (Syntax)
|
|
- Console-Logs prüfen: `window.currentState.quote`
|
|
|
|
### Gutschein funktioniert nicht
|
|
|
|
**Lösung:**
|
|
- Gutschein ist aktiv?
|
|
- Gutschein noch nicht verwendet? (bei Einmalverwendung)
|
|
- Code korrekt geschrieben? (Case-sensitive!)
|
|
|
|
## Changelog
|
|
|
|
### Version 0.3.0
|
|
- ✅ Backend-Integration implementiert
|
|
- ✅ API Client für Preview & Order
|
|
- ✅ Webhook-Support
|
|
- ✅ Redirect-URLs konfigurierbar
|
|
|
|
### Version 0.2.0
|
|
- ✅ Gutschein-System
|
|
- ✅ Dynamische Preisformeln
|
|
- ✅ Admin-Einstellungen erweitert
|
|
|
|
### Version 0.1.0
|
|
- ✅ Basis-Konfigurator
|
|
- ✅ 6 Schritte
|
|
- ✅ B2B und B2C Workflows
|
|
|
|
## TODO
|
|
|
|
- [ ] Preview-System vollständig integrieren
|
|
- [ ] PayPal-Integration für Privatkunden
|
|
- [ ] Email-Benachrichtigungen
|
|
- [ ] PDF-Export der Bestellung
|
|
- [ ] Admin-Dashboard für Bestellungen
|
|
|
|
## Support
|
|
|
|
Bei Fragen oder Problemen:
|
|
1. [BACKEND_INTEGRATION.md](./BACKEND_INTEGRATION.md) lesen
|
|
2. Browser-Console prüfen (F12)
|
|
3. Backend-Logs prüfen: `docker compose logs -f`
|
|
4. WordPress Debug-Log: `wp-content/debug.log`
|
|
|
|
## Lizenz
|
|
|
|
Proprietär - Alle Rechte vorbehalten
|