Zum Hauptinhalt gehen

Wie integriert man das React Booking Widget?

Kay Endörfer
  • Aktualisiert

1. Was ist ein React Booking Widget?

 

Das Buchungs-Widget ist eine Alternative für Anbieter, die bereits eine detaillierte Beschreibung ihrer Angebote zur Verfügung stellen. Mit dem Buchungs-Widget werden nur die über Ihren Ticketshop getätigten Buchungen bearbeitet. Die Präsentation Ihrer Angebote bleibt ganz Ihnen und Ihrer Website überlassen. Die Konfiguration des Widgets befindet sich in Ihrem Regiondo-Konto:
 
 
Hinweis
Klicken Sie auf Booking Widget (React.JS), um das neue Buchungs-Widget zu konfigurieren. Wenn Sie diese Option nicht sehen, senden Sie bitte eine E-Mail an support@regiondo.com.
 

2. Was sind die Vorteile?

  • Einsatz der neuesten Technologie 
  • Schnellere Ladezeiten 
  • Neues und klares Design
  • Die Suchmaschinen-Optimierung ist besser, weil der Inhalt auf die eigene Website geladen wird
  • Es gibt verschiedene Möglichkeiten der Individualisierung, die mit dem alten Widget nicht möglich sind, z.B. Anpassung einzelner Widgets statt aller gleichzeitig, Widget nur für Gutscheine (ohne Ticketverkauf mit Datum) > CSS

 

3. Welche Settings kann ich für das Buchungs-Widget wählen?

Bitte setzen Sie die folgenden Settings bevor Sie Ihren Code generieren:
 
1. Produkt auswählen: Wählen Sie Ihre bevorzugte Sprache und das Angebot, für das Sie den Buchungsprozess als Widget einrichten möchten. Geben Sie die gewünschte Breite des iFrames ein. Sie haben die Wahl zwischen automatisch, Vollbild und einer spezifischen Breite in Pixel.
 
 
2. Ihr HTML-Code: Nachdem Sie die Settings vorgenommen haben, wird automatisch Ihr persönlicher HTML-Code generiert.
 
 
3. Die Vorschau: Es wird eine Vorschau des Buchungs-Widgets angezeigt.
 

 

4. Wo kann das Buchungs-Widget auf der Website platziert werden?

Das Widget wird beim Laden der Seite innerhalb des DIV-Tags dargestellt. Das SCRIPT-Tag kann platziert werden
  • innerhalb des HEAD-Tags, zusammen mit dem DIV-Tag oder 
  • vor dem Schließen des BODY-Tags. 
Wenn mehrere Widget-Codeschnipsel auf derselben Seite implementiert sind, wird jedes DIV-Tag nur einmal verarbeitet.
 
Wichtig
Bitte beachten Sie, dass viele Content-Management-Systeme (CMS) aus Sicherheitsgründen SCRIPT-Tags im Inhalt blockieren. Einige Systeme haben die Möglichkeit, die Beschränkung zu ändern, um SCRIPT-Tags im Inhalt zuzulassen. Wenn es keine Möglichkeit gibt, diese Beschränkung aufzuheben, kann der SCRIPT-Tag der Seite mit dem entsprechenden "Custom Script"-Feld, falls vorhanden, oder durch direkte Änderung der Themendateien hinzugefügt werden.
 
Wichtig
Wenn das Widget dynamisch in die Seite integriert wird, z.B. innerhalb von modalen Popups oder Slide-out-Sidebar-Abschnitten, muss das SCRIPT-Tag des Widgets zuerst auf der Seite geladen werden, damit PayPal korrekt funktioniert, wenn der Kunde nach einem erfolgreichen Kauf oder einer Stornierung der Zahlungsmethode auf die Website zurückkehrt.
 
Hinweis
Um Widgets auf der Wordpress-Website hinzuzufügen, hat Regiondo das Booking Widget Plugin entwickelt. Nach der Installation können Code-Schnipsel als built-in Widgets oder Shortcodes hinzugefügt werden. Lesen Sie hier mehr darüber.
 

5. Wie kann die Widget-Funktionalität individuell angepasst werden?

