Beispiel: Zimmerübersicht
Zuallererst muss das neue Contentelement im TypoScript definiert werden:
Typoscript
plugin.tx_bh.settings.contentElements.zimmerListe < plugin.tx_bh.settings.contentElements.bhGroup
plugin.tx_bh.settings.contentElements.zimmerListe {
styleOptions >
hidden = 0
name = Zimmer Liste
bheListgroup = 3
templateFile = zimmerliste.html
templatePath = fileadmin/templates/elements/zimmerliste
}
In diesem Fall wird ein neues Contentelement mit dem Namen "Zimmer Liste" angelegt. Dieses greift auf eine Template-Datei mit dem Namen zimmerliste.html im Ordner fileadmin/templates/elements/zimmerliste zurück. Diese Datei kann am Webspace einfach via FTP angelegt werden.
Beispielinhalt zimmerliste.html:
HTML
{namespace bh=TYPO3\Bh\ViewHelpers}
{namespace hapi=TYPO3\BhHapi\ViewHelpers}
<bh:tmpl.element object="{cObj}">
<!-- alle Zimmer -->
<hapi:get.room.list>
<!-- Zimmerliste mit CSS Klassen für das mitgelieferte JS und natürlich zum Stylen -->
<hapi:room.list tag="ul">
<!-- Zimmer mit CSS Klassen für das mitgelieferte JS und natürlich zum Stylen -->
<hapi:room tag="li">
<!-- Titel dieses Zimmers ausgeben -->
<h2>{room.title}</h2>
<!-- erstes Bild dieses Zimmers -->
<hapi:image src="{room.images.0.url}" width="500c" height="250c"/>
<!-- formatierter Ab-Preis dieses Zimmers -->
<hapi:format.price value="{room.price.min}" />
<!-- Link zur Detailansicht dieses Zimmers -->
<hapi:button.room.detail>Detailansicht</hapi:button.room.detail>
</hapi:room>
</hapi:room.list>
</hapi:get.room.list>
</bh:tmpl.element>
Am Beginn der Datei werden die notwendigen Bakehouse und HAPI ViewHelper geladen. Diese Zeilen sind wichtig, um das Funktionieren der folgenden Code-Bausteine zu gewährleisten:
HTML
{namespace bh=TYPO3\Bh\ViewHelpers}
{namespace hapi=TYPO3\BhHapi\ViewHelpers}
Mit folgendem Tag wird ein Bakehouse-Contentelement umschlossen. Dadurch wird dem folgenden Code erklärt, dass es ein Element ist:
HTML
<bh:tmpl.element object="{cObj}">
#ElementContent
</bh:tmpl.element>
Im folgenden Block holen wir uns mit <hapi:get.room.list> alle Zimmer von der HAPI Schnittstelle. Diese Daten werden im Anschluss mit <hapi:room.list tag="ul"> abgearbeitet (Schleife) und mit <hapi:room tag="li"> einzeln ausgegeben:
HTML
<hapi:get.room.list>
<!-- Zimmerliste mit CSS Klassen für das mitgelieferte JS und natürlich zum Stylen -->
<hapi:room.list tag="ul">
<!-- Zimmer mit CSS Klassen für das mitgelieferte JS und natürlich zum Stylen -->
<hapi:room tag="li">
#Zimmer Inhalt
</hapi:room>
</hapi:room.list>
</hapi:get.room.list>
Innerhalb von <hapi:room tag="li"> kann auf die einzelnen Werte eines Zimmers zugegriffen werden. In folgendem Beispiel wird der Title eines Zimmers innerhalb eines <h2>-Tags ausgegeben:
HTML
<h2>{room.title}</h2>
Mit folgendem Tag wird ein Bakehouse Background-Image ViewHelper mit dem externen Bild als Quelle erstellt. Der Tag unterstützt alle Funktionen die auch der bh:image.background-ViewHelper unterstützt (z. B. Lazy Loading, Responsive Steps, ...)
HTML
<hapi:image.background file="https://example.com/images/image.jpeg">
</hapi:image.background>
Widget-ViewHelper
Alle Booking-Widgets werden für die Anwendung in einem Bakehouse über ViewHelper bereitgestellt. Dabei werden die HAPI-Konfigurationen im TypoScript für die Generierung des Script-Imports herangezogen und abhängig vom loadscript-Wert geladen.
Achtung
Widgets nur über ViewHelper aufrufen
Werden die Widgets direkt über die Widget-Tags (z. B. <hapi-liveprice-room ...>) verwendet, wird das Script nicht geladen, wenn loadscript auf auto gesetzt wurde.
Widget-Elemente
Restplatzbörse/Rateplan-List
Das Restplatzbörse-Element wird vom Bakehouse Core bereitgestellt und kann mit folgendem TypoScript aktiviert werden:
Typoscript
plugin.tx_bh.settings.contentElements.el-rateplan-list.hidden = 0