🇪🇸 Español 🇬🇧 English 🇦🇪 العربية 🇫🇷 Français 🇩🇪 Deutsch
Dashboard

Widget-Ereignisse

Callbacks und Ereignisse, um auf Benutzeraktionen zu reagieren und den Buchungsablauf anzupassen.

Einführung

Das Widget gibt Ereignisse zu verschiedenen Zeitpunkten des Buchungsablaufs aus. Sie können diese Ereignisse über Callbacks in der Anfangskonfiguration abonnieren:

JavaScript 
SalonBookIt.init({
    apiKey: 'hh_pub_live_...',
    container: '#widget',

    // Ereignis-Callbacks
    onReady: (business) => { /* ... */ },
    onStepChange: (step, data) => { /* ... */ },
    onServiceSelect: (service) => { /* ... */ },
    onBookingComplete: (booking) => { /* ... */ },
    onError: (error) => { /* ... */ }
});

Ereignisreferenz

onReady

Wird ausgelöst, wenn das Widget vollständig geladen und einsatzbereit ist.

Parameter

Parameter Typ Beschreibung
business object Geladene Geschäftsinformationen

Beispiel

JavaScript 
onReady: (business) => {
    console.log('Geschäft:', business.nombre);
    console.log('Verfügbare Services:', business.servicios_count);

    // Externe UI aktualisieren
    document.querySelector('.loading').style.display = 'none';
}

Objekt business

JSON 
{
    "id": "uuid-del-tenant",
    "nombre": "Mi Salon",
    "telefono": "+34612345678",
    "email": "info@misalon.com",
    "direccion": "Calle Principal 123",
    "logo_url": "https://...",
    "servicios_count": 12,
    "profesionales_count": 5,
    "moneda": "EUR",
    "simbolo_moneda": "€"
}

onStepChange

Wird ausgelöst, wenn der Benutzer im Buchungsablauf vor- oder zurückgeht.

Parameter

Parameter Typ Beschreibung
step string Name des aktuellen Schritts
data object Bisher gesammelte Daten

Verfügbare Schritte

  • 'services' - Serviceauswahl
  • 'staff' - Fachmannauswahl
  • 'datetime' - Datum- und Zeitauswahl
  • 'customer' - Kundendaten
  • 'payment' - Zahlung (falls zutreffend)
  • 'confirmation' - Endgültige Bestätigung

Beispiel

JavaScript 
onStepChange: (step, data) => {
    console.log('Aktueller Schritt:', step);

    // Analytics
    gtag('event', 'booking_step', {
        'step_name': step,
        'services_selected': data.services?.length || 0
    });

    // Externe Breadcrumbs aktualisieren
    updateBreadcrumbs(step);
}

onServiceSelect

Wird ausgelöst, wenn der Benutzer einen Service auswählt oder abwählt.

Parameter

Parameter Typ Beschreibung
service object Ausgewählter Service
selected boolean Ob ausgewählt oder abgewählt
allSelected array Alle aktuell ausgewählten Services

Beispiel

JavaScript 
onServiceSelect: (service, selected, allSelected) => {
    console.log(selected ? 'Hinzugefügt:' : 'Entfernt:', service.nombre);

    // Gesamtpreis in externer UI aktualisieren
    const total = allSelected.reduce((sum, s) => sum + s.precio, 0);
    document.querySelector('.total-price').textContent = `€${total}`;
}

onStaffSelect

Wird ausgelöst, wenn der Benutzer einen Fachmann auswählt.

Beispiel

JavaScript 
onStaffSelect: (staff) => {
    console.log('Fachmann:', staff.nombre);
    // staff = { id, nombre, imagen_url, especialidades }
}

onDateSelect

Wird ausgelöst, wenn der Benutzer ein Datum und eine Uhrzeit auswählt.

Beispiel

JavaScript 
onDateSelect: (datetime) => {
    console.log('Datum:', datetime.fecha);  // '2024-01-20'
    console.log('Uhrzeit:', datetime.hora);    // '10:30'
}

onBookingComplete

Wird ausgelöst, wenn die Buchung erfolgreich erstellt wurde (vor der Zahlung, falls zutreffend).

Beispiel

JavaScript 
onBookingComplete: (booking) => {
    console.log('Buchung erstellt:', booking.id);

    // Analytics
    gtag('event', 'purchase', {
        'transaction_id': booking.id,
        'value': booking.total,
        'currency': 'EUR'
    });

    // Zur Bestätigungsseite weiterleiten
    window.location.href = `/reserva-confirmada/${booking.id}`;
}

Objekt booking

JSON 
{
    "id": 12345,
    "codigo": "ABC123",
    "fecha": "2024-01-20",
    "hora_inicio": "10:30",
    "hora_fin": "11:00",
    "servicios": [
        { "id": 1, "nombre": "Klassischer Schnitt", "precio": 25.00 }
    ],
    "profesional": {
        "id": 5,
        "nombre": "Carlos Garcia"
    },
    "cliente": {
        "nombre": "Juan Perez",
        "email": "juan@email.com",
        "telefono": "+34612345678"
    },
    "total": 25.00,
    "estado": "bestätigt",
    "pago_pendiente": true
}

onPaymentComplete

Wird ausgelöst, wenn die Zahlung erfolgreich abgeschlossen wurde.

Beispiel

JavaScript 
onPaymentComplete: (payment) => {
    console.log('Zahlung abgeschlossen');
    console.log('ID:', payment.payment_intent_id);
    console.log('Betrag:', payment.amount);

    // Erfolgsmeldung anzeigen
    showSuccessMessage('Zahlung erhalten!');
}

onError

Wird ausgelöst, wenn an irgendeinem Punkt des Ablaufs ein Fehler auftritt.

Beispiel

JavaScript 
onError: (error) => {
    console.error('Error:', error.code, error.message);

    // An Fehlersystem melden
    Sentry.captureException(error);

    // Nachricht an Benutzer anzeigen
    if (error.code === 'SLOT_UNAVAILABLE') {
        alert('Es tut uns leid, dieser Zeitpunkt ist nicht mehr verfügbar.');
    }
}

Häufige Fehlercodes

Code Beschreibung
INVALID_API_KEY Ungültiger API-Schlüssel
NETWORK_ERROR Verbindungsfehler
SLOT_UNAVAILABLE Zeitpunkt nicht mehr verfügbar
PAYMENT_FAILED Zahlungsfehler
VALIDATION_ERROR Ungültige Formulardaten

onClose

Wird ausgelöst, wenn der Benutzer das Widget schließt (nur im Modal-Modus).

Beispiel

JavaScript 
onClose: () => {
    console.log('Widget geschlossen');

    // Fragen, ob Entwurf gespeichert werden soll
    if (hasUnsavedData()) {
        saveBookingDraft();
    }
}

Widget-Methoden

Neben Ereignissen können Sie das Widget programmatisch steuern:

JavaScript 
// Widget-Referenz erhalten
const widget = SalonBookIt.init({ ... });

// Modal öffnen (nur im Modal/Button-Modus)
widget.open();

// Modal schließen
widget.close();

// Zu einem bestimmten Schritt gehen
widget.goToStep('services');

// Widget zurücksetzen
widget.reset();

// Widget zerstören
widget.destroy();