Die Widget-Funktionalität kann durch Hinzufügen zusätzlicher Attribute zum div-Tag angepasst werden.
 

5.1 Standardmäßig eingestellte Widget-Attribute:

 

Hier ist die Liste der wesentlichen Widget-Attribute:
  • data-locale = "en_US"
Das Attribut gibt den ausgewählten Sprachraum für das Produkt an.
  • data-provider = "RE000"
Das Attribut gibt den individuellen Anbietercode an.
  • data-product = "T-RE000-000000"
Das Attribut gibt den individuellen SKU-Code des ausgewählten Produkts an. Es ist möglich, den SKU-Code des Produkts dynamisch zu ersetzen, um zahlreiche Produkt-Widgets auf der Website leicht zu implementieren.
  • data-url = "https://regiondo-demo.regiondo.com/"
Das Attribut gibt den ausgewählten Produkttitel an. Es ist ein informatives Attribut und kann weggelassen werden.
  • data-font = "Open Sans"
Das Attribut legt die Standardschriftart für das Widget fest. Falls gesetzt, wird die entsprechende Schriftartdatei von Google Fonts geladen. Wenn auf der Website dieselbe Schriftartdatei bereits von Google geladen ist, wird empfohlen, das Laden der Schriftart für das Widget zu deaktivieren. Siehe data-disable-font, wie das Laden von Schriftarten deaktiviert werden kann.
Hier ist die Liste der beliebtesten Schriftarten von Google Fonts:
  • Open Sans
  • Roboto
  • Lato
  • Oswald
  • Source Sans Pro
  • Montserrat
  • PT Sans
  • Raleway 
  • Lora
  • Noto Sans
 
Wichtig
Das Widget lädt keine Schriftartendateien von Google Fonts, wenn die angegebene Schriftart mit einer der Standardsystemschriftarten übereinstimmt:
 
Arial
Verdana
Tahoma
Helvetica
Helvetica Neue
Times New Roman
Times
Courier New
Courier
Georgia
Geneva
Palatino
Palatino Linotype
Candara
Cambria
Calibri
Segoe UI
Garamond
Bookman
Book Antiqua
Lucida Sans Unicode
Lucida Grande
Consolas
Avant Garde
Comic Sans MS
Trebuchet MS
Arial Black
Impact
 
  • data-width = "400px"
Das Attribut legt die maximale Breite des Widgets fest. Der Standardwert ist auto, was bedeutet, dass das Widget den gesamten verfügbaren Platz in der Breite einnimmt. Wenn die maximale Breite des Widgets begrenzt werden muss, kann der Wert fest auf "400px" oder prozentual auf "50%" eingestellt werden. Er kann weggelassen werden, um das Widget responsiv zu halten.
 
  • data-layout = "fullscreen"
Dieses Attribut erscheint anstelle der als " Fullscreen" gewählten Datenbreite. Wenn dieses Attribut ausgewählt ist, wird das Widget absolut positioniert, wobei Breite und Höhe auf 100% gesetzt werden, um den gesamten verfügbaren Platz abzudecken. Dies ist nützlich, wenn das Widget innerhalb der Lightbox oder Slide-out-Sidebar implementiert wird.

5.2 Zusätzliche Widget-Attribute:

 

  • data-gift-option = "true"
Das Attribut ermöglicht es, die Settings der Geschenkoption des Produkts im Dashboard zu überschreiben. Wenn dieses Attribut auf "true" gesetzt ist, zwingt dieses Attribut das Widget zur Anzeige der Produkt- und Geschenk-Schaltfläche. Wenn es auf " false " gesetzt ist, wird die Geschenkoption deaktiviert und die Schaltflächen werden ausgeblendet.
  • data-gift-option-highlighted = "true"
Zusätzlich zur data-gift-option erlaubt dieses Attribut, die Settings zur Anzeige der Geschenkoption als standardmäßig aktiviert zu überschreiben. Wenn auf " true " gesetzt, wird die Geschenkoption aktiv sein. Wenn es auf "false" gesetzt ist, ist die Schaltfläche "Produkt" aktiv und die Schaltfläche "Geschenk" inaktiv.
  • data-gift-option-only = "true"
