Add container for manual product teasers

2021-10-15 13:27:02 +02:00
parent 9a2f09b9d2
commit d9a174383e
4 changed files with 88 additions and 14 deletions
@@ -8,7 +8,20 @@ call_user_func(function () {
            '33/33/33 Aufteilung',
            [
                [
-                    ['name' => 'Elemente', 'colPos' => 300, 'colspan' => 3],
+                    ['name' => 'Elemente', 'colPos' => 300],
+                ]
+            ]
+        )
+    );
+
+    \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(\B13\Container\Tca\Registry::class)->configureContainer(
+        new \B13\Container\Tca\ContainerConfiguration(
+            'ep_container_teasergroup',
+            'Teasergruppe',
+            'Für Produktteaser mit groß/klein Umschaltung',
+            [
+                [
+                    ['name' => 'Teaser', 'colPos' => 300],
                ]
            ]
        )
@@ -30,7 +43,7 @@ call_user_func(function () {
        '
    ];

-    foreach (['ep_container_thirds'] as $field) {
+    foreach (['ep_container_thirds', 'ep_container_teasergroup'] as $field) {
        $GLOBALS['TCA']['tt_content']['types'][$field] = array_replace_recursive(
            $GLOBALS['TCA']['tt_content']['types'][$field],
            $headerConfig
@@ -8,3 +8,14 @@ tt_content.ep_container_thirds {
        100 = B13\Container\DataProcessing\ContainerProcessor
    }
 }
+
+tt_content.ep_container_teasergroup =< lib.contentElement
+tt_content.ep_container_teasergroup {
+    templateName = Teasergroup
+    templateRootPaths {
+        10 = EXT:ep_theme/Resources/Private/Templates/Container
+    }
+    dataProcessing {
+        100 = B13\Container\DataProcessing\ContainerProcessor
+    }
+}
@@ -0,0 +1,45 @@
+<html data-namespace-typo3-fluid="true" lang="en"
+      xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
+
+    <f:layout name="Default"/>
+
+    <f:section name="Main">
+        <div class="py-8 bg-ep-primary-bg">
+            <f:if condition="{data.header}">
+                <div class="container mb-8">
+                    <f:render partial="Header/Header" arguments="{header: data.header, subheader: data.subheader, layout: data.header_layout, link: data.header_link, default: settings.defaultHeaderType}" />
+                </div>
+            </f:if>
+            <div class="container"
+                 data-controller="teasergrid"
+                 data-teasergrid-grid-class="grid-cols-2"
+                 data-teasergrid-disabled-value="false">
+                <f:if condition="{children_300}">
+                    <div class="flex items-center space-x-1 mb-2 sm:hidden">
+                        <button class="opacity-50"
+                                data-action="teasergrid#grid"
+                                data-teasergrid-target="button">
+                            <svg class="w-6 h-6 text-ep-primary">
+                                <use href="#icon-minus-circle"></use>
+                            </svg>
+                        </button>
+                        <button data-action="teasergrid#block"
+                                data-teasergrid-target="button">
+                            <svg class="w-6 h-6 text-ep-primary">
+                                <use href="#icon-plus-circle"></use>
+                            </svg>
+                        </button>
+                    </div>
+                    <div class="grid grid-cols-2 lg:grid-cols-3 gap-4 md:gap-8"
+                         data-teasergrid-target="container">
+                        <f:for each="{children_300}" as="record">
+                            {record.renderedContent -> f:format.raw()}
+                        </f:for>
+                    </div>
+                </f:if>
+            </div>
+        </div>
+    </f:section>
+
+</html>
@@ -8,18 +8,23 @@

    <f:section name="Main">
        <f:if condition="{teaser.dates}">
-            <f:switch expression="{data.layout}">
-                <f:case value="2">
-                    {v:variable.set(name: 'partial', value: 'Product/TeaserLandscape')}
-                </f:case>
-                <f:case value="3">
-                    {v:variable.set(name: 'partial', value: 'Product/TeaserLandscape')}
-                </f:case>
-                <f:defaultCase>
-                    {v:variable.set(name: 'partial', value: 'Product/Teaser')}
-                </f:defaultCase>
-            </f:switch>
-            <f:render partial="{partial}" section="Teaser" arguments="{teaser: teaser}"/>
+            <f:render partial="Product/Teaser" section="Teaser" arguments="{
+                                concept: teaser.concept,
+                                hotel: teaser.hotel,
+                                product: teaser.product,
+                                country: teaser.country,
+                                region: teaser.region,
+                                productImage: teaser.product.images.original.0,
+                                nights: teaser.nights,
+                                board: teaser.board,
+                                minPrice: teaser.minPrice,
+                                daytrip: teaser.daytrip,
+                                season: teaser.season,
+                                forceHotelUid: teaser.forceHotelUid,
+                                dateFrom: dateFrom,
+                                dateTo: dateTo,
+                                landscape: '{f:if(condition: \'{data.layout} == 2 || {data.layout} == 3\', then: 1, else: 0)}'
+                            }"/>
        </f:if>
    </f:section>