Landingpages

Das Bakehouse Landingpages-Modul erweitert das Bakehouse um eigenständige Einzelseiten mit klar vorgegebener Struktur, die unabhängig von der Hauptwebsite veröffentlicht werden. Anwendungsfälle für Landingpages sind beispielsweise Kampagnenseiten, Pauschalen, saisonale Angebote und Event-Seiten.

Die Wartung ist, wie im Bakehouse üblich, einfach über das Front-End möglich. Das mitgelieferte Set an vorgefertigten Elementen ist auf die typischen Anwendungsfälle von Landingpages abgestimmt und ermöglicht eine schnelle Umsetzung.
Folgende Elemente sind enthalten:

Text
Bild
Bilder-Galerie
Video
Button
Tabs
Akkordeons
Bewertungen
Rezensionen
Partner-Logos
Zimmer-Swiper
Angebots-Swiper
Formular-Manager

Um die schnelle und unkomplizierte Erstellung von Landingpages zu gewährleisten, sollten keine zusätzlichen Elemente eingebunden werden. Jede Erweiterung erhöht den Pflegeaufwand und widerspricht dem Grundgedanken des Moduls, mit einer klar definierten und funktionierenden Basis schnell live gehen zu können.

Domain Setup

Landingpages-Projekte müssen unter einer eigenen Subdomain laufen. Daher bitte zuerst den DNS Verwalter kontaktieren, um einen A-Record für eine Subdomain (z. B. offer.*.*) anzulegen, der auf die richtige IP-Adresse zeigt (dort, wo das Bakehouse mit dem Landigpages-Modul installiert ist).

Sobald die Subdomain auf die entsprechende IP-Adresse zeigt, muss diese als Aliasdomain (Redirect Type: No Redirect & Auto-Subdomain: None Einstellungen) von Cookis registriert werden.

Anschließend muss im TYPO3 Back-End auf "Sites" gewechselt und dort der Entry Point mit der richtigen Subdomain eintragen werden.

Zuletzt muss in der Datei /config/sites/bh_landingpages/config.yaml der Eintrag base und in der Datei /config/sites/bh_landingpages/settings.yaml die baseURL entsprechend angepasst werden.

In der .htaccess-Datei sollten letztendlich die Redirects für Subdomains kontrolliert und gegebenenfalls angepasst bzw. erweitert werden.
Siehe folgendes Beispiel mit einer "www" & "offer" Subdomain:

Apache Config

## redirect to form "domain.tld" to "www.domain.tld" (http, https) RewriteCond %{HTTP_HOST} !^www\. [NC] RewriteCond %{HTTP_HOST} !^offer\. RewriteRule ^(.*)$ https://www.%{HTTP_HOST}/$1 [R=301,L] RewriteCond %{SERVER_PORT} 80 RewriteCond %{HTTP_HOST} !^www\. RewriteCond %{HTTP_HOST} !^offer\. RewriteRule ^(.*)$ https://www.%{HTTP_HOST}/$1 [R=301,L] RewriteCond %{SERVER_PORT} 80 RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1 [R=301,L]

Cache löschen.

Anpassungen

Die Anpassungen sollten sich auf die folgenden Punkte beschränken. Diese sind so gewählt, dass sich damit alle typischen Anforderungen abdecken lassen, ohne den modularen Aufbau und die schnelle Umsetzbarkeit zu gefährden.

Asset Files

/assets/README

Logos: SVG Files in /assets/logos/ - /assets/logos/README
E-Mail Logo: /assets/mail/logo.png - /assets/mail/README
Fonts: Font Files in /assets/fonts/ - /assets/fonts/README

Variablen

/css/main.css durchgehen und Variablen-Werte entsprechend den in Figma definierten Variablen anpassen.

Konfiguration

/typoscript/constants.typoscript durchgehen und Werte entsprechend anpassen.

config.mode.dev für Go-Live ausschalten!

Texte & Übersetzungen

/typoscript/translations.typoscript durchgehen und Text-Werte entsprechend den in Figma definierten Variablen anpassen.

Mehrsprachigkeit

Die jeweilige Sprache im TYPO3-Back-End hinzufügen.

Die Option "Use from existing language" verwenden, Spracheinstellungen anpassen/kontrollieren (da nicht alles übernommen wird), und in /typoscript/constants.typoscript config.mode.multilang auf 1 setzen.

Booking

Für die HAPI in /typoscript/constants.typoscript & /elements/el-hapi/el-hapi.js den HAPI Code anpassen.

Eine Landingpage erstellen

Einzelne Landingpages können als Seiten in der Seitenstruktur angelegt werden. Die verfügbaren Elemente werden links in der Toolbar aufgelistet und können per docucrosshair Drag & Drop eingefügt und über die Element-Einstellungen angepasst werden.

Grundlegender Seitenaufbau

Header-Element im Header-Inhaltsbereich
Sektionen-Element im Haupt-Inhaltsbereich
CTA im CTA-Inhaltsbereich

Diese Elemente müssen bei jeder neu erstellten Seite eingefügt werden.

Mit dem Sektionen-Element kann mittels bh-font-add eine Sektion hinzugefügt werden, zu der dann über die Anker-Links schnell navigiert werden kann.

Die Befüllung erfolgt wie vom Bakehouse Interface bereits bekannt.