Das Attribut erlaubt es, das Widget ausschließlich mit der Option "Geschenk" anzuzeigen. Wenn es auf "true" gesetzt ist, werden die Widget-Schaltflächen ausgeblendet und nur die Geschenkoption ist verfügbar. 
Dies ist für zusätzliche Flexibilität nützlich, wenn es erforderlich ist, die Terminbuchung aufgrund von vorübergehenden Schwierigkeiten oder Renovierungen zu deaktivieren.
  • data-date = "2020-12-31"
Das Attribut ermöglicht es, ein vorgewähltes Datum für eine Buchung festzulegen, das als "YYYY-MM-DD:" formatiert ist. Wenn es gesetzt ist, wird das angegebene Datum im Kalender ausgewählt. Der Kunde kann das Datum immer noch ändern. Dies ist nützlich, wenn die Website eine Veranstaltungsliste oder einen Kalender hat und das Widget für ein bestimmtes Datum in einer Lightbox geöffnet werden soll.
  • data-time = "20:20"
Zusätzlich zu data-date ermöglicht dieses Attribut die Festlegung einer vorgewählten Zeit für eine Buchung, formatiert als "HH:MM". Falls es gesetzt ist, wird die angegebene Zeit eines Termins ausgewählt. Der Kunde kann die vorgewählte Zeit weiterhin ändern.
  • data-maximum-months = "2"
Das Attribut erlaubt es, die maximale Anzahl von Monaten festzulegen, die gleichzeitig im Kalender angezeigt werden sollen. Das Widget hat eine adaptive Breite und je nach verfügbarem Platz kann der Kunde bis zu 6 Kalendermonate sehen. Dieses Attribut ist nützlich, wenn die Anzahl der Kalendermonate begrenzt werden muss, z.B. wenn die Breite eines einzelnen Kalendermonats durch benutzerdefiniertes CSS beeinflusst wird und nur ein Monat in eine Zeile passt.
  • data-step = "cart"
Das Attribut legt fest, dass das Widget einen bestimmten Schritt als Anfangsschritt öffnet. Mit einem leeren Wert oder wenn es weggelassen wird, verhält sich das Widget normal. Wenn es z.B. auf "cart" gesetzt ist, lädt das Widget die Warenkorb-Ansicht. 
Dieses Attribut kann verwendet werden, um das Widget auf einer separaten Warenkorb-Seite der Website anzuzeigen, z.B. wo der Kunde durch Klicken auf den Warenkorb-Button in der Kopfzeile hinkommt. Oder wenn es erforderlich ist, um einen zusätzlichen Schritt zur Kaufabwicklung hinzuzufügen. 
Mögliche Werte sind: "cart", "contact", "payment", and "shipping".
  • data-skip-cart = "true"
Das Attribut erlaubt es, das Standardverhalten des Widgets so zu ändern, sodass der Schritt Einkaufswagen übersprungen wird. Wenn auf "true" gesetzt, geht der Kunde, nachdem er das Produkt in den Warenkorb gelegt hat, direkt zur Kasse.
  • data-disable-loading-animation = "true"
Das Attribut erlaubt es, die Animation beim Laden von Widgets zu deaktivieren. 
Dies ist nützlich, wenn die Website ihre eigene Ladeanimation hat.
  • data-disable-font = "true"
Das Attribut erlaubt es, das Laden von Schriftartdateien aus Google Fonts, die unter "data-font" angegeben sind, zu deaktivieren. Wenn die Website bereits die gleiche benutzerdefinierte Schriftart hat, wird empfohlen, dieses Attribut auf "true" zu setzen, um zusätzliche Requests beim Laden der Seite zu vermeiden.
  • data-font-size = "16px"
Das Attribut legt die Standardschriftgröße für das Widget fest. Dadurch kann die Standardschriftgröße des Widgets leicht geändert werden, um es der Typographie der Website besser anzupassen. Es kann auch hilfreich sein, wenn die Website eine adaptive Schriftgröße hat, die sich an der Bildschirmbreite der Besucher orientiert.
  • data-font-size-large = "20px"
Ähnlich wie "data-font-size" legt das Attribut die Schriftgröße für Titel, Produktnamen, Schaltflächen usw. fest.
  • data-font-size-small = "14px"
