WIP Migrate to stimulus.js and tailwind

public/typo3conf/ext/ep_products/Classes/Controller/SearchbarController.php

@@ -69,7 +69,6 @@ class SearchbarController extends ActionController
      */
     public function indexAction(array $searchParams)
     {
-        $fixed = (bool)$this->settings['fixed'];
         $forcedConceptUids = GeneralUtility::trimExplode(',', $this->settings['forcedConceptUids'], true);
         $filterSettings = $this->filterService->getFilterSettingsFromSearchParams($searchParams);
         $excludedConceptUids = GeneralUtility::trimExplode(',', $this->settings['excludedConceptUids']);
@@ -84,7 +83,7 @@ class SearchbarController extends ActionController
         $this->view->assignMultiple([
             'filterOptions' => $filterOptions,
             'searchParams' => $searchParams,
-            'fixed' => $fixed,
+            'fixed' => (bool)$this->settings['fixed'],
         ]);
     }
 }

public/typo3conf/ext/ep_products/Configuration/TypoScript/setup.typoscript

@@ -130,17 +130,16 @@ tx_epproducts_ajax_json {
     config {
         disableAllHeaderCode = 1
         disablePrefixComment = 1
-        #additionalHeaders.1.header = Cache-Control: no-cache, no-store, must-revalidate
+        additionalHeaders.1.header = Cache-Control: no-cache, no-store, must-revalidate
         additionalHeaders.10.header = Content-type: application/json
         additionalHeaders.20.header = X-Robots-Tag: noindex, nofollow, noarchive
         xhtml_cleaning = 0
         admPanel = 0
         debug = 0
-        #no_cache = 1
+        no_cache = 1
     }
 
-    #10 = USER_INT
+    10 = USER_INT
-    10 = USER
     10 {
         userFunc = TYPO3\CMS\Extbase\Core\Bootstrap->run
         extensionName = EpProducts

public/typo3conf/ext/ep_theme/Configuration/TypoScript/Library/SearchBar.typoscript

@@ -18,4 +18,4 @@ lib.searchBar {
 }
 
 lib.searchBarFixed < lib.searchBar
-lib.searchBarFixed.settings.fixed = true
+lib.searchBarFixed.settings.fixed = 1

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/product_details_controller.js

@@ -27,7 +27,7 @@ export default class extends Controller {
     }
 
     connect() {
-        if (false === this.dayTripValue && 'dates' === this.modeValue) {
+        if (false === this.daytripValue) {
             this.loadDates()
         }
     }
@@ -40,14 +40,20 @@ export default class extends Controller {
         this.modeValue = 'prices'
     }
 
+    switchView(e) {
+        let selectedView = e.detail
+        if ('dates' === selectedView) {
+            this.loadDates()
+        }
+    }
+
     loadDates() {
+        this.modeValue = 'dates'
         if (true === this.loadedValue) {
-            this.modeValue = 'dates'
             return
         }
         this.loadingValue = true
         this.datesTableContainerTarget.innerHTML = ''
-        this.modeValue = 'dates'
         fetch(this.datestableUriValue)
             .then(this.checkStatus)
             .then(this.parseHTML)

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/tabs_controller.js

@@ -5,6 +5,8 @@ export default class extends Controller {
 
     static targets = [ 'tab', 'button' ]
 
+    static values = { scroll: Boolean }
+
     initialize() {
         useDispatch(this)
     }
@@ -20,8 +22,10 @@ export default class extends Controller {
             let currentTab = element.dataset.tab
             element.classList.toggle('hidden', selectedTab !== currentTab)
         })
+        if (true === this.scrollValue) {
+            this.element.scrollIntoView({ block: 'start', behavior: 'smooth' })
+        }
         this.dispatch('selected', selectedTab)
-        this.element.scrollIntoView({ block: 'start', behavior: 'smooth' })
     }
 
 }

public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html

@@ -10,19 +10,15 @@
             <f:render partial="Product/HeaderDetail" arguments="{_all}"/>
             <div class="container"
                  data-controller="product-details"
-                 data-action="tabs:selected->product-details#loadDates"
+                 data-action="tabs:selected->product-details#switchView"
-                <f:if condition="{settings.hotelOnTop}">
-                    <f:else>
-                        data-product-details-mode-value="dates"
-                    </f:else>
-                </f:if>
                  data-product-details-datestable-uri-value="{ep:uri.ajax(action: 'datestable', controller: 'AjaxTable', arguments: '{product: product, hotel: hotel}', format: 'html', pageUid: settings.defaultAjaxUid)}"
                  data-product-details-pricetable-uri-value="{ep:uri.ajax(action: 'pricetable', controller: 'AjaxTable', arguments: '{product: product, hotel: hotel}', format: 'html', pageUid: settings.defaultAjaxUid)}"
                  data-product-details-travel-alert-uri-value="{f:uri.typolink(parameter: settings.travelAlertPageUid)}"
                  data-product-details-daytrip-value="{product.daytrip -> f:format.json()}">
                 <f:render partial="Header/Header" arguments="{layout: 8, subheader: '{product.region.name} / {product.name}', header: product.headline}"/>
                 <div class="flex flex-col lg:flex-row-reverse lg:items-start"
-                     data-controller="tabs">
+                     data-controller="tabs"
+                     data-tabs-scroll-value="true">
                     <div class="w-full lg:w-1/3">
                         <div class="lg:pl-4">
                             <div class="grid grid-cols-2 gap-2">

public/typo3conf/ext/ep_theme/Resources/Private/Templates/Searchbar/Index.html

@@ -15,10 +15,14 @@
                 <f:form.hidden property="destinationUid" data="{'searchbar-target': 'destinationUid'}"/>
                 <f:form.hidden property="destinationType" data="{'searchbar-target': 'destinationType'}"/>
                 <f:form.hidden property="priceRange" data="{'searchbar-target': 'priceRange'}"/>
-                <div class="searchbar {f:if(condition: fixed, then: ' sticky')}"
+                <div class="searchbar{f:if(condition: fixed, then: ' sticky')}"
-                     data-controller="sticky"
+                <f:if condition="{fixed}">
-                     data-sticky-offset-value="650"
+                    <f:else>
-                     data-sticky-disabled-value="{fixed -> f:format.json()}"
+                        data-controller="sticky"
+                        data-sticky-offset-value="650"
+                        data-sticky-disabled-value="{fixed -> f:format.json()}"
+                    </f:else>
+                </f:if>
                      data-searchbar-target="container">
                     <div class="sticky:max-w-screen-xl sticky:mx-auto flex flex-col sticky:flex-row sticky:items-center">
                         <div class="flex items-start justify-between sticky:flex-1 pt-8 px-8 sticky:py-4 sticky:px-0">