Accordion-Element registrieren
Dazu kann man die vorhandenen Beispiel-Elemente aus Container überschreiben mit der Datei Configuration/TCA/Overrides/tt_content.php
accordion wäre hier der CType, Accordion der Name des neuen Elementes, wichtig ist auch die colPos, die wir vergeben.
Außerdem haben wir noch ein Backend-Template registriert: Beaccordion.html
<?php \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(\B13\Container\Tca\Registry::class)-> configureContainer( ( new \B13\Container\Tca\ContainerConfiguration( 'accordion', // CType 'Accordion', // label 'LLL:EXT:extname/Resources/Private/Language/locallang.xlf:container.accordiondescription', // description [ [ ['name' => 'Accordion Elemente', 'colPos' => 201] ] ] ) ) ->setSaveAndCloseInNewContentElementWizard(true) ->setBackendTemplate('EXT:extname/Resources/Private/Templates/Container/Beaccordion.html') );
Resources:
TS anlegen
tt_content.accordion =< lib.contentElement tt_content.accordion { templateName = accordion templateRootPaths.10 = EXT:ext_name/Resources/Private/Templates/Container dataProcessing { 201 = B13\Container\DataProcessing\ContainerProcessor 201 { colPos = 201 as = children_201 } } }
FE-Template
Mit debug kann man sich die Variabken (childeren_201) anschauen.
Ich habe hier Bootstrap 5 verwendet. <f:debug>{_all}</f:debug> <div class="accordion {f:if(condition:'{data.pi_flexform.style}', then:'{data.pi_flexform.style}')}" id="accordion-{data.uid}"> <f:for each="{children_201}" as="record" iteration="iterator"> <div class="accordion-item"> <h2 class="accordion-header" id="accordion-heading-{record.uid}"> {f:variable(name: '_expanded', value: 'false')} {f:variable(name: '_expanded', value: 'true') -> f:if(condition:'{iterator.cycle} == {_activeItemIndex}')} <button class="accordion-button{f:if(condition:'{iterator.cycle} != {_activeItemIndex}', then:' collapsed')}" type="button" data-bs-toggle="collapse" data-bs-target="#accordion-{record.uid}" data-bs-parent="#accordion-{data.uid}" aria-expanded="{_expanded}" aria-controls="accordion-{record.uid}" > {record.header} </button> </h2> <div id="accordion-{record.uid}" class="accordion-collapse collapse{f:if(condition:'{iterator.cycle} == {_activeItemIndex}', then:' show')}" aria-labelledby="accordion-heading-{record.uid}" data-bs-parent="#accordion-{data.uid}"> <div class="ce-accordion-body accordion-body"> {record.bodytext} </div> </div> </div> </f:for> </div>
BE-Template
Das wäre unser file Beaccordion.html. Allerdings geht das nur, wenn das FluidpageRendering im BE aktiviert ist:
$GLOBALS['TYPO3_CONF_VARS']['SYS']['features']['fluidBasedPageModule'] = true
Das ist ab 11 standardmäßig der Fall, bei 10 muss es aktiviert sein!
<html data-namespace-typo3-fluid="true"> <a href="{editLink.url -> f:format.raw()}" title="{editLink.title}"> {bodytext -> f:format.nl2br() -> f:format.stripTags()} </a> {tx_container_grid -> f:format.raw()} </html>
TCA-Erweiterungen
Man kann natürlich individuelle Felder definieren:
Außerdem content_defender für die Rechte im BE-Layout verwenden: https://github.com/IchHabRecht/content_defender
$GLOBALS['TCA']['tt_content']['types']['accordion']['showitem'] = ' --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:general, --palette--;;general, --palette--;;headers, bodytext;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:bodytext_formlabel, --div--;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:tabs.appearance, --palette--;;frames, --palette--;;appearanceLinks, --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:language, --palette--;;language, --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:access, --palette--;;hidden, --palette--;;access, --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:categories, categories, --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:notes, rowDescription, --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:extended, '; $GLOBALS['TCA']['tt_content']['types']['accordion']['columnsOverrides']['bodytext']['config'] = [ 'rows' => 5, 'enableRichtext' => true, ];