Ähnlich wie "data-font-size" legt das Attribut die Schriftgröße für Notiztext, Eingabefeldbezeichnungen usw. fest.
  • data-padding = "0" or data-padding = "20px"
Das Attribut legt die horizontalen Ränder für die linke und rechte Seite der Elemente innerhalb des Widgets fest. Dies ermöglicht das Entfernen von Padding, wenn ein Widget auf einer Website mit integrierten Rahmen implementiert wird.
  • data-disable-currency-dropdown="true"
Das Attribut ermöglicht es, die Dropdown-Liste Währung zu deaktivieren.
  • data-disable-language-dropdown="true"
Das Attribut ermöglicht die Deaktivierung der Dropdown-Liste Sprache. 
  • data-disable-cart-button="true"
Wenn der Einkaufswagen nicht leer ist, kann der Inhalt des Einkaufswagens mit dem "Go to Cart"-Button überprüft werden. Dieses Attribut erlaubt es, den Button auszublenden, um das Widget weniger hoch zu machen, wenn der Platz für das Widget auf einer Seite begrenzt ist.
  • data-disable-reservation-timer="true"
Dieses Attribut ist auch hilfreich, um die Höhe der Widgets zu verringern, indem der Reservierungs-Countdown auf der Seite des Warenkorbs ausgeblendet wird.
  • data-disable-back-button="true"
Das Attribut erlaubt es, den Button "Zurück" auf dem Einkaufswagen und beim Checkout zu deaktivieren, was für Widget-Implementierungen innerhalb kleiner modaler Fenster hilfreich ist, wenn zusätzliche Buttons "Schließen" zur Verfügung stehen, um die Produktauswahl neu zu starten.
  • data-disable-cart-coupon="true"
Wenn Rabattcodes und Gutscheine nicht verwendet werden oder das Rabattcode-Feld für bestimmte Produkte oder für einen kurzen Zeitraum ausgeblendet werden soll, kann dieses Attribut hilfreich sein.
  • data-disable-invoice-form="true"
Dieses Attribut erlaubt es, das Rechnungsformular im Schritt "Kontakt" beim Checkout auszublenden, um den Checkout-Prozess weniger komplex zu gestalten.
 

6. Wie kann die Funktionalität der Widgets mit CSS angepasst werden?

 

Das neue Booking Widget kann leicht mit CSS angepasst werden, da alle Widget-Inhalte auf der Seite ohne iFrames dargestellt werden. Dazu müssen CSS-Regeln mit einer .css-Datei und <link>-Tag oder nur mit <style></style>-Tags auf der Website hinzugefügt werden.
 
1. Wenn es möglich ist, eine CSS-Datei auf den Server hochzuladen, wird empfohlen, eine CSS-Datei mit dem Tag <link> hinzuzufügen, da die CSS-Datei vom Browser nach dem Laden der ersten Seite zwischengespeichert wird. Um die Datei "custom.css" mit allen darin enthaltenen CSS-Regeln zu verknüpfen, können Sie sie wie folgt in den Abschnitt <head> der Webseite einfügen:
 
<link rel="stylesheet" href="/css/custom.css">
2. Wenn es keine Möglichkeit gibt, den Link-Tag im Head hinzuzufügen, ist es möglich, die CSS-Datei wie folgt mit Javascript einzufügen: 
 
<script>
(function(d) {
    var css = d.createElement('link');
    css.setAttribute('rel', 'stylesheet');
    css.setAttribute('href', '/css/custom.css');
    d.getElementsByTagName('head')[0].appendChild(css);
}(document));
</script>
Andernfalls können CSS-Regeln innerhalb der <style> </style>-Tags platziert und an beliebiger Stelle in die Seite eingefügt werden, und zwar wie folgt:
 
<style>
.regiondo-booking-widget {
    border:2px solid #d0d0d0;
}
</style>

 

7. Wie können Texte und Übersetzungen geändert werden?

Spezielle CSS-Regeln erlauben es, nicht nur die Farben oder Stile von html-Elementen, sondern auch den Textinhalt zu ändern.  
 
