Anleitung

⌘K
  2. Start
  4. Dokumente
  6. Anleitung
  8. Webformulare ✅
  10. Gutscheinbestellungen

Gutscheinbestellungen

Gutscheinbestellungen-Shop

Das neue Shop-System für Gutscheinbestellungen bietet folgende Features (Stand: 29.10.25):

  • auf allen Webseiten unabhängig vom CRM einsetzbar
  • optimiert für mobile Endgeräte
  • Warenkorb-System ohne Beschränkungen in der Anzahl der Gutscheine
  • optionales Ein- und Ausblenden der Produktfilter für Werktage/Sprungtage & Zusatzgewicht
  • Produktbild und -beschreibung möglich
  • Widmung als Popup mit Anzeige und Korrekturmöglichkeit im Warenkorb
  • Rabattcodes mit Echtzeitüberprüfung, selektiver Anrechnung (Rabattcodes mit Produkteinschränkungen können auch eingelöst werden, wenn nicht rabattfähige Gutscheine mit im Warenkorb liegen und werden auf diese dann nicht angewandt) und Anzeige der Rabattkonditionen
  • Mail- und Postversand mit automatischer Versandkosten-Anzeige
  • optionale Lieferanschrift
  • Abgleich der E-Mail-Adresse mit der wiederholten Eingabe
  • automatische Zahlungsschnittstelle zu Paypal und Stripe (Kreditkarten, Lastschrift und Klarna-Sofortüberweisung) – Account erforderlich
  • automatische Änderung des Bezahlungsstatus von Bestellung nach erfolgreicher Bezahlung über Stripe
  • integrierte Erfolgs- und Abbruchseiten für Zahlungsvorgänge über Paypal & Stripe
  • Bezahl-Link in Eingangsbestätigung der Bestellung, sofern der Bezahlungsstatus „offen“ ist
  • Verlinkung der AGB, Widerrufsbelehrung und Datenschutzerklärung
  • zentrale Festlegung der Grundfarbe für Schaltflächen
  • optionale Weiterleitung zu benutzerangepassten Erfolgs- und Abbruchseiten für automatische Bezahlmethoden

Konfiguration

🛒 Online-Shop / Gutscheinbestellung

Vollständige Konfigurationsdokumentation

🚀 Schnellnavigation

🔗 Integration (WordPress)

Der Online-Shop wird über einen HTML-Code in eine WordPress-Seite eingebunden. Die Konfiguration erfolgt direkt im Einbettungscode über das window.OV Objekt.
📋 WordPress-Einbindung
Schritt 1: WordPress-Seite erstellen (z.B. /gutschein-kaufen/)

Schritt 2: HTML-Block hinzufügen

Schritt 3: Einbettungscode einfügen und anpassen

Schritt 4: Seite veröffentlichen
⚠️ Wichtig: Die settingsUrl und jsonURL müssen für eure Ninox-Datenbank angepasst werden. Diese Links erhaltet ihr aus den Einstellungen in Ninox.
📝 Wichtige Parameter im Code:
• settingsUrl: Ninox-Share-Link mit Shop-Einstellungen
• jsonURL: Ninox-Share-Link mit Produktdaten
• stripeKey: Öffentlicher Stripe-Key für Zahlungen
• data-target: CSS-Selektor für das Ziel-Element
💻 Einbettungscode
Der vollständige Code für die WordPress-Einbindung:
HTML Zum Kopieren markieren

⚙️ Grundkonfiguration

settingsUrlStringErforderlich
Die URL zu Ihrer Ninox-Datenbank mit den Grundeinstellungen. Diese enthält wichtige Konfigurationsparameter wie verfügbare Produkte, Preise und weitere Systemeinstellungen.
Format:
"https://share.ninox.com/..."
💡 Diese URL muss öffentlich zugänglich sein und eine gültige Ninox-Share-URL sein.

📦 Produkteinstellungen

minFlexNumber
Minimaler Betrag für Wertgutscheine mit frei wählbarem Wert. Definiert die Untergrenze für flexible Gutscheinbeträge in Euro.
Beispiel: 1 - Gutscheine ab 1€ möglich
maxFlexNumber
Maximaler Betrag für Wertgutscheine mit frei wählbarem Wert. Definiert die Obergrenze für flexible Gutscheinbeträge in Euro.
Beispiel: 500 - Gutscheine bis 500€ möglich
productVisibilityObject
Steuert die Sichtbarkeit von Produkten. Mit mode: "blacklist" werden alle Produkte angezeigt außer den in values gelisteten. Mit mode: "whitelist" werden nur die gelisteten Produkte angezeigt.
Blacklist (alle außer gelistete):
{ mode: "blacklist", values: ["Produkt-ID"] }

Whitelist (nur gelistete):
{ mode: "whitelist", values: ["Produkt-ID"] }

🔌 Datenschnittstellen

jsonURLStringErforderlich
Die URL zu den Produktdaten im JSON-Format. Diese Ninox-Share-URL liefert die verfügbaren Produkte und deren Eigenschaften.
Format:
"https://share.ninox.com/..."

