Mehrere Buchungsmasken auf einer Inhaltsliste

Um die untenstehenden Anweisungen auf Ihrer Webseite umzusetzen, benötigen Sie möglicherweise die Hilfe Ihrer Agentur.

Buchungsmasken nach Dienstleistungen einblenden

1. Erstellen Sie eine Buchungsmaske mit allen Leistungen, die auf der Seite gebucht werden können.
   
   Achten Sie darauf, dass die Buchungsmaske nicht sichtbar ist, die Auswahl Mitarbeiter wählen nicht erfolgen soll und das Layout der Buchungsmaske die Auswahl der einzelnen Schritte nicht anzeigt.
   Treffen Sie hierzu folgende Einstellungen in der Buchungsmaske, indem Sie die gewünschte Buchungsmaske im Adminbereich unter Buchungsmasken bearbeiten.
   Reiter: Allgemeine Einstellungen:

   • Eigenen Button verwenden? Ja
   • Buchung: Mitarbeiter wählen: Überspringen

   Reiter Layout Einstellungen:

   • 3 Schritte anzeigen: Nein
2. Binden Sie die Buchungsmaske auf der Seite ein.
3. Erstellen Sie nun die Buttons, die per Klick die Buchungsmaske laden und Termine zeigen sollen.
   Der Wert bei data-id muss manuell angepasst werden. Dies ist die ID der Leistung, die gewählt werden soll.
   Beispiel:

   <a href="#" class="booking select-booking-option" data-id="5">Termine anzeigen</a>

4. Fügen Sie auf der Webseite nur einmal folgenden Code ein. 
   Bitte spitze Anfangsklammer zum script-Tag hinzufügen

<script>
	jQuery(document).ready(function ($) {
		$(document).on('click', '.select-booking-option', function (e) {
			e.preventDefault();
			let selectValue = $(this).attr('data-id');
			$('.b2m-app').find('#event_name').val(selectValue).change();
		});
	});
</script>

Buchungsmasken nach Dienstleistungsgruppen einblenden

Erstellen Sie einen Link, der per Klick die Leistung einer Gruppe anzeigen soll.

<a href="#" class="booking show-booking-group" data-id="1">Leistung einer Gruppe anzeigen</a>

Hier muss nun manuell die ID der Dienstleistungsgruppe bei data-id eingetragen werden.

Binden Sie folgenden Code nur einmal auf der Seite ein:

<script>
    jQuery(document).ready(function ($) {
       $(document).on('click', '.show-booking-group', function(e){
          e.preventDefault();
          let groupId = $(this).attr('data-id');
          let event_groups = $('.b2m-app').find('#event_name');

          event_groups.find('optgroup').hide();
          event_groups.find('optgroup[id="'+groupId+'"]').show();
       });
    });
</script> 

Mit diesen Anpassungen können Sie die Leistungen entsprechend anzeigen lassen und die Benutzererfahrung verbessern.

Beide Methoden können auf einer Seite kombiniert werden, dafür müssen beide java-scripte auf der Seite eingebunden werden.

Gerne stehen wir Ihnen für weitere Fragen über Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein. oder per Telefon über +49 (0) 3322 85 25 300 zur Verfügung.