Hier einige Beispiele, wie der Text verschiedener Elemente innerhalb des Booking Widgets geändert werden kann.
 

7.1 Text von Produkt und Geschenk-Schaltflächen

Dieses Beispiel zeigt auch, wie der Text eines spezifischen Sprachgebiets geändert werden kann:
 
Code: 
<style>
.regiondo-widget .regiondo-tabs__tab[data-tab="product"]:after {
    content: 'Ticket';
}
.regiondo-widget .regiondo-tabs__tab[data-tab="gift"]:after {
    content: 'Gift';
}
.regiondo-booking-widget[data-locale="de_DE"] .regiondo-tabs__tab[data-tab="product"]:after {
    content: 'Eintrittskarte';
}
.regiondo-booking-widget[data-locale="de_DE"] .regiondo-tabs__tab[data-tab="gift"]:after {
    content: 'Geschenk';
}
</style>
Ergebnis:

 

7.2 Text der Einleitungszeile

In einigen Fällen kann zum Überschreiben einer Regel "!important" hinzugefügt werden. Es ist jedoch besser, spezifischere Regeln zu verwenden. Durch Angabe eines oder mehrerer Elemente vor dem Zielelement wird die Regel spezifischer und erhält höhere Priorität
 
Hinweis
Wenn Sie innerhalb des Widgets CSS die gleichen CSS-Klassen wie in Ihrer Website verwenden, kann es vorkommen, dass es überschrieben wird. Um CSS-Regeln mit Ihren eigenen CSS-Regeln zu überschreiben, können Sie "!important" verwenden.
 
Code:
<style>
.regiondo-widget .regiondo-intro-text:after {
    content: 'Choose a date below to see available times:' !important;
}
</style>
Code:
<style>
.regiondo-widget .regiondo-content .regiondo-intro-text:after {
    content: 'Choose a date below to see available times:';
}
</style>
Ergebnis:

 

7.3 Titeltext des Schrittes Datum/Uhrzeit/Option

Manche Elemente haben spezifische Klassen, die auf dem Status des Elements oder der Benutzeraktion beruhen und die verwendet werden können, um Text zu ändern, auch nachdem der Benutzer eine Option ausgewählt hat:
 
Code:
<style>
.regiondo-widget .regiondo-step-variation .regiondo-step__title:after {
    content: 'Select an Option';
}
.regiondo-widget .regiondo-step-date .regiondo-step__title:after {
    content: 'Select a Date';
}
.regiondo-widget .regiondo-step-time .regiondo-step__title:after {
    content: 'Select a Time';
}
.regiondo-widget .regiondo-step-variation.regiondo-step--selected .regiondo-step__title:after {
    content: 'Option:';
}
.regiondo-widget .regiondo-step-date.regiondo-step--selected .regiondo-step__title:after {
    content: 'Date:';
}
.regiondo-widget .regiondo-step-time.regiondo-step--selected .regiondo-step__title:after {
    content: 'Time:';
}
</style>
Ergebnis:

 

7.4 Text von Zeitfenstern

Im Schritt der Zeitauswahl gibt es Titel für Zeiträume. Die Zeitfenster sind durch Perioden getrennt:
  • von 0 bis 5 Uhr ist "Night" (Nacht)
  • von 6 bis 11 Uhr ist "Morning" (Morgen)
  • von 12 bis 17 Uhr ist "Afternoon" (Nachmittag)
  • von 18 bis 23 Uhr ist "Evening" (Abend)
 
Diese Zeitfenstertitel können mit CSS wie folgt geändert werden:
Code:
<style>
.regiondo-widget .regiondo-times__period.regiondo-times--night:after {
    content: 'NIGHT:';
}
.regiondo-widget .regiondo-times__period.regiondo-times--morning:after {
    content: 'MORNING:';
}
.regiondo-widget .regiondo-times__period.regiondo-times--afternoon:after {
    content: 'AFTERNOON:';
}
.regiondo-widget .regiondo-times__period.regiondo-times--evening:after {
    content: 'EVENING:';
}
</style>
Ergebnis:
Alternativ können die Zeitfenstertitel ausgeblendet werden. Mit Hinzufügen von "display: inline" wird bei Bedarf die Unterteilung in Zeitgruppen entfernt:
 
