Skrift-Kofnigurator/skrift-configurator

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 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 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):

// 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 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