Bakehouse KUBE

    Einbindung und Installation

    Um die Bakehouse KUBE einzubinden, müssen folgende Einstellungen im Seekda-Back-end konfiguriert werden.

    JavaScript

    Unter Booking Engines > Übersicht > BearbeitenCircle Konfiguration muss die Einstellung Benutzerdefinierter Javascript-Code auf Ja gesetzt werden. Im Feld Benutzerdefiniertes JS darunter wird folgendes Script eingefügt. Dabei muss der TOKEN mit der jeweiligen HAPI-ID ersetzt werden:

    Javascript
    /* Bakehouse KUBE - START */ (function (t, c, l) { window.bookingFlowCustomTracking.pushHandler("pageLoaded", function (eventData) { var f = document.getElementsByTagName("script")[0]; j = document.createElement("script"); j.async = true; j.setAttribute("id", "hapi-kube"); j.src = "https://hapi.bakehouse.at/kube/"; j.onerror = function () { var url = new URL(window.location); url.searchParams.append("skd-vanilla-mode", "true"); fetch("https://hapi.bakehouse.at/api/kubelog", { method: "POST", headers: { Accept: "application/json", "Content-Type": "application/json", }, body: JSON.stringify({ message: "Load-Error: " + window.location }), }); window.location = url.href; }; window.hapiToken = t; window.hapiConfig = c; window.hapiTranslations = l; f.parentNode.insertBefore(j, f); }); })("TOKEN", {}, {}); /* Bakehouse KUBE - END */

    CSS

    Damit das Styling der KUBE von den Widgets angenommen werden kann, muss folgender CSS-Block unter Booking EnginesStyling > Bearbeiten > Erweiterter Modus im Feld CSS (LESS Syntax) eingefügt werden. 

    CSS
    /* Bakehouse KUBE - START */ :root { --mainColor: @mainColor; --secondaryColor: @secondaryColor; --accentColor: @accentColor; --buttonsBackground: @buttonsBackground; --baseFontFamily: @baseFontFamily; --baseFontSize: @baseFontSize; --baseLineHeight: @baseLineHeight; --baseFontColor: @baseFontColor; --headingsFontFamily: @headingsFontFamily; --headingsFontColor: @headingsFontColor; --containerBackground: @containerBackground; --cardBackground: @cardBackground; --cardColor: @cardColor; --cardColorSecondary: @cardColorSecondary; --baseBorderRadius: @baseBorderRadius; --colorOverContrast: @colorOverContrast; --colorOverContrastHover: @colorOverContrastHover; --linksColor: @linksColor; --linksColorHover: @linksColorHover; --linksColorActive: @linksColorActive; --buttonBasicBackground: @buttonBasicBackground; --buttonBasicBorderColor: @buttonBasicBorderColor; --buttonBasicFontFamily: @buttonBasicFontFamily; --buttonBasicFontColor: @buttonBasicFontColor; --buttonBasicFontWeight: @buttonBasicFontWeight; --buttonBasicBorderRadius: @buttonBasicBorderRadius; --buttonBasicTextTransform: @buttonBasicTextTransform; --buttonBasicBoxShadow: @buttonBasicBoxShadow; --buttonBasicTextShadow: @buttonBasicTextShadow; --buttonBasicHoverBackground: @buttonBasicHoverBackground; --buttonBasicHoverBorderColor: @buttonBasicHoverBorderColor; --buttonBasicHoverFontColor: @buttonBasicHoverFontColor; --buttonBasicHoverBoxShadow: @buttonBasicHoverBoxShadow; --buttonBasicHoverTextShadow: @buttonBasicHoverTextShadow; --buttonBasicActiveBackground: @buttonBasicActiveBackground; --buttonBasicActiveBorderColor: @buttonBasicActiveBorderColor; --buttonBasicActiveFontColor: @buttonBasicActiveFontColor; --buttonBasicActiveBoxShadow: @buttonBasicActiveBoxShadow; --buttonBasicActiveTextShadow: @buttonBasicActiveTextShadow; --buttonPrimaryBackground: @buttonPrimaryBackground; --buttonPrimaryBorderColor: @buttonPrimaryBorderColor; --buttonPrimaryFontFamily: @buttonPrimaryFontFamily; --buttonPrimaryFontColor: @buttonPrimaryFontColor; --buttonPrimaryFontWeight: @buttonPrimaryFontWeight; --buttonPrimaryBorderRadius: @buttonPrimaryBorderRadius; --buttonPrimaryTextTransform: @buttonPrimaryTextTransform; --buttonPrimaryBoxShadow: @buttonPrimaryBoxShadow; --buttonPrimaryTextShadow: @buttonPrimaryTextShadow; --buttonPrimaryHoverBackground: @buttonPrimaryHoverBackground; --buttonPrimaryHoverBorderColor: @buttonPrimaryHoverBorderColor; --buttonPrimaryHoverFontColor: @buttonPrimaryHoverFontColor; --buttonPrimaryHoverBoxShadow: @buttonPrimaryHoverBoxShadow; --buttonPrimaryHoverTextShadow: @buttonPrimaryHoverTextShadow; --buttonPrimaryActiveBackground: @buttonPrimaryActiveBackground; --buttonPrimaryActiveBorderColor: @buttonPrimaryActiveBorderColor; --buttonPrimaryActiveFontColor: @buttonPrimaryActiveFontColor; --buttonPrimaryActiveBoxShadow: @buttonPrimaryActiveBoxShadow; --buttonPrimaryActiveTextShadow: @buttonPrimaryActiveTextShadow; --buttonSecondaryBackground: @buttonSecondaryBackground; --buttonSecondaryBorderColor: @buttonSecondaryBorderColor; --buttonSecondaryFontFamily: @buttonSecondaryFontFamily; --buttonSecondaryFontColor: @buttonSecondaryFontColor; --buttonSecondaryFontWeight: @buttonSecondaryFontWeight; --buttonSecondaryBorderRadius: @buttonSecondaryBorderRadius; --buttonSecondaryTextTransform: @buttonSecondaryTextTransform; --buttonSecondaryBoxShadow: @buttonSecondaryBoxShadow; --buttonSecondaryHoverBackground: @buttonSecondaryHoverBackground; --buttonSecondaryHoverBorderColor: @buttonSecondaryHoverBorderColor; --buttonSecondaryHoverFontColor: @buttonSecondaryHoverFontColor; --buttonSecondaryHoverBoxShadow: @buttonSecondaryHoverBoxShadow; --buttonSecondaryActiveBackground: @buttonSecondaryActiveBackground; --buttonSecondaryActiveBorderColor: @buttonSecondaryActiveBorderColor; --buttonSecondaryActiveFontColor: @buttonSecondaryActiveFontColor; --buttonSecondaryActiveBoxShadow: @buttonSecondaryActiveBoxShadow; } body > [data-reactroot] { opacity: 0; } body.hapi-w-loaded > [data-reactroot] { opacity: 1 !important; transition: opacity 1s ease 0s; } /* Bakehouse KUBE - END */

    In der KUBE werden Boxen, Bilder und Schaltflächen wie Buttons standardmäßig mit runden Ecken dargestellt. Der folgende Code setzt die runden Ecken zurück. Diesen vor den Variablen im oberen CSS-Block einfügen.

    CSS
    @baseBorderRadius: 0px; @borderSearchInputRadius: 0px; @baseBorderRadiusCommon: 0px;

    Styling

    Da die Bakehouse KUBE Optik direkt vom KUBE-Styling abhängt, müssen keine weiteren Anpassungen der Widgets vorgenommen werden. Optional können noch folgende Variablen im CSS zur Individualisierung gesetzt werden:

    CSS
    :root { --hapi-kube-top-bar-background: #ffffff; --hapi-kube-top-bar-background-contrast: var(--hapi-background-contrast); --hapi-kube-top-bar-color: var(--hapi-color-text); --hapi-kube-booking-bar-background: #ffffff; --hapi-kube-booking-bar-background-contrast: var(--hapi-background-contrast); --hapi-kube-booking-bar-color: var(--hapi-color-text); --hapi-error-color: #db6060; --hapi-error-color-text: #ffffff; }

    Konfiguration

    Über die Config und Translations Parameter des Einbindungsscripts können zusätzliche/optionale Konfigurationen und Übersetzungen konfiguriert werden. Folgendes Beispiel zeigt die momentanen Einstellungsmöglichkeiten:

    Javascript
    /* Bakehouse KUBE - START */ (function (t, c, l) { ... })( "TOKEN", { /* Konfiguration */ // Anfrage URL für nicht verfügbare Zimmer inquiryUrl: "https://www.bakehouse.at/produkte/bakehouse-produkte/booking/buchen-anfragen/", // Kontakt-Optionen contacts: { // Standard: phone, mail -> Daten von Seekda > Allgemein // Beispiele für Erweiterungen whatsapp: { text: "WhatsApp", link: "https://api.whatsapp.com/[...]", icon: "whatsapp", // Bakehouse-Icons }, anreise: { text: "Anreise", link: "https://cookis.at/[...]", icon: "pin", // Bakehouse-Icons }, }, // Website-Verlinkung website: { // Standard link -> Web-Adresse von Seekda > Allgemein /* text: "URL" */ }, }, { /* Übersetzungen */ // Beispiele für Englisch en: { contacts: { // Standard Texte/Werte überschrieben phone: { text: "Call us", }, // Individuelle Konfigurationen übersetzen anreise: { text: "Arrival", }, }, // Links in Sprachen überschreiben website: { link: "https://cookis.at/en/[...]", }, }, } ); /* Bakehouse KUBE - END */

    Hinweise zur Seekda-Konfiguration

    Header-Konfiguration

    • Seitenverhältnis - Einstellung wirkt sich auch auf die Bakehouse KUBE aus. Es wird empfohlen, das Seitenverhältnis bei der Einrichtung etwas zu vergrößern, da die Top-Bar einen Teil des Banners überdeckt.
    • Hotel Logo - Es wird ein freigestelltes Logo, dass auf die Hintergrundfarbe der Top-Bar abgestimmt ist, empfohlen.
    • Logo auf Desktop/Mobilgeräte anzeigen - Einstellung wirkt sich auch auf die Bakehouse KUBE aus. Empfohlen wird, das Logo sowohl am Desktop als auch auf Mobilgeräten anzuzeigen.
    • Favicon des Hotels - Das Favicon wird von der Bakehouse KUBE nicht angepasst. Es muss daher über Seekda konfiguriert werden.

    Circle Konfiguration

    • Standardeinstellung für Anzahl der Nächte - Die Basis-KUBE setzt beim ersten Aufruf automatisch einen Reisezeitraum. Um zu verhindern, dass die Vorauswahl nicht verfügbar ist, sollte dieser Wert nicht zu hoch gewählt werden.