Initial commit
This commit is contained in:
s4luorth
318
skrift-configurator/README.md
Normal file
318
skrift-configurator/README.md
Normal file
@@ -0,0 +1,318 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user