Flexible Container und Grids

Wie man flexible seiteninterne Strukturen mit einer einfachen Erweiterung Core-nah hinzufügt.

Genau dafür ist unsere neue Container-Erweiterung gedacht!

Quelle  

ext/container/Configuration/TCA/Overrides/tt_content.php

<?php
call_user_func(static function () {
    $additionalColumns = [
        'tx_container_parent' => [
            'label' => 'LLL:EXT:container/Resources/Private/Language/locallang.xlf:container',
            'config' => [
                'default' => 0,
                'type' => 'select',
                'foreign_table' => 'tt_content',
                // do not render standard tt_content elements, but only elements returned from itemsProcFunc
                // only necessary for TYPO3 9
                'foreign_table_where' => ' AND 1=2',
                'itemsProcFunc' => \B13\Container\Tca\ItemProcFunc::class . '->txContainerParent',
                'renderType' => 'selectSingle'
            ]
        ]
    ];

    \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addTCAcolumns(
        'tt_content',
        $additionalColumns
    );

    \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addFieldsToPalette(
        'tt_content',
        'general',
        'tx_container_parent'
    );

    $GLOBALS['TCA']['tt_content']['columns']['CType']['config']['itemGroups']['container'] = 'LLL:EXT:container/Resources/Private/Language/locallang.xlf:container';

    $GLOBALS['TCA']['tt_content']['columns']['colPos']['config']['itemsProcFunc'] = \B13\Container\Tca\ItemProcFunc::class . '->colPos';

    // copyAfterDuplFields colPos,sys_language_uid
    // useColumnsForDefaultValues colPos,sys_language_uid,CType
    // new element
    $GLOBALS['TCA']['tt_content']['ctrl']['useColumnsForDefaultValues'] .= ',tx_container_parent';

    // Workspace placeholder for container parent. Since this property got removed in
    // https://forge.typo3.org/issues/92791, only extend, if it still exists (TYPO3 < v11).
    // @todo Can be removed once v11 is the lowest supported version.
    if (isset($GLOBALS['TCA']['tt_content']['ctrl']['shadowColumnsForNewPlaceholders'])) {
        $GLOBALS['TCA']['tt_content']['ctrl']['shadowColumnsForNewPlaceholders'] .= ',tx_container_parent';
    }
});

// Configuration Container start
// #ZWEI-SPALTEN-MIT-HEADER
$GLOBALS['TCA']['tt_content']['types']['b13-2cols-with-header-container']['showitem'] = 'sys_language_uid,CType,header,tx_container_parent,colPos';

\TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(\B13\Container\Tca\Registry::class)->configureContainer(
    (
        new \B13\Container\Tca\ContainerConfiguration(
            'b13-2cols-with-header-container', // CType
            'ZWEI-SPALTEN-MIT-HEADER', // label
            'Zwei Spalten mit Header', // description
            [
                [
                    ['name' => 'header', 'colPos' => 200, 'colspan' => 2, 'allowed' => ['CType' => 'header, textmedia']]
                ],
                [
                    ['name' => 'left side', 'colPos' => 201],
                    ['name' => 'right side', 'colPos' => 202]
                ]
            ] // grid configuration
        )
    )
);
// #ZWEI-SPALTEN
$GLOBALS['TCA']['tt_content']['types']['b13-2cols']['showitem'] = 'sys_language_uid,CType,header,tx_container_parent,colPos';

// second container
\TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(\B13\Container\Tca\Registry::class)->configureContainer(
    (
        new \B13\Container\Tca\ContainerConfiguration(
            'b13-2cols', // CType
            'ZWEI-SPALTEN', // label
            'Some Description of the Container', // description
            [
                [
                    ['name' => '2-cols-left', 'colPos' => 200],
                    ['name' => '2-cols-right', 'colPos' => 201]
                ]
            ] // grid configuration
        )
    )
);
// Configuration Container end

fileadmin/templates/ts/TS-Container.ts

// #ZWEI-SPALTEN-MIT-HEADER
tt_content.b13-2cols-with-header-container < lib.contentElement
tt_content.b13-2cols-with-header-container {
    //templateName fileadmin/Container/Resources/Private/Templates/2ColsWithHeader.html
    templateName = 2ColsWithHeader
    templateRootPaths {
        10 = fileadmin/Container/Resources/Private/Templates
    }
    dataProcessing {
        100 = B13\Container\DataProcessing\ContainerProcessor
    }
}

tt_content.b13-2cols-with-header-container < lib.contentElement
tt_content.b13-2cols-with-header-container {
     //templateName fileadmin/Container/Resources/Private/Templates/2ColsWithHeader.html
    templateName = 2ColsWithHeader
    templateRootPaths {
        10 = fileadmin/Container/Resources/Private/Templates/
    }
    dataProcessing {
        200 = B13\Container\DataProcessing\ContainerProcessor
        200 {
            colPos = 200
            as = children_200
        }
        201 = B13\Container\DataProcessing\ContainerProcessor
        201 {
            colPos = 201
            as = children_201
        }
        202 = B13\Container\DataProcessing\ContainerProcessor
        202 {
            colPos = 202
            as = children_202
        }
    }
}
// #ZWEI-SPALTEN
tt_content.b13-2cols < lib.contentElement
tt_content.b13-2cols {
    //templateName fileadmin/Container/Resources/Private/Templates/2Cols.html
    templateName = 2Cols
    templateRootPaths {
        10 = fileadmin/Container/Resources/Private/Templates
    }
    dataProcessing {
        100 = B13\Container\DataProcessing\ContainerProcessor
    }
}
    
tt_content.b13-2cols < lib.contentElement
tt_content.b13-2cols {
    //templateName fileadmin/Container/Resources/Private/Templates/2Cols.html
    templateName = 2Cols
    templateRootPaths {
        10 = fileadmin/Container/Resources/Private/Templates
    }
    dataProcessing {
        200 = B13\Container\DataProcessing\ContainerProcessor
        200 {
            colPos = 200
            as = children_200
        }
        201 = B13\Container\DataProcessing\ContainerProcessor
        201 {
            colPos = 201
            as = children_201
        }
      
    }
}

fileadmin/Container/Resources/Privat/Templates/2ColsWithHeader.html

<div class="2-cols-header-box" style="background: #DDDDDD">
    <f:if condition="{children_200}">
        <div class="header-children">
            <f:for each="{children_200}" as="child">
                <f:format.raw>{child.renderedContent}</f:format.raw>
            </f:for>
        </div>
    </f:if>

    <f:if condition="{children_201}">
        <div class="left-children">
            <f:for each="{children_201}" as="child">
                hallo left
                <f:format.raw>{child.renderedContent}</f:format.raw>
            </f:for>

        </div>
    </f:if>

    <f:if condition="{children_202}">
        <div class="right-children">
            <f:for each="{children_202}" as="child">
                hallo right
                <f:format.raw>{child.renderedContent}</f:format.raw>
            </f:for>
        </div>
    </f:if>
</div>