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 > Bearbeiten > Circle 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 Engines > Styling > 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;
}
Erweiterte 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://bakehouse.at/[...]",
icon: "pin", // Bakehouse-Icons
},
},
// Website-Verlinkung
website: {
// Standard link -> Web-Adresse von Seekda > Allgemein
/* text: "URL" */
},
// Overlay-Tabs
tabs: {
// Tab-Keys: booking, packagelist, rateplanlist
rateplanlist: {
text: "Spezialangebote",
icon: "briefcase",
title: "Finde dein Spezialangebot!"
}
}
},
{
/* Ü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://bakehouse.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.