Folgend einige Hinweise zu möglichen visuellen, strukturellen und inhaltlichen Anpassungen, die über CSS in den Widgetkonfigurationen möglich sind. Bei der Buchung über das Anmeldewidget werden mehrere Schritte durchlaufen. Die Anpassungsoptionen sind anhand der Seiten dieser Schritte kategorisiert.

Terminauswahl

Die folgenden Optionen sind relevant für die erste Widgetseite, auf der ein Termin und Angebot ausgewählt werden.

Angebotsliste ausblenden

Mit folgender Option wird die Angebotsliste ausgeblendet:

#events-list {
display: none;
}

Farbliche Hervorhebung buchbarer Tage

Mit folgender Option werden buchbare Tage im Kalender farblich hervorgehoben:

  .with-dates,
  a {
    color: #3ac73a;
    text-decoration: none;
  }

Vorauswahl Datum

Der Kalender des Widgets zeigt standardmäßig den aktuellen Monat an. Eine Voreinstellung, dass immer der „nächste Monat“ oder „ein Monat mit freien Daten“ angezeigt werden soll, gibt es nicht.

Wenn der link aus einer Webseite heraus aufgerufen wird, kann ein parameter ?start_at=2020-09-01 übergeben werden.

Buchung

Die folgenden Optionen sind relevant für die Widgetseite, auf der die Details zu einer Buchung (Kundendaten, Teilnehmende etc.) eingegeben werden.

Altersgruppen

Es ist möglich, die Auswahl der Altersgruppen zu verstecken. Fügen Sie dazu folgenden Code in der zugeordneten Widgetkonfiguration ein:

  .form-group.booking_age_group_id {
    display: none;
  }

Newsletter

Es ist möglich, die Frage nach dem Wunsch zur Registrierung als Newsletter-Abonnement auszublenden. Fügen Sie dazu folgenden Code in der zugeordneten Widgetkonfiguration ein:

/* disable newsletter input */
.booking_seat_customer_newsletter_groups {
display: none !important;

Klassen

Es ist möglich, unterschiedliche Klassen, wie beispielsweise Eingabefelder (Telefon, E-Mail, Name, etc.) auszublenden. Im folgenden Beispiel soll das Eingabefeld “Telefon” ausgeblendet werden.

Fügen Sie dazu folgenden Code in der zugeordneten CSS-Bearbeitungsfläche in der Widgetkonfiguration Ihrer go~mus Instanz ein:

.booking_seat_customer_tel{
  display:none;
}

Im Ergebnis sieht die Anpassung so aus:

Weitere Klassen (im vorliegenden Zusammenhang Eingabefelder), wären beispielsweise:

.booking_seat_customer_name{ für den Vornamen

.booking_seat_customer_surname{ für den Nachnamen

.booking_seat_customer_email{ für die E-Mail.

Das Ausblenden dieser Klassen erfolgt analog. Beispielsweise würde die Klasse (Eingabefeld) Vorname wie folgt ausgeblendet werden:

.booking_seat_customer_name{
  display:none;
}

Hinweistext neben AGB-Häkchen im Widget farblich hervorheben

Wenn das Häkchen bei den Geschäftsbedingungen nicht gesetzt wird, verbleibt man auf der Seite, es kommt aber keine Fehlermeldung.

Folgender CSS-Code sorgt dafür, dass der Hinweis auf der entsprechenden Seite rot hervorgehoben wird:

body {
  .booking_seat_confirmed_accept_agb.error {
    .help-inline {
      color: red !important;
      font-weight: bold !important;
    }
  }
}

Einzelne Tabellenelemente ausblenden

Im Widget können einzelne Tabellenelemente ausgeblendet werden. Folgende Screenshots sollen exemplarisch verdeutlichen, was möglich ist.

Die Tabellenspalten “Einzelpreis” und “Gesamtpreis” sollen ausgeblendet werden, also Tabellenspalten zwei und vier.

Dabei hilft folgender CSS-Eintrag:

table tr th:nth-child(2), table tr td:nth-child(2){
 display:none;// It will hide the second column of the table
}

table tr th:nth-child(4), table tr td:nth-child(4){
 display:none;// It will hide the fourth column of the table
}

Im Ergebnis sieht die Anpassung so aus:

Bestätigung

Die folgenden Optionen sind relevant für die Widgetseite, auf der die Buchung durch den Kunden bestätigt wird.

tbd.

Allgemeine Optionen

Die folgenden Optionen sind allgemein und für alle Widgetseiten relevant.

Hinweisfarbe

Es ist möglich, die Hinweisfarbe anzupassen. Fügen Sie dazu folgenden Code in der zugeordneten Widgetkonfiguration ein:

.alert-success{background-color: #fcf8e3;}

Weitere Hinweis dazu finden Sie hier: https://getbootstrap.com/docs/3.3/components/#alerts

Anpassung des Menu für Mobile Ansichten

/* fix menu on small devices */
@media screen and (max-width:450px) {
.col-xs-6 {
clear: both !important;
width: 100% !important;
}
}

Bekannte Einschränkungen

Aktuell nutzen Widgets für Einzelplatzangebote immer die Konfiguration des zugehörigen Museums.