↪️ Weiterleitungen

finalSuccessRedirectUrlStringOptional
URL, zu der der Kunde nach erfolgreicher Zahlung weitergeleitet wird. Wenn leer, bleibt der Kunde auf der Bestellseite mit Erfolgsanzeige.
Beispiel: "https://example.com/danke"
finalCancelRedirectUrlStringOptional
URL, zu der der Kunde nach Zahlungsabbruch weitergeleitet wird. Wenn leer, bleibt der Kunde auf der Bestellseite.
Beispiel: "https://example.com/shop"

⚖️ Rechtliche Links

urls.agbStringErforderlich
Link zu den Allgemeinen Geschäftsbedingungen. Muss vor Bestellung akzeptiert werden.
Beispiel: "https://example.com/agb.pdf"
urls.dseStringErforderlich
Link zur Datenschutzerklärung. Pflichtangabe laut DSGVO.
Beispiel: "https://example.com/datenschutz/"
urls.widerrufStringErforderlich
Link zur Widerrufsbelehrung. Pflichtangabe für Online-Shops.
Beispiel: "https://example.com/widerruf/"

🎨 Design & UI

ui.buttonBaseColorString
Hauptfarbe für Buttons und Akzente im Shop. Verwendet Hex-Farbcodes.
Beispiele:
"#193459" - Dunkelblau (Standard)
"#007bff" - Blau
"#28a745" - Grün
"#dc3545" - Rot
ui.currencyString
Währungssymbol, das bei Preisen angezeigt wird.
Mögliche Werte:
"€" - Euro
"$" - Dollar
"£" - Pfund
"CHF" - Schweizer Franken

🚩 Funktionsflags

flags.showUseFilterBoolean
Aktiviert/Deaktiviert den Verwendungszweck-Filter im Shop.
true = Filter anzeigen | false = Filter ausblenden
flags.showWeightFilterBoolean
Aktiviert/Deaktiviert den Gewichts-Filter für Produkte.
true = Filter anzeigen | false = Filter ausblenden
flags.showPaypalBoolean
Aktiviert/Deaktiviert PayPal als Zahlungsmethode.
true = PayPal anbieten | false = PayPal ausblenden
flags.showStripeBoolean
Aktiviert/Deaktiviert Stripe als Zahlungsmethode (Kreditkarten, SEPA, etc.).
true = Stripe anbieten | false = Stripe ausblenden
flags.showShippingBoolean
Aktiviert/Deaktiviert Versandoptionen. Bei digitalen Produkten deaktivieren.
true = Versand anbieten | false = Kein Versand
flags.showUserBoolean
Ermöglicht die Eingabe des Namens der beschenkten Person für personalisierte Gutscheine.
true = Namensfeld anzeigen | false = Kein Namensfeld
flags.AFF_MODEBoolean
Schränkt den Shop auf AFF-Gutscheine (Accelerated Free Fall) ein.
true = Nur AFF-Gutscheine | false = Normaler Shop
⚠️ Bei Aktivierung werden alle anderen Produkte ausgeblendet!

💳 Zahlungsanbieter

stripeKeyString
Ihr öffentlicher Stripe-Schlüssel für die Zahlungsabwicklung.
Format:
"pk_test_..." - Testumgebung
"pk_live_..." - Produktivumgebung
⚠️ Verwenden Sie NIEMALS Ihren geheimen Schlüssel (sk_) im Frontend-Code!

📁 Assets & Ressourcen

assets.cssString (URL)
URL zur CSS-Datei mit den Styles für das Shop-System.
Standard:
"https://icarus-manifest.de/js-webforms/orderVoucher/orderVoucher.css"
assets.bodyString (URL)
URL zur HTML-Template-Datei, die die Struktur des Formulars definiert.
Standard:
"https://icarus-manifest.de/js-webforms/orderVoucher/ordervoucher-body.html"
assets.jsString (URL)
URL zur JavaScript-Datei mit der Hauptlogik des Shop-Systems.
Standard:
"https://icarus-manifest.de/js-webforms/orderVoucher/orderVoucher.js"

📌 Wichtige Hinweise

  • Testen Sie immer erst in der Testumgebung mit Test-API-Keys, bevor Sie live gehen.
  • SSL-Verschlüsselung ist Pflicht: Alle URLs sollten https:// verwenden, besonders für Zahlungen.
  • DSGVO-Konformität: Stellen Sie sicher, dass alle rechtlichen Links aktuell und vollständig sind.
  • Mobile Optimierung: Testen Sie das System auf verschiedenen Geräten und Bildschirmgrößen.
  • Backup der Konfiguration: Speichern Sie Ihre Konfiguration extern, bevor Sie Änderungen vornehmen.

Gutscheine sortieren

Über das Modul Preise im Reiter „Shop-Sortierung Gutscheine“ kann per Drag-Drop die Reihenfolge der Gutscheine im Online-Shop angepasst werden, von 1 bis X für oben links im Shop bis unten rechts.

Gutscheine sortieren
Schlagwörter , , , , , , ,