Anleitung

⌘K
  1. Start
  2. Dokumente
  3. Anleitung
  4. Webformulare ✅
  5. 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

📋 Order Voucher System

Vollständige Konfigurationsdokumentation

Grundkonfiguration

settingsUrlStringErforderlich
Die URL zu Ihrer Ninox-Datenbank mit den Grundeinstellungen. Diese enthält wichtige Konfigurationsparameter wie verfügbare Produkte, Preise und weitere Systemeinstellungen.
Aktueller Wert:
"https://share.ninox.com/d0in08bz3sebcihfvkaxkpml3xr4ta2ts2ml"
💡 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.
Aktueller Wert: 1
Beispiel: Bei minFlex: 1 können Gutscheine ab 1€ erstellt werden
maxFlexNumber
Maximaler Betrag für Wertgutscheine mit frei wählbarem Wert. Definiert die Obergrenze für flexible Gutscheinbeträge in Euro.
Aktueller Wert: 500
Beispiel: Bei maxFlex: 500 können Gutscheine bis maximal 500€ erstellt werden
productVisibilityObject
Steuert die Sichtbarkeit von Produkten im Shop. Sie können entweder eine Whitelist (nur bestimmte Produkte anzeigen) oder eine Blacklist (bestimmte Produkte ausblenden) verwenden.
Struktur:
{
"mode": "blacklist", // oder "whitelist"
"values": [] // Array mit Produkt-Typen
}
🚫 Blacklist-Modus

Logik: Alle Produkte werden angezeigt, außer den angegebenen Typen.

Verwende wenn: Die meisten Produkte sichtbar sein sollen und du nur wenige ausblenden möchtest.

✅ Whitelist-Modus

Logik: Nur die angegebenen Typen werden angezeigt, alle anderen versteckt.

Verwende wenn: Nur bestimmte Produkte sichtbar sein sollen (strikte Kontrolle).

💡 Beispiel Blacklist: {"mode": "blacklist", "values": [1, 3]} → Zeigt alle Typen außer Mitglieder und Gäste-Sportspringer
💡 Beispiel Whitelist: {"mode": "whitelist", "values": [2, 4]} → Zeigt nur Ausbildung und Tandemsprünge
📋 Verfügbare Produkttypen:
Typ 1: Mitglieder/Sportspringer
Typ 2: Schüler/Ausbildung
Typ 3: Gäste/Sportspringer
Typ 4: Tandemgäste/Tandemsprünge
Typ 6: Alle
🎯 Praktische Szenarien:
{"mode": "whitelist", "values": [4]}

→ Zeige nur Tandemsprünge (Typ 4)

{"mode": "blacklist", "values": [1]}

→ Zeige alles außer Mitglieder/Sportspringer (Typ 1)

{"mode": "whitelist", "values": [2, 4]}

→ Zeige nur Ausbildung und Tandemsprünge (Typ 2 und 4)

{"mode": "blacklist", "values": []}

→ Zeige alle verfügbaren Produkte (keine Filter)

⚠️ Die Produkt-Typen müssen als Zahlen (nicht als Strings) angegeben werden. Achten Sie auf die korrekte Schreibweise: "values": [1, 2, 3]
🔧 Debugging: Öffnen Sie die Browser-Konsole (F12) und prüfen Sie mit console.log(PRODUCT_VISIBILITY) welche Konfiguration aktiv ist.

Datenschnittstellen

jsonURLStringErforderlich
URL zur JSON-Datenschnittstelle, die Produktdaten, Preise und weitere dynamische Informationen liefert. Diese URL wird regelmäßig abgefragt, um aktuelle Daten zu laden.
Aktueller Wert:
"https://share.ninox.com/9q8z6jxbxgp4ul6ovv8mp5sczsndmf8la38w"
orderWebhookURLStringErforderlich
Webhook-URL, an die Bestelldaten nach Abschluss einer Bestellung gesendet werden. Hier können Sie Automatisierungen (z.B. via Make/Zapier) anbinden.
Aktueller Wert:
"https://hook.eu1.make.com/d38kfmpco87vs58uzvjroroajrsvlv68"
⚠️ Diese URL sollte SSL-verschlüsselt (https) sein und vertraulich behandelt werden.

Weiterleitungen

finalSuccessRedirectUrlStringOptional
URL, zu der Kunden nach erfolgreicher Zahlung weitergeleitet werden. Ideal für eine "Danke"-Seite oder Bestellbestätigung.
Beispiele:
"https://example.com/danke"
"https://example.com/bestellung-erfolgreich"
💡 Lassen Sie dieses Feld leer (""), wenn keine Weiterleitung gewünscht ist.
finalCancelRedirectUrlStringOptional
URL, zu der Kunden nach Abbruch der Zahlung weitergeleitet werden. Kann zurück zum Shop oder zu einer speziellen Abbruch-Seite führen.
Beispiele:
"https://example.com/shop"
"https://example.com/zahlung-abgebrochen"

