Container Accordion

Publiziert

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!

https://docs.typo3.org/c/typo3/cms-core/main/en-us/Changelog/10.3/Feature-90348-NewFluid-basedReplacementForPageLayoutView.html

 


<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,
];