Durchbruch und Erleichterung

Kennt ihr das: Man will etwas tun, von dem man denkt, dass es nicht so schwer sein kann, obwohl man es noch nie getan hat. Und als man es dann angeht, stellt man fest, dass es doch nicht so leicht ist, wie gedacht.

So ging es mir heute mit der Integration eines Akkordeon-Moduls von Boostrap4 in TYPO3.
Die HTML-Vorlage für das Akkordeon hatte ich schon länger fertig:

 <div id="accordion" role="tablist" aria-multiselectable="true">
    <div class="card">
        <div class="card-header" role="tab" id="headingOne">
            <h5 class="mb-0">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"
                   aria-expanded="true" aria-controls="collapseOne">
                    Titel
                </a>
            </h5>
        </div>
        <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
            <div class="card-block">
                <div class="row">
                    <div class="col-6">
                        <p>Text</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header" role="tab" id="headingTwo">
            <h5 class="mb-0">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"
                   aria-expanded="true" aria-controls="collapseTwo">
                    Titel2
                </a>
            </h5>
        </div>
        <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
            <div class="card-block">
                <div class="row">
                    <p>Text2</p>
                </div>
            </div>
        </div>
    </div>
</div>


Und mit Hilfe von MASK sollte das Inhaltselement entsprechend erstellt werden. Das war auch erstmal kein Problem, das dazugehörige HTML mit den Viewhelpern sah so aus:

<f:if condition="{data.tx_mask_tabs}">
    <ul>
        <f:for each="{data.tx_mask_tabs}" as="data_item">
            <li>
                <f:if condition="{data_item.tx_mask_title}">
                    {data_item.tx_mask_title}<br />
                </f:if>
                <f:if condition="{data_item.tx_mask_content}">
                    <f:for each="{data_item.tx_mask_content}" as="data_item_item">
                        <f:cObject typoscriptObjectPath="lib.tx_mask.content">{data_item_item.uid}</f:cObject><br />
                    </f:for>
                </f:if>
            </li>
        </f:for>
    </ul>
</f:if>

 So recht wollten diese beiden Schnippsel nicht zusammen. Aber jetzt endlich...4 Stunden später hat es funktioniert:

<f:if condition="{data.tx_mask_tabs}">
    <div id="accordion" role="tablist" aria-multiselectable="true">
        <f:for each="{data.tx_mask_tabs}" as="data_item" iteration="iterator">
            <div class="card">
                <f:if condition="{data_item.tx_mask_title}">
                    <div class="card-header" role="tab" id="heading{iterator.index}">
                        <h5 class="mb-0">
                            <a class="{f:if(condition:iterator.isFirst, else: 'collapsed')}" data-toggle="collapse" data-parent="#accordion" href="#collapse{iterator.index}"
                               aria-expanded="true" aria-controls="collapse{iterator.index}">
                                {data_item.tx_mask_title}
                            </a>
                        </h5>
                    </div>
                </f:if>

                <f:if condition="{data_item.tx_mask_content}">
                    <div id="collapse{iterator.index}" class="collapse{f:if(condition: iterator.isFirst, then: ' show')}" role="tabpanel" aria-labelledby="heading{iterator.index}">
                        <div class="card-block">
                            <div class="row">
                                <f:for each="{data_item.tx_mask_content}" as="data_item_item">
                                    <f:cObject typoscriptObjectPath="lib.tx_mask.content">{data_item_item.uid}
                                    </f:cObject>
                                    <br/>
                                </f:for>
                            </div>
                        </div>
                    </div>
                </f:if>
            </div>
        </f:for>
    </div>
</f:if>

Und warum dokumentiere ich das hier? Ganz einfach, weil ich zu der Kombination von Bootstrap4 und TYPO3 bisher nicht viel gefunden habe. Also vllt. hilft es jemandem!

Viel Spaß damit!

Edit 22.08.2018:
Nachdem ich nun die Seite nochmal neu aufbauen musste und somit alle Daten weg waren, fiel mir auf, dass ich nicht gesagt habe, welche Module in welchen Reihenfolgen in Mask Verwendung fanden.

Ich habe ein Mask Element angelegt, das direkt mit einer Wiederholung beginnt. Darein habe ich ein Textfeld für den Titel gelegt, sowie ein Content-Modul, um diverse Contentelemente pro Accordion erstellen zu können.