Rechtliche Links

urls.agbStringErforderlich
Link zu Ihren Allgemeinen Geschäftsbedingungen (AGB). Dieser Link wird im Checkout-Prozess angezeigt und muss vom Kunden akzeptiert werden.
Aktueller Wert:
"https://icarus-manifest.de/wp-content/uploads/2023/01/AGB.pdf"
urls.dseStringErforderlich
Link zu Ihrer Datenschutzerklärung. DSGVO-konform erforderlich für den Betrieb eines Online-Shops in der EU.
Aktueller Wert:
"https://icarus-manifest.de/datenschutzerklaerung/"
urls.widerrufStringOptional
Link zu Ihrer Widerrufsbelehrung. Rechtlich erforderlich für B2C-Geschäfte im Fernabsatz.
💡 Auch wenn optional, ist dieser Link für B2C-Shops in der EU rechtlich vorgeschrieben.

Design & UI

ui.buttonBaseColorString (HEX)
Hauptfarbe für Buttons und interaktive Elemente. Verwenden Sie einen HEX-Farbcode, der zu Ihrem Corporate Design passt.
Aktueller Wert: "#193459"
Weitere Beispiele:
"#007bff" - Blau
"#28a745" - Grün
"#dc3545" - Rot
ui.currencyString
Währungssymbol, das bei Preisen angezeigt wird. Standardmäßig auf Euro (€) eingestellt.
Mögliche Werte:
"€" - Euro
"$" - Dollar
"£" - Pfund
"CHF" - Schweizer Franken

Funktionsflags

flags.showUseFilterBoolean
Aktiviert/Deaktiviert den Verwendungszweck-Filter. Ermöglicht es Kunden, Produkte nach Verwendungszweck zu filtern.
true = Filter anzeigen
false = Filter ausblenden
flags.showWeightFilterBoolean
Aktiviert/Deaktiviert den Gewichts-Filter. Nützlich für Produkte mit verschiedenen Gewichtsklassen.
true = Filter anzeigen
false = Filter ausblenden
flags.showPaypalBoolean
Aktiviert/Deaktiviert PayPal als Zahlungsmethode. Erfordert eine gültige PayPal-Integration.
true = PayPal anbieten
false = PayPal ausblenden
flags.showStripeBoolean
Aktiviert/Deaktiviert Stripe als Zahlungsmethode (Kreditkarten, SEPA, etc.). Erfordert einen gültigen Stripe-Key.
true = Stripe anbieten
false = Stripe ausblenden
flags.showShippingBoolean
Aktiviert/Deaktiviert die Versandoptionen. Bei digitalen Produkten kann dies deaktiviert werden.
true = Versand anbieten
false = Kein Versand (z.B. für digitale Produkte)
flags.showUserBoolean
Ermöglicht die Eingabe des Namens der beschenkten Person. Bei Gutscheinbestellungen kann so der Name des Empfängers angegeben werden, der auf dem Gutschein erscheint.
true = Namensfeld für Beschenkten anzeigen
false = Kein Namensfeld
flags.hideTransferBooleanNEU
Versteckt die Überweisung als Zahlungsoption, wenn Online-Payment-Methoden (PayPal/Stripe) verfügbar sind. Nützlich, um Kunden zu Online-Zahlungen zu lenken.
true = Überweisung ausblenden bei Online-Payment
false = Überweisung immer anzeigen
💡 Überweisung bleibt verfügbar, wenn weder PayPal noch Stripe aktiviert sind.
flags.AFF_MODEBoolean
Schränkt den Shop auf den Verkauf von AFF-Gutscheinen (Accelerated Free Fall) ein. Bei Aktivierung können ausschließlich AFF-Ausbildungsgutscheine erworben werden.
true = Nur AFF-Gutscheine
false = Normaler Shop-Modus
⚠️ Bei Aktivierung werden alle anderen Produkte ausgeblendet!

Zahlungsanbieter

stripeKeyString
Ihr öffentlicher Stripe-Schlüssel für die Zahlungsabwicklung. Beginnt mit "pk_test_" für Testumgebung oder "pk_live_" für Produktivumgebung.
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 Order Voucher System. Hier können Sie eigene Styles definieren.
Aktueller Wert:
"https://icarus-manifest.de/js-webforms/orderVoucher/orderVoucher.css"
assets.bodyString (URL)
URL zur HTML-Template-Datei, die die Struktur des Formulars definiert.
Aktueller Wert:
"https://icarus-manifest.de/js-webforms/orderVoucher/ordervoucher-body.html"
assets.jsString (URL)
URL zur JavaScript-Datei mit der Hauptlogik des Order Voucher Systems.
Aktueller Wert:
"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 , , , , , , ,