Code:
<style>
.regiondo-widget .regiondo-times__period {
    display: none;
}
.regiondo-widget .regiondo-times__group {
    display: inline;
}
</style>
Ergebnis:

 

7.5 Text der Buttons "In den Warenkorb" und "Zur Kasse"

 

Hier ist ein Beispiel für die Änderung des Button-Textes, einschließlich der Groß- und Kleinschreibung:
Code:
<style>
.regiondo-widget .regiondo-addtocart .regiondo-button-addtocart:after {
    content: 'Add to Cart';
}
.regiondo-booking-widget[data-locale="de_DE"] .regiondo-addtocart .regiondo-button-addtocart:after {
    content: 'In den Warenkorb';
}
.regiondo-widget .regiondo-button.regiondo-button-checkout:after {
    content: 'Proceed to Checkout';
    text-transform:uppercase;
}
.regiondo-booking-widget[data-locale="de_DE"] .regiondo-button.regiondo-button-checkout:after {
    content: 'Zur Kasse';
    text-transform:uppercase;
}
</style>
Ergebnis:

 

7.6 Text der Buttons "Einkauf fortsetzen" und "Code einlösen"

Dieses Beispiel zeigt, wie der Text der sekundären Schaltflächen sowie der Text auf der Ansicht des leeren Einkaufswagens geändert werden kann. Die Elemente haben dieselben Klassennamen für verschiedene Seiten, und um sie zu unterscheiden, müssen wir die Regeln noch genauer spezifizieren: To distinguish them we need to add more specificity to our rules:
 
Code:
<style>
.regiondo-widget .regiondo-cart .regiondo-cart-buttons .regiondo-button-continue:after {
    content: '« Back';
}
.regiondo-widget .regiondo-cart .regiondo-cart-buttons .regiondo-button-coupon:after {
    content: 'Have a Coupon?';
}

.regiondo-widget .regiondo-empty-cart .regiondo-cart-buttons .regiondo-button-continue:after {
    content: '« Back to Product';
}
.regiondo-widget .regiondo-empty-cart-text:after {
    content: 'Shopping cart is empty.' !important;
}
</style>
Ergebnis:
 

7.7 Text der Fortschrittsschritte an der Kasse


Die Fortschrittsschritte werden im Warenkorb und im Kassenbereich angezeigt. Hier finden Sie eine Liste aller verfügbaren Checkout-Schritte:


Warenkorb
Hinzufügen
Kontakt
Versand
Zahlung


Die Schritte "Add-On" und "Versand" sind nur sichtbar, wenn ein Add-On (Merchandising) Produkt in den Warenkorb gelegt wurde. Wenn der zu zahlende Gesamtbetrag Null ist, wird der Zahlungsschritt deaktiviert.
Dieses Beispiel zeigt, wie Sie den Text der Schritte im Checkout-Fortschritt ändern können:

 

Code:
<style>
.regiondo-widget .regiondo-checkout-progress .regiondo-progress__cart:after {
    content: 'Cart';
}
.regiondo-widget .regiondo-checkout-progress .regiondo-progress__addons:after {
    content: 'Add-On';
}
.regiondo-widget .regiondo-checkout-progress .regiondo-progress__contact:after {
    content: 'Contact';
}
.regiondo-widget .regiondo-checkout-progress .regiondo-progress__shipping:after {
    content: 'Shipping';
}
.regiondo-widget .regiondo-checkout-progress .regiondo-progress__payment:after {
    content: 'Payment';
}

/* Disable Uppercase */
.regiondo-widget .regiondo-checkout-progress div:after {
    text-transform:none !important;
}

/* Remove Progress steps counter */
.regiondo-widget .regiondo-checkout-progress div::before {
    content:'' !important;
}
</style>
 
Alternativ können Fortschrittsschritte auch wie folgt ausgeblendet werden: 
Code:
<style>
/* Hide Progress steps on Cart only */
.regiondo-widget .regiondo-checkout--cart .regiondo-checkout-progress {
    display:none;
}

/* Hide Progress steps completely */
.regiondo-widget .regiondo-checkout .regiondo-checkout-progress

Verwandte Beiträge