From bf171285cd4edbbddd6d9d972d283302d83eb15b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <bjoern.fromme@ep-reisen.de>
Date: Sat, 24 Oct 2026 13:03:38 +0200
Subject: [PATCH] feat: FAQ overview element on TYPO3 13

Restored from a46918d (the FAQ page /skireisen/infos/allgemeine-infos/faqs/);
markup matches TYPO3 10.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../tt_content_element_faq_overview.php       | 30 ++++++++++++++
 .../ContentElements/faq_overview.typoscript   | 17 ++++++++
 .../Resources/Private/Partials/FaqGroup.html  | 40 ++++++++++++++++++
 .../FluidStyledContent/FaqOverview.html       | 41 +++++++++++++++++++
 4 files changed, 128 insertions(+)
 create mode 100644 packages/ep_theme/Configuration/TCA/Overrides/tt_content_element_faq_overview.php
 create mode 100644 packages/ep_theme/Configuration/TypoScript/ContentElements/faq_overview.typoscript
 create mode 100644 packages/ep_theme/Resources/Private/Partials/FaqGroup.html
 create mode 100644 packages/ep_theme/Resources/Private/Templates/FluidStyledContent/FaqOverview.html

diff --git a/packages/ep_theme/Configuration/TCA/Overrides/tt_content_element_faq_overview.php b/packages/ep_theme/Configuration/TCA/Overrides/tt_content_element_faq_overview.php
new file mode 100644
index 0000000..e06596b
--- /dev/null
+++ b/packages/ep_theme/Configuration/TCA/Overrides/tt_content_element_faq_overview.php
@@ -0,0 +1,30 @@
+<?php
+
+use TYPO3\CMS\Core\Utility\ExtensionManagementUtility;
+
+defined('TYPO3') or die();
+
+call_user_func(function() {
+    $frontendLanguageFilePrefix = 'LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:';
+
+    ExtensionManagementUtility::addTcaSelectItem(
+        'tt_content',
+        'CType',
+        [
+            'label' => 'FAQ Alle Kategorien',
+            'value' => 'faq_overview',
+            'icon' => 'content-ep_theme-ce',
+        ],
+        'lineup',
+        'after'
+    );
+
+    $GLOBALS['TCA']['tt_content']['types']['faq_overview'] = [
+        'showitem' => '
+            --palette--;' . $frontendLanguageFilePrefix . 'palette.general;general,
+        --div--;' . $frontendLanguageFilePrefix . 'tabs.access,
+            hidden;' . $frontendLanguageFilePrefix . 'field.default.hidden,
+        --div--;' . $frontendLanguageFilePrefix . 'tabs.extended
+        ',
+    ];
+});
diff --git a/packages/ep_theme/Configuration/TypoScript/ContentElements/faq_overview.typoscript b/packages/ep_theme/Configuration/TypoScript/ContentElements/faq_overview.typoscript
new file mode 100644
index 0000000..a2496dc
--- /dev/null
+++ b/packages/ep_theme/Configuration/TypoScript/ContentElements/faq_overview.typoscript
@@ -0,0 +1,17 @@
+tt_content.faq_overview =< lib.contentElement
+tt_content.faq_overview {
+    templateName = FaqOverview
+    settings {
+        infoPageUid = {$plugin.tx_eptheme.settings.infoPageUid}
+    }
+    dataProcessing {
+        10 = TYPO3\CMS\Frontend\DataProcessing\DatabaseQueryProcessor
+        10 {
+            table = tx_epproducts_domain_model_faq
+            where = category != ''
+            orderBy = category ASC, uid ASC
+            pidInList = {$plugin.tx_epproducts.settings.faqsStoragePid}
+            as = faqs
+        }
+    }
+}
diff --git a/packages/ep_theme/Resources/Private/Partials/FaqGroup.html b/packages/ep_theme/Resources/Private/Partials/FaqGroup.html
new file mode 100644
index 0000000..ca91b20
--- /dev/null
+++ b/packages/ep_theme/Resources/Private/Partials/FaqGroup.html
@@ -0,0 +1,40 @@
+<html data-namespace-typo3-fluid="true" lang="en"
+      xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
+      xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers">
+
+    <f:if condition="{faqs}">
+        <div class="py-4" data-faq-target="category">
+            <f:if condition="{category}">
+                <div class="flex items-center space-x-2 pb-3">
+                    <div class="bg-badge-gradient text-white rounded-full w-8 h-8 flex items-center justify-center">
+                        <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M5.45455 15L1 18.5V3C1 2.44772 1.44772 2 2 2H17C17.5523 2 18 2.44772 18 3V15H5.45455ZM4.76282 13H16V4H3V14.3851L4.76282 13ZM8 17H18.2372L20 18.3851V8H21C21.5523 8 22 8.44772 22 9V22.5L17.5455 19H9C8.44772 19 8 18.5523 8 18V17Z"></path></svg>
+                    </div>
+                    <span class="headline--4 uppercase block">{category}</span>
+                </div>
+            </f:if>
+            <f:for each="{faqs}" as="faq">
+                <div class="py-4"
+                     data-controller="collapse"
+                     data-collapse-collapsed-value="true"
+                     data-faq-target="entry">
+                    <button type="button"
+                            aria-label="Antwort anzeigen/ausblenden"
+                            class="text-lg md:text-xl flex items-center"
+                            data-action="collapse#toggle">
+                        {ep:icon(icon: 'chevron-right', class: 'w-6 h-6 transition-transform duration-200 ease-in-out', data: '{collapse-target: \'icon\'}')}
+                        <span class="text-left">
+                            {faq.data.question}
+                        </span>
+                    </button>
+                    <div class="pt-2 pl-6 transition-transform ease-out overflow-hidden origin-top transform hidden max-w-screen-md"
+                         data-collapse-target="container"
+                         data-rte-content>
+                        {faq.data.answer -> f:format.html()}
+                    </div>
+                </div>
+            </f:for>
+        </div>
+    </f:if>
+
+</html>
diff --git a/packages/ep_theme/Resources/Private/Templates/FluidStyledContent/FaqOverview.html b/packages/ep_theme/Resources/Private/Templates/FluidStyledContent/FaqOverview.html
new file mode 100644
index 0000000..85be72c
--- /dev/null
+++ b/packages/ep_theme/Resources/Private/Templates/FluidStyledContent/FaqOverview.html
@@ -0,0 +1,41 @@
+<html data-namespace-typo3-fluid="true" lang="en"
+      xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
+      xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers">
+
+    <f:layout name="Default"/>
+
+    <f:section name="Main">
+        <f:if condition="{faqs}">
+            <div class="py-8 bg-ep-primary-bg">
+                <div class="container"
+                     data-controller="faq">
+                    <div class="relative mb-4 max-w-screen-md">
+                        <input type="text"
+                               aria-label="Suchbegriff"
+                               data-action="faq#filter"
+                               class="form-field"
+                               placeholder="Suchbegriff">
+                        {ep:icon(icon: 'search', class: 'w-6 h-6 absolute top-2 right-2')}
+                    </div>
+                    <f:groupedFor each="{faqs}" as="groupFaqs" groupBy="data.category" groupKey="categoryName">
+                        <f:render partial="FaqGroup" arguments="{faqs: groupFaqs, category: categoryName}"/>
+                    </f:groupedFor>
+                    <div class="hidden py-4"
+                         data-faq-target="empty">
+                        Keine Treffer gefunden. Bitte ändere deinen Suchbegriff.
+                    </div>
+                    <f:if condition="{settings.infoPageUid}">
+                        <div class="flex items-center space-x-2 text-sm">
+                            {ep:icon(icon: 'info-circle', class: 'w-4 h-4')}
+                            <a href="{f:uri.typolink(parameter: settings.infoPageUid)}" class="underline">
+                                Weitere Reiseinfos findet ihr hier
+                            </a>
+                        </div>
+                    </f:if>
+                </div>
+            </div>
+        </f:if>
+    </f:section>
+
+</html>