Booking Templates für Content-Elemente

    Mit HAPI ViewHelpern kann einfach auf Daten zugegriffen werden. Werden diese ViewHelper in Contentelementen verwendet, kann zum Beispiel einfach eine Zimmerübersicht erstellt werden.

    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="http://www.bakehouse.at/uploads/tx_bh/bildXY.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.