Merge branch 'filtersettingsstore'

package-lock.json

@@ -751,6 +751,12 @@
       "integrity": "sha1-nufoM3KQ2pUoggGmpX9BcDF4MN4=",
       "dev": true
     },
+    "babel-plugin-syntax-object-rest-spread": {
+      "version": "6.13.0",
+      "resolved": "http://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
+      "integrity": "sha1-/WU28rzhODb/o6VFjEkDpZe7O/U=",
+      "dev": true
+    },
     "babel-plugin-syntax-trailing-function-commas": {
       "version": "6.22.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-6.22.0.tgz",
@@ -1013,6 +1019,16 @@
         "babel-runtime": "^6.22.0"
       }
     },
+    "babel-plugin-transform-object-rest-spread": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz",
+      "integrity": "sha1-DzZpLVD+9rfi1LOsFHgTepY7ewY=",
+      "dev": true,
+      "requires": {
+        "babel-plugin-syntax-object-rest-spread": "^6.8.0",
+        "babel-runtime": "^6.26.0"
+      }
+    },
     "babel-plugin-transform-regenerator": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.26.0.tgz",

package.json

@@ -32,6 +32,7 @@
   "devDependencies": {
     "@symfony/webpack-encore": "^0.19.0",
     "autoprefixer": "^8.6.5",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "node-sass": "^4.9.3",
     "postcss-loader": "^2.1.6",
     "sass-loader": "^6.0.7",

web/typo3conf/ext/ep_products/Classes/Controller/AjaxSearchController.php

@@ -84,8 +84,8 @@ class AjaxSearchController extends ActionController
     /**
      * @param FilterSettings $filterSettings
      * @param integer $referringPageUid
-     *
      * @return string
+     * @throws \Doctrine\DBAL\DBALException
      */
     public function searchresultAction(FilterSettings $filterSettings = null, $referringPageUid = null)
     {
@@ -115,7 +115,6 @@ class AjaxSearchController extends ActionController
         $options = [
             'defaultDetailPageUid' => $this->settings['defaultDetailPageUid'],
             'referringPageUid' => $referringPageUid,
-            'filterSettings' => $filterSettings,
         ];
 
         $this->searchResultUrlService->process($searchResult, $options);

web/typo3conf/ext/ep_products/Classes/Controller/ProductController.php

@@ -27,7 +27,6 @@ namespace EP\EpProducts\Controller;
  *  This copyright notice MUST APPEAR in all copies of the script!
  ***************************************************************/
 
-use EP\EpProducts\Domain\Model\FilterSettings;
 use EP\EpProducts\Domain\Model\Hotel;
 use EP\EpProducts\Domain\Model\Product;
 use EP\EpProducts\Domain\Repository\HotelRepository;
@@ -36,15 +35,12 @@ use EP\EpProducts\Service\DateService;
 use EP\EpProducts\Service\FilterService;
 use EP\EpProducts\Service\HotelDataService;
 use EP\EpProducts\Service\ProductDataService;
-use EP\EpProducts\Traits\RequestArgumentTypeConversionTrait;
 use TYPO3\CMS\Core\Utility\GeneralUtility;
 use TYPO3\CMS\Extbase\Mvc\Controller\ActionController;
 
 class ProductController extends ActionController
 {
 
-    use RequestArgumentTypeConversionTrait;
-
     /**
      * @var \EP\EpProducts\Domain\Repository\ProductRepository
      */
@@ -101,22 +97,15 @@ class ProductController extends ActionController
         $this->filterService = $filterService;
     }
 
-    public function initializeAction()
-    {
-        $this->processFilterSettingsArgument();
-    }
-
     /**
      * @param Product $product
      * @param Hotel $hotel
-     * @param FilterSettings $filterSettings
-     * @param int $referringPageUid
+     * @throws \TYPO3\CMS\Extbase\Mvc\Exception\StopActionException
+     * @throws \TYPO3\CMS\Extbase\Mvc\Exception\UnsupportedRequestTypeException
      */
     public function detailAction(
         Product $product = null,
-        Hotel $hotel = null,
-        FilterSettings $filterSettings = null,
-        $referringPageUid = null
+        Hotel $hotel = null
     )
     {
         // Get product to display from flexform settings if not provided via url
@@ -138,8 +127,6 @@ class ProductController extends ActionController
             if ($product->getHotels()->count() > 1) {
                 $arguments = [
                     'product' => $product,
-                    'filterSettings' => $filterSettings,
-                    'referringPageUid' => $referringPageUid,
                 ];
                 $this->forward('hotelList', null, null, $arguments);
             }
@@ -153,11 +140,8 @@ class ProductController extends ActionController
         $noInfoConceptUids = GeneralUtility::trimExplode(',', $this->settings['noInfoConceptUids']);
         $isProductWithNoInfoConcept = ($product->getConcept() !== null) && \in_array($product->getConcept()->getUid(), $noInfoConceptUids, false);
         $this->view->assignMultiple([
-            'filterSettings' => $filterSettings,
             'hotel' => $hotel,
             'product' => $product,
-            'referringPageUid' => $referringPageUid,
-            'currentPageUid' => $GLOBALS['TSFE']->id,
             'isProductWithExcludedConcept' => $isProductWithExcludedConcept,
             'isProductWithNoInfoConcept' => $isProductWithNoInfoConcept,
         ]);
@@ -181,21 +165,16 @@ class ProductController extends ActionController
 
     /**
      * @param Product $product
-     * @param FilterSettings $filterSettings
-     * @param int $referringPageUid
      */
     public function hotelListAction(
-        Product $product,
-        FilterSettings $filterSettings = null,
-        $referringPageUid = null
+        Product $product
     )
     {
         $hotels = $this->hotelDataService->getList($product);
         $this->view->assignMultiple([
-            'filterSettings' => $filterSettings,
             'hotels' => $hotels,
             'product' => $product,
-            'referringPageUid' => $referringPageUid,
+            'currentPageUid' => $GLOBALS['TSFE']->id,
             'linkHotel' => true,
         ]);
     }

web/typo3conf/ext/ep_products/Classes/Controller/SearchController.php

@@ -110,25 +110,15 @@ class SearchController extends ActionController
      */
     public function searchresultAction(SearchParams $searchParams = null, FilterSettings $filterSettings = null)
     {
-        if ($searchParams === null) {
-            $searchParams = new SearchParams();
-        } else {
+        if ($searchParams !== null) {
             $this->logSearch($searchParams);
-        }
-        if ($filterSettings === null) {
             $filterSettings = FilterSettings::fromSearchParams($searchParams);
         }
-        $excludedConceptUids = GeneralUtility::trimExplode(',', $this->settings['excludedConceptUids']);
-        $filterOptions = $this->filterService->getFilterOptions($filterSettings, $excludedConceptUids);
-        if ($filterOptions === null) {
-            $filterOptions = $this->filterService->getFilterOptions($this->defaultFilterSettings, $excludedConceptUids);
-        }
 
         $this->view->assignMultiple([
             'detailPageUid' => $this->settings['detailPageUid'],
             'referringPageUid' => $GLOBALS['TSFE']->id,
             'filterSettings' => $filterSettings,
-            'filterOptions' => $filterOptions,
         ]);
     }
 

web/typo3conf/ext/ep_products/Classes/Domain/Repository/DateRepository.php

@@ -129,13 +129,13 @@ class DateRepository extends AbstractRepository
         $qb = $this->getDbConnection()->createQueryBuilder();
 
         $query = $qb
-            ->select('hotel uid')
+            ->select('hotel as uid')
             ->addSelectLiteral('REPLACE(hotel_name, "\r\n", " ") name')
             ->from('tx_epproducts_domain_model_date', 'date')
             ->where('product_searchable = 1')
             ->andWhere($qb->expr()->orX(
-                $qb->expr()->like('LOWER(hotel_name) COLLATE utf8_bin',':searchName'),
-                $qb->expr()->like('LOWER(hotel_keywords) COLLATE utf8_bin', ':searchKeywords')
+                $qb->expr()->like('hotel_name',':searchName'),
+                $qb->expr()->like('hotel_keywords', ':searchKeywords')
             ))
             ->orderBy('hotel_name')
             ->groupBy('hotel_name')
@@ -170,14 +170,14 @@ class DateRepository extends AbstractRepository
             ->from('tx_epproducts_domain_model_date', 'date')
             ->where('product_searchable = 1')
             ->andWhere($qb->expr()->orX(
-                $qb->expr()->like('LOWER(product_name) COLLATE utf8_bin',':searchName'),
-                $qb->expr()->like('LOWER(product_keywords) COLLATE utf8_bin', ':searchKeywords'),
-                $qb->expr()->like('LOWER(country_name) COLLATE utf8_bin',':searchKeywords'),
-                $qb->expr()->like('LOWER(country_keywords) COLLATE utf8_bin', ':searchKeywords'),
-                $qb->expr()->like('LOWER(region_name) COLLATE utf8_bin', ':searchKeywords'),
-                $qb->expr()->like('LOWER(region_keywords) COLLATE utf8_bin', ':searchKeywords'),
-                $qb->expr()->like('LOWER(city_name) COLLATE utf8_bin', ':searchKeywords'),
-                $qb->expr()->like('LOWER(city_keywords) COLLATE utf8_bin', ':searchKeywords')
+                $qb->expr()->like('product_name',':searchName'),
+                $qb->expr()->like('product_keywords', ':searchKeywords'),
+                $qb->expr()->like('country_name',':searchKeywords'),
+                $qb->expr()->like('country_keywords', ':searchKeywords'),
+                $qb->expr()->like('region_name', ':searchKeywords'),
+                $qb->expr()->like('region_keywords', ':searchKeywords'),
+                $qb->expr()->like('city_name', ':searchKeywords'),
+                $qb->expr()->like('city_keywords', ':searchKeywords')
             ))
             ->orderBy('product_name')
             ->groupBy('product_name')
@@ -218,8 +218,8 @@ class DateRepository extends AbstractRepository
             ->from('tx_epproducts_domain_model_date', 'date')
             ->where('product_searchable = 1')
             ->andWhere($qb->expr()->orX(
-                $qb->expr()->like('LOWER(' . $type . '_name) COLLATE utf8_bin',':searchName'),
-                $qb->expr()->like('LOWER(' . $type . '_keywords) COLLATE utf8_bin', ':searchKeywords')
+                $qb->expr()->like($type . '_name',':searchName'),
+                $qb->expr()->like($type . '_keywords', ':searchKeywords')
             ))
             ->orderBy($type . '_name')
             ->groupBy($type . '_name')

web/typo3conf/ext/ep_products/Classes/Service/SearchResultUrlService.php

@@ -54,13 +54,9 @@ class SearchResultUrlService implements SingletonInterface
     public function process(SearchResult $searchResult, array $options)
     {
         $optionsResolver = new OptionsResolver();
-        $optionsResolver->setRequired([ 'defaultDetailPageUid', 'referringPageUid', 'filterSettings' ]);
-        $optionsResolver->setAllowedTypes('filterSettings', FilterSettings::class);
+        $optionsResolver->setRequired([ 'defaultDetailPageUid', 'referringPageUid' ]);
         $resolvedOptions = $optionsResolver->resolve($options);
 
-        /** @var FilterSettings $filterSettings */
-        $filterSettings = $resolvedOptions['filterSettings'];
-        $encodedFilterSettings = FilterSettingsEncoder::encode($filterSettings);
         $defaultDetailPageUid = $resolvedOptions['defaultDetailPageUid'];
         $referringPageUid = $resolvedOptions['referringPageUid'];
 
@@ -75,7 +71,6 @@ class SearchResultUrlService implements SingletonInterface
                     'product' => $item['product']['uid'],
                     'hotel' => $item['hotel']['uid'],
                     'referringPageUid' => $referringPageUid,
-                    'filterSettings' => $encodedFilterSettings,
                 ];
                 $uri = $this
                     ->uriBuilder

web/typo3conf/ext/ep_products/Classes/Traits/RequestArgumentTypeConversionTrait.php

@@ -136,13 +136,13 @@ trait RequestArgumentTypeConversionTrait
      */
     static protected function convertType($value)
     {
-        if (is_string($value) && (strtolower($value) === 'true' || strtolower($value) === 'false')) {
+        if (\is_string($value) && (strtolower($value) === 'true' || strtolower($value) === 'false')) {
             return strtolower($value) === 'true';
         }
-        if (is_numeric($value)) {
+        if (\is_numeric($value)) {
             return (int) $value;
         }
-        if (is_array($value)) {
+        if (\is_array($value)) {
             return array_map(function($item) {
                 return static::convertType($item);
             }, $value);

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js

@@ -30,6 +30,8 @@ import EventPricetable from './components/EventPriceTable.vue'
 import ContactForm from './components/ContactForm.vue'
 import WatchlistToggle from './components/WatchlistToggle.vue'
 import Watchlist from './components/Watchlist.vue'
+import HotelList from './components/HotelList.vue'
+import ReferrerLink from './components/ReferrerLink.vue'
 
 // Define global constants
 const $window = $(window);
@@ -59,7 +61,9 @@ new Vue({
         EventPricetable,
         ContactForm,
         WatchlistToggle,
-        Watchlist
+        Watchlist,
+        HotelList,
+        ReferrerLink
     },
     data () {
         return {

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_filteroptions.js

@@ -0,0 +1,13 @@
+export default {
+    priceRanges: {},
+    destinations: {},
+    concepts: {},
+    pax: [],
+    nights: [],
+    hotelTypes: [],
+    boardTypes: [],
+    roomTypes: [],
+    dateFrom: null,
+    dateTo: null,
+    busAvailable: false
+}

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_filtersettings.js

@@ -10,6 +10,7 @@ export default {
     conceptUids: [],
     dateFrom: null,
     dateTo: null,
+    priceRange: 0,
     nights: 0,
     pax: 1,
     hotelTypes: [],

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/DaterangeSelect.vue

@@ -80,15 +80,21 @@
                 }
             }
         },
-        created () {
+        watch: {
+            minDate (date) {
+                this.picker.set('minDate', new Date(date))
+            },
+            maxDate (date) {
+                this.picker.set('maxDate', new Date(date))
+            }
+        },
+        mounted () {
             Vue.nextTick(() => {
                 this.picker = $(this.$refs.field).flatpickr({
                     mode: 'range',
                     dateFormat: 'd.m.Y',
                     locale: German,
                     inline: true,
-                    minDate: new Date(this.minDate),
-                    maxDate: new Date(this.maxDate),
                     onChange: (selectedDates) => {
                         if (selectedDates.length === 2) {
                             this.selectedFrom = selectedDates[0];

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/HotelList.vue

@@ -0,0 +1,35 @@
+<script>
+    import WatchlistToggle from './WatchlistToggle.vue'
+    import ReferrerLink from './ReferrerLink.vue'
+
+    import defaultFilterSettings from '../_filtersettings'
+
+    export default {
+        components: {
+            WatchlistToggle,
+            ReferrerLink
+        },
+        props: {
+            referringPageUrl: {
+                type: String,
+                required: true
+            },
+            watchlist: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            }
+        },
+        data () {
+            return {
+                filterSettings: defaultFilterSettings
+            }
+        },
+        created () {
+            if (this.$session.has('filterSettings')) {
+                this.filterSettings = this.$session.get('filterSettings')
+            }
+        }
+    }
+</script>

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/PriceRangeSelect.vue

@@ -31,6 +31,7 @@
                 required: true
             },
             range: {
+                type: Number,
                 default: 0
             },
             showLabel: {
@@ -40,7 +41,7 @@
         },
         computed: {
             rangeLabel () {
-                if (this.rangeSelected === 0) {
+                if (this.rangeSelected === 0 || $.isEmptyObject(this.rangeOptions)) {
                     return 'beliebig';
                 }
                 let range = this.rangeOptions[this.rangeSelected];
@@ -64,8 +65,8 @@
                 this.$emit('selected', 0);
             },
             optionSelect (value) {
-                this.rangeSelected = value;
-                this.$emit('selected', value);
+                this.rangeSelected = parseInt(value);
+                this.$emit('selected', parseInt(value));
             }
         },
         watch: {

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/ProductDetail.vue

@@ -16,6 +16,8 @@
     import dayjs from 'dayjs'
     import 'dayjs/locale/de'
 
+    import defaultFilterSettings from '../_filtersettings'
+
     export default {
         components: {
             DatesTable,
@@ -46,16 +48,12 @@
                 detailShow: false,
                 loading: true,
                 activeSection: null,
-                singleDate: false
+                singleDate: false,
+                filterSettings: defaultFilterSettings,
+                referringPage: null
             }
         },
         props: {
-            filterSettings: {
-                type: Object,
-                default () {
-                    return {}
-                }
-            },
             argumentPrefix: {
                 type: String,
                 required: true
@@ -190,6 +188,13 @@
             }
         },
         created () {
+            if (this.$session.has('filterSettings')) {
+                this.filterSettings = this.$session.get('filterSettings')
+            }
+            if (this.$session.has('referringPage')) {
+                this.referringPage = this.$session.get('referringPage');
+                this.$session.remove('referringPage');
+            }
             EventBus.$on('loadDatesTable', () => {
                 this.loadDatesView();
             });

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/ReferrerLink.vue

@@ -0,0 +1,28 @@
+<template>
+    <a @click="storeReferringPage()">
+        <slot></slot>
+    </a>
+</template>
+
+<script>
+    export default {
+        props: {
+            referringPage: {
+                type: Object,
+                default () {
+                    return {
+                        url: null,
+                        label: null
+                    }
+                }
+            }
+        },
+        methods: {
+            storeReferringPage () {
+                if (this.referringPage.url && this.referringPage.label) {
+                    this.$session.set('referringPage', { url: this.referringPage.url, label: this.referringPage.label })
+                }
+            }
+        }
+    }
+</script>

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/SearchResult.vue

@@ -18,6 +18,7 @@
     import 'dayjs/locale/de'
 
     import defaultFilterSettings from '../_filtersettings'
+    import defaultFilterOptions from '../_filteroptions'
 
     export default {
         components: {
@@ -39,9 +40,8 @@
                 loading: false,
                 resultData: {},
                 resultMeta: null,
-                defaultFilterSettings: defaultFilterSettings,
-                filterSettings: this.initialFilterSettings,
-                filterOptions: this.initialFilterOptions
+                filterSettings: defaultFilterSettings,
+                filterOptions: defaultFilterOptions
             }
         },
         props: {
@@ -51,18 +51,11 @@
             },
             initialFilterSettings: {
                 type: Object,
-                default () {
-                    return defaultFilterSettings;
-                }
+                default: null
             },
-            initialFilterOptions: {
-                type: Object,
-                default () {
-                    return defaultFilterSettings;
-                }
-            },
-            referringPageUid: {
-                type: Number
+            referringPageUrl: {
+                type: String,
+                default: ''
             },
             argumentPrefix: {
                 type: String,
@@ -141,62 +134,81 @@
                 });
             },
             resetFilterSettings () {
-                this.filterSettings = this.defaultFilterSettings;
+                this.updateFilterSettings(defaultFilterSettings);
                 EventBus.$emit('filterSettingsReset');
                 this.loadResults();
             },
             updateDestination (destination) {
-                this.filterSettings.destinationUid = destination.uid;
-                this.filterSettings.destinationType = destination.type;
-                this.filterSettings.destinationName = destination.name;
+                this.updateFilterSettings({
+                    destinationUid: destination.uid,
+                    destinationType: destination.type,
+                    destinationName: destination.name
+                });
                 this.loadResults();
             },
             updateDestinations (destinations) {
-                this.filterSettings.countryUids = destinations.countryUids;
-                this.filterSettings.regionUids = destinations.regionUids;
+                this.updateFilterSettings({
+                    countryUids: destinations.countryUids,
+                    regionUids: destinations.regionUids
+                });
                 this.loadResults();
             },
             updateConcepts (conceptUids) {
-                this.filterSettings.conceptUids = conceptUids;
+                this.updateFilterSettings({ conceptUids: conceptUids });
                 this.loadResults();
             },
             updateDateRange (range) {
-                this.filterSettings.dateFrom = (range.from !== null) ? dayjs(range.from).format('YYYY-MM-DD') : null;
-                this.filterSettings.dateTo = (range.to !== null) ? dayjs(range.to).format('YYYY-MM-DD') : null;
+                const dateFrom = (range.from !== null) ? dayjs(range.from).format('YYYY-MM-DD') : null;
+                const dateTo = (range.to !== null) ? dayjs(range.to).format('YYYY-MM-DD') : null;
+                this.updateFilterSettings({ dateFrom: dateFrom, dateTo: dateTo });
                 this.loadResults();
             },
             updateDateSelectMobile () {
-                if (this.filterSettings.dateFrom === '') {
-                    this.filterSettings.dateFrom = null;
+                let dateFrom = this.filterSettings.dateFrom;
+                let dateTo = this.filterSettings.dateTo;
+                if (dateFrom === '') {
+                    dateFrom = null;
                 }
-                if (this.filterSettings.dateTo === '') {
-                    this.filterSettings.dateTo = null;
+                if (dateTo === '') {
+                    dateTo = null;
                 }
+                this.updateFilterSettings({ dateFrom: dateFrom, dateTo: dateTo });
                 this.loadResults();
             },
             updatePriceRange (range) {
-                this.filterSettings.priceRange = range;
+                this.updateFilterSettings({ priceRange: range });
                 this.loadResults();
             },
             updatePax (pax) {
-                this.filterSettings.pax = pax;
+                this.updateFilterSettings({ pax: pax });
                 this.loadResults();
             },
             updateHotelTypes (hotelTypes) {
-                this.filterSettings.hotelTypes = hotelTypes;
+                this.updateFilterSettings({ hotelTypes: hotelTypes });
                 this.loadResults();
             },
-            updateBoardTypes (hotelTypes) {
-                this.filterSettings.boardTypes = hotelTypes;
+            updateBoardTypes (boardTypes) {
+                this.updateFilterSettings({ boardTypes: boardTypes });
                 this.loadResults();
             },
             updateRoomTypes (roomTypes) {
-                this.filterSettings.roomTypes = roomTypes;
+                this.updateFilterSettings({ roomTypes: roomTypes });
                 this.loadResults();
             },
             updateBus (bus) {
-                this.filterSettings.bus = bus;
+                this.updateFilterSettings({ bus: bus });
                 this.loadResults();
+            },
+            updateFilterSettings (settings) {
+                this.filterSettings = { ...this.filterSettings, ...settings };
+                this.$session.set('filterSettings', this.filterSettings);
+            }
+        },
+        created () {
+            if (!$.isEmptyObject(this.initialFilterSettings)) {
+                this.updateFilterSettings(this.initialFilterSettings)
+            } else if (this.$session.has('filterSettings')) {
+                this.updateFilterSettings(this.$session.get('filterSettings'))
             }
         },
         mounted () {

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/SearchResultItem.vue

@@ -2,7 +2,8 @@
     <div class="teaserbox teaserbox--landscape teaserbox--searchresult searchresult-item">
         <div class="teaserbox__image">
             <img class="teaserbox__flag" :src="item.country.flag" :alt="item.country.name"/>
-            <a :href="item.detailPageUri" rel="nofollow">
+            <referrer-link :href="item.detailPageUri" :referring-page="{ url: referringPageUrl, label: 'zurück zum Suchergebnis' }"
+                           rel="nofollow" title="Details &amp; Buchen">
                 <picture class="searchresult-item__image">
                     <source media="(max-width: 768px)" :srcset="item.hotel.images.resized.s[0].url + ' 220w'"/>
                     <source media="(max-width: 1200px)" :srcset="item.hotel.images.resized.l[0].url + ' 280w'"/>
@@ -11,7 +12,7 @@
                          :title="item.hotel.images.resized.s[0].title"
                          :alt="item.hotel.images.resized.s[0].alt">
                 </picture>
-            </a>
+            </referrer-link>
             <div class="concept-badge" :id="section.concept.code"
                  :class=" 'concept-badge--' + section.concept.code">{{ section.concept.name }}</div>
         </div>
@@ -44,19 +45,21 @@
             <div class="teaserbox__aside__top">
                 <span class="searchresult-item__label">{{ item.dates.length > 1 ? 'Zeitraum' : 'Termin' }}</span>
                 <span class="searchresult-item__daterange">{{ dateRange }}</span>
-                <a :href="item.detailPageUri" rel="nofollow" v-if="item.dates.length && !item.daytrip">
+                <referrer-link :href="item.detailPageUri" :referring-page="{ url: referringPageUrl, label: 'zurück zum Suchergebnis' }"
+                               rel="nofollow" title="Details &amp; Buchen" v-if="item.dates.length && !item.daytrip">
                     <span class="searchresult-item__daterange">
                         <i class="fa fa-arrow-circle-right"></i> {{ item.dates.length }} Termin{{ item.dates.length > 1 ? 'e' : '' }}
                     </span>
-                </a>
+                </referrer-link>
                 <hr>
                 <span class="searchresult-item__label">{{ item.daytrip ? 'Tageweise buchbar' : nightsOptions }}</span>
             </div>
             <div class="teaserbox__aside__bottom">
                 <span class="searchresult-item__price">ab {{ item.minPrice }} €</span>
-                <a :href="item.detailPageUri" class="button button--full searchresult-item__button" rel="nofollow">
+                <referrer-link :href="item.detailPageUri" :referring-page="{ url: referringPageUrl, label: 'zurück zum Suchergebnis' }"
+                               class="button button--full searchresult-item__button" rel="nofollow" title="Details &amp; Buchen">
                     Details &amp; Buchen
-                </a>
+                </referrer-link>
             </div>
         </div>
         <watchlist-toggle :uid="item.key" :watchlist="watchlist" class="teaserbox-watchlist"></watchlist-toggle>
@@ -67,10 +70,12 @@
     import dayjs from 'dayjs'
     import 'dayjs/locale/de'
     import WatchlistToggle from './WatchlistToggle.vue'
+    import ReferrerLink from './ReferrerLink.vue'
 
     export default {
         components: {
-            WatchlistToggle
+            WatchlistToggle,
+            ReferrerLink
         },
         props: {
             item: {
@@ -86,6 +91,10 @@
                 default () {
                     return [];
                 }
+            },
+            referringPageUrl: {
+                type: String,
+                default: null
             }
         },
         computed: {

web/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/TeaserWide.html

@@ -80,48 +80,33 @@
                             <span class="searchresult-item__label">{f:if(condition: '{item.dates -> f:count()} > 1', then: 'Zeitraum', else: 'Termin')}</span>
                             <span class="searchresult-item__daterange">{ep:dateRange(dateFrom: item.minDateStart, dateTo: item.maxDateEnd, includeLabel: 0)}</span>
                             <f:if condition="{item.dates -> f:count()} > 1">
-                                <f:link.action
-                                    pageUid="{product.detailPage}"
-                                    action="detail"
-                                    controller="Product"
-                                    arguments="{
-                                        product: product.uid,
-                                        hotel: item.hotel.uid,
-                                        referringPageUid: referringPageUid,
-                                        filterSettings: '{filterSettings -> ep:filterSettingsEncoder()}'
-                                    }"
-                                    additionalAttributes="{rel: 'nofollow'}"
-                                >
+                                <referrer-link href="{f:uri.action(pageUid: detailPage, action: 'detail', controller: 'Product', arguments: '{product: product.uid, hotel: item.hotel.uid}')}"
+                                               :referring-page="{ url: referringPageUrl, label: 'zurück' }"
+                                               class="button button--full searchresult-item__button" rel="nofollow">
                                     <span class="searchresult-item__daterange">
                                         <i class="fa fa-arrow-circle-right"></i> {item.dates -> f:count()} Termin{f:if(condition: '{item.dates -> f:count()} > 1', then: 'e')}
                                     </span>
-                                </f:link.action>
+                                </referrer-link>
                             </f:if>
                             <hr>
                             <span class="searchresult-item__label">{ep:nightsOptions(options: item.nights)}</span>
                         </div>
                         <div class="teaserbox__aside__bottom">
                             <span class="searchresult-item__price">ab {item.minPrice} €</span>
-                            <f:link.action
-                                pageUid="{product.detailPage}"
-                                action="detail"
-                                controller="Product"
-                                arguments="{product: product.uid, hotel: item.hotel.uid, referringPageUid: referringPageUid, filterSettings: '{filterSettings -> ep:filterSettingsEncoder()}'}"
-                                class="button button--full searchresult-item__button"
-                                additionalAttributes="{rel: 'nofollow'}">Details &amp; Buchen</f:link.action>
+                            <referrer-link href="{f:uri.action(pageUid: detailPage, action: 'detail', controller: 'Product', arguments: '{product: product.uid, hotel: item.hotel.uid}')}"
+                                           :referring-page="{ url: referringPageUrl, label: 'zurück' }"
+                                           class="button button--full searchresult-item__button" rel="nofollow">
+                                Details &amp; Buchen
+                            </referrer-link>
                         </div>
                     </f:then>
                     <f:else>
                         <div class="teaserbox__aside__top">&nbsp;</div>
                         <div class="teaserbox__aside__bottom">
                             <span class="searchresult-item__price">ausgebucht</span>
-                            <f:link.action
-                                pageUid="{product.detailPage}"
-                                action="detail"
-                                controller="Product"
-                                arguments="{product: product.uid, hotel: item.hotel.uid, referringPageUid: referringPageUid, filterSettings: '{filterSettings -> ep:filterSettingsEncoder()}'}"
-                                class="button button--full searchresult-item__button"
-                                additionalAttributes="{rel: 'nofollow'}">Details</f:link.action>
+                            <referrer-link href="{f:uri.action(pageUid: detailPage, action: 'detail', controller: 'Product', arguments: '{product: product.uid, hotel: item.hotel.uid}')}"
+                                           :referring-page="{ url: referringPageUrl, label: 'zurück' }"
+                                           class="button button--full searchresult-item__button" rel="nofollow">Details</referrer-link>
                         </div>
                     </f:else>
                 </f:if>

web/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/HeaderDetail.html

@@ -60,20 +60,8 @@
             </f:link.typolink>
         </f:if>
     </div>
-    <f:if condition="{referringPageUid}">
-        <div class="ep-backlink">
-            <f:if condition="{referringPageUid} == {settings.defaultSearchPageUid}">
-                <f:then>
-                    <f:link.action pageUid="{referringPageUid}"
-                                   action="searchresult"
-                                   controller="Search"
-                                   arguments="{filterSettings: '{filterSettings -> ep:filterSettingsEncoder()}'}">zurück zum Suchergebnis</f:link.action>
-                </f:then>
-                <f:else>
-                    <f:link.typolink parameter="{referringPageUid}">zurück</f:link.typolink>
-                </f:else>
-            </f:if>
-        </div>
-    </f:if>
+    <div class="ep-backlink" v-if="referringPage" v-cloak>
+        <a :href="referringPage.url">{{ referringPage.label }}</a>
+    </div>
     {v:render.template(file: 'EXT:ep_theme/Resources/Private/Partials/Breadcrumb.html')}
 </div>

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

@@ -7,235 +7,236 @@
     <f:layout name="Default"/>
 
     <f:section name="Main">
-        <f:render partial="Product/HeaderDetail" arguments="{_all}"/>
-        <div class="container" id="detail">
-            <noscript><h1>{product.headline}</h1></noscript>
-            <product-detail
-                :filter-settings='<v:format.json.encode>{filterSettings}</v:format.json.encode>'
-                :uris='{
-                    dates: "<f:format.raw>{ep:uri.ajax(action: 'dates', controller: 'AjaxDate', arguments: '{product: product, hotel: hotel}', format: 'json', noCacheHash: 1)}</f:format.raw>",
-                    contingents: "<f:format.raw>{ep:uri.ajax(action: 'list', controller: 'AjaxContingent', format: 'json', noCacheHash: 1)}</f:format.raw>",
-                    rooms: "<f:format.raw>{ep:uri.ajax(action: 'rooms', controller: 'AjaxContingent', format: 'json', noCacheHash: 1)}</f:format.raw>",
-                    pricetable: "<f:format.raw>{ep:uri.ajax(action: 'pricetable', controller: 'AjaxTable', arguments: '{product: product, hotel: hotel}', format: 'json', noCacheHash: 1)}</f:format.raw>"
-                }'
-                argument-prefix='<ep:argumentPrefix pluginName="Ajax" />'
-                :hotel-first="{f:if(condition: settings.hotelOnTop, then: 'true', else: 'false')}"
-                :fb-pixel-data="{ productUid: <f:format.raw>{product.uid}</f:format.raw>, nameInternal: '<f:format.raw>{product.nameInternal}</f:format.raw>' }"
-                :watchlist="watchlist"
-                :daytrip="{product.daytrip -> v:variable.convert(type: 'int')}"
-                inline-template>
-                <div class="product-detail-wrapper">
-                    <div class="row">
-                        <div class="col-md-12">
-                            <f:render partial="Header/Header" arguments="{layout: 8, subheader: product.name, header: product.headline}"/>
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="col-md-4 col-md-push-8">
-                            <div class="row">
-                                <div class="col-xs-12">
-                                    <f:if condition="{settings.hotelOnTop}">
-                                        <f:then>
-                                            <button class="button button--light button--sidebar"
-                                                    :class="{ 'button--active': activeSection === 'hotel'}"
-                                                    @click.prevent="showHtml('hotel')">Unterkunft</button>
-                                        </f:then>
-                                        <f:else>
-                                            <button class="button button--light button--sidebar"
-                                                    :class="{ 'button--active': activeSection === 'dates'}"
-                                                    @click.prevent="loadDatesView()">Termine/Preise</button>
-                                        </f:else>
-                                    </f:if>
-                                </div>
-                            </div>
-                            <div class="row">
-                                <div class="col-xs-6 col-md-12">
-                                    <f:if condition="{settings.hotelOnTop}">
-                                        <f:then>
-                                            <button class="button button--light button--sidebar"
-                                                    :class="{ 'button--active': activeSection === 'dates'}"
-                                                    @click.prevent="loadDatesView()">Termine/Preise</button>
-                                        </f:then>
-                                        <f:else>
-                                            <button class="button button--light button--sidebar"
-                                                    :class="{ 'button--active': activeSection === 'hotel'}"
-                                                    @click.prevent="showHtml('hotel')">Unterkunft</button>
-                                        </f:else>
-                                    </f:if>
-                                    <button class="button button--light button--sidebar"
-                                            :class="{ 'button--active': activeSection === 'region'}"
-                                            @click.prevent="showHtml('region')">Gebiet</button>
-                                </div>
-                                <div class="col-xs-6 col-md-12">
-                                    <button class="button button--light button--sidebar"
-                                            :class="{ 'button--active': activeSection === 'city'}"
-                                            @click.prevent="showHtml('city')">Ort</button>
-                                    <f:if condition="{product.journey}">
-                                        <button class="button button--light button--sidebar"
-                                                :class="{ 'button--active': activeSection === 'journey'}"
-                                                @click.prevent="showHtml('journey')">Anreise</button>
-                                    </f:if>
-                                </div>
-                                <div class="col-xs-12">
-                                    <p>
-                                        <watchlist-toggle :watchlist="watchlist" uid="{hotel.uid}:{product.uid}"
-                                                         layout="link"></watchlist-toggle>
-                                    </p>
-                                </div>
-                            </div>
-                            <div class="hidden-xs">
-                                <f:render section="Calendar" arguments="{_all}"/>
-                                <f:render partial="Facts" arguments="{facts: product.facts}"/>
-                                <f:if condition="{product.video}">
-                                    <div class="video">
-                                        <iframe class="video__frame" width="560" height="315" frameborder="0" allowfullscreen
-                                                src="{ep:uri.video(value: product.video)}"></iframe>
-                                    </div>
-                                </f:if>
-                                <div class="ep-sidebar ep-snow">
-                                    <p><strong>Lage</strong></p>
-                                    <div>
-                                        <osm-map lat="{hotel.latitude}" lng="{hotel.longitude}" :zoom="12"
-                                              external-link="{f:uri.typolink(parameter: hotel.externalLink)}"></osm-map>
-                                    </div>
-                                </div>
-                                <f:render partial="Region/Webcam" arguments="{region: region}"/>
-                                <f:render partial="RegionMaps" arguments="{region: product.region}"/>
-                                <f:render partial="RegionAward" arguments="{region: product.region}"/>
-                                <f:if condition="{product.banner}">
-                                    <div class="ep-sidebar ep-snow">
-                                        <f:link.typolink parameter="{product.banner.originalResource.link}"
-                                                     title="{product.banner.title}">
-                                            <f:image src="{product.banner.uid}" treatIdAsReference="1"
-                                                     class="scale" alt="{product.banner.alternative}"/>
-                                        </f:link.typolink>
-                                    </div>
-                                </f:if>
-                                <f:render partial="Rating" arguments="{product: product, targetPageUid: settings.ratingPageUid, label: settings.ratingWidgetLabel}"/>
-                                <f:render partial="Snowreport" arguments="{snowreport: product.region.snowreport}"/>
-                                <f:render partial="Officetip" arguments="{officetip: product.officetip}"/>
-                                <f:render partial="Teamer" arguments="{teamer: hotel.teamer}"/>
+        <noscript><h1>{product.headline}</h1></noscript>
+        <product-detail
+            :uris='{
+                dates: "<f:format.raw>{ep:uri.ajax(action: 'dates', controller: 'AjaxDate', arguments: '{product: product, hotel: hotel}', format: 'json', noCacheHash: 1)}</f:format.raw>",
+                contingents: "<f:format.raw>{ep:uri.ajax(action: 'list', controller: 'AjaxContingent', format: 'json', noCacheHash: 1)}</f:format.raw>",
+                rooms: "<f:format.raw>{ep:uri.ajax(action: 'rooms', controller: 'AjaxContingent', format: 'json', noCacheHash: 1)}</f:format.raw>",
+                pricetable: "<f:format.raw>{ep:uri.ajax(action: 'pricetable', controller: 'AjaxTable', arguments: '{product: product, hotel: hotel}', format: 'json', noCacheHash: 1)}</f:format.raw>"
+            }'
+            argument-prefix='<ep:argumentPrefix pluginName="Ajax" />'
+            :hotel-first="{f:if(condition: settings.hotelOnTop, then: 'true', else: 'false')}"
+            :fb-pixel-data="{ productUid: <f:format.raw>{product.uid}</f:format.raw>, nameInternal: '<f:format.raw>{product.nameInternal}</f:format.raw>' }"
+            :watchlist="watchlist"
+            :daytrip="{product.daytrip -> v:variable.convert(type: 'int')}"
+            inline-template>
+            <article>
+                <f:render partial="Product/HeaderDetail" arguments="{_all}"/>
+                <div class="container" id="detail">
+                    <div class="product-detail-wrapper">
+                        <div class="row">
+                            <div class="col-md-12">
+                                <f:render partial="Header/Header" arguments="{layout: 8, subheader: product.name, header: product.headline}"/>
                             </div>
                         </div>
-                        <div id="main" class="col-md-8 col-md-pull-4">
-                            <!-- Dates -->
-                            <div v-cloak v-show="!loading && datesShow">
-                                <f:if condition="{isProductWithExcludedConcept}">
-                                    <f:if condition="{product.region.season} == 'w'">
-                                        <div class="alert alert-info">
-                                            <p><strong>Gruppenrabatt bis zu 100€ möglich</strong></p>
-                                            <p>Für Gruppen bis 15 Personen könnt ihr <f:link.typolink parameter="31">hier direkt buchen</f:link.typolink>.
-                                                Für Gruppen ab 16 Personen erstellen wir euch ein konkretes Angebot zu günstigen
-                                                Gruppenkonditionen zu dieser Reise. Anfrage via Tel. 0221 - 272 276 18 oder mit einer
-                                                <f:link.typolink parameter="{settings.defaultContactFormPageUid}">Kurzanfrage</f:link.typolink>!</p>
-                                        </div>
-                                    </f:if>
-                                </f:if>
-                                <f:if condition="{product.daytrip}">
-                                    <f:then>
-                                        <date-select
-                                            hotel-name="{hotel.name}"
-                                            :hotel-uid="{hotel.uid}"
-                                            :product-uid="{product.uid}"
-                                            :contingent-endpoint-uri="uris.contingents"
-                                            :rooms-endpoint-uri="uris.rooms"
-                                            :argument-prefix="argumentPrefix"
-                                            loader-uri="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif')}"
-                                        ></date-select>
-                                    </f:then>
-                                    <f:else>
-                                        <template v-if="available">
-                                            <dates-table :dates-rows="datesRows"
-                                                         :alt-product-link="altProductLink"
-                                                         :alt-label="altLabel"
-                                                         hotel-name="{hotel.name}"
-                                                         :bookable="bookable"
-                                            ></dates-table>
-                                        </template>
-                                        <f:if condition="{isProductWithNoInfoConcept}">
+                        <div class="row">
+                            <div class="col-md-4 col-md-push-8">
+                                <div class="row">
+                                    <div class="col-xs-12">
+                                        <f:if condition="{settings.hotelOnTop}">
+                                            <f:then>
+                                                <button class="button button--light button--sidebar"
+                                                        :class="{ 'button--active': activeSection === 'hotel'}"
+                                                        @click.prevent="showHtml('hotel')">Unterkunft</button>
+                                            </f:then>
                                             <f:else>
-                                                <template v-else>
-                                                    <div class="alert alert-info">
-                                                        Die von dir gewählte Reise ist aktuell nicht buchbar, aber wir helfen dir gerne dabei,
-                                                        eine andere Reise zu finden. Ruf uns an unter <a href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}" title="Service Telefon anrufen" rel="nofollow">{settings.phoneNumber}</a>
-                                                        oder schreibe an <f:link.email email="[email protected]"/>.
-                                                    </div>
-                                                </template>
+                                                <button class="button button--light button--sidebar"
+                                                        :class="{ 'button--active': activeSection === 'dates'}"
+                                                        @click.prevent="loadDatesView()">Termine/Preise</button>
                                             </f:else>
                                         </f:if>
-                                    </f:else>
-                                </f:if>
-                                <f:render partial="Product/Details" arguments="{_all}"/>
-                            </div>
-                            <!-- /Dates -->
-                            <!-- Prices -->
-                            <div v-cloak v-show="!loading && priceTableShow">
-                                <price-table :price-table-rows="priceTableRows" :services-included="servicesIncluded"
-                                             :date-label="dateLabel" :single-date="singleDate"></price-table>
-                                <f:render partial="Product/Details" arguments="{_all}"/>
-                            </div>
-                            <!-- /Prices -->
-                            <!-- Hotel -->
-                            <div v-show="detailShow && activeSection === 'hotel'">
-                                <f:render partial="Hotel/Details" arguments="{hotel: hotel, bars: 1, showNonBookableHint: 0}"/>
-                            </div>
-                            <!-- /Hotel -->
-                            <!-- City -->
-                            <div v-show="detailShow && activeSection === 'city'">
-                                <f:render partial="City/Details" arguments="{city: product.city, bars: 1}"/>
-                            </div>
-                            <!-- /City -->
-                            <!-- Region -->
-                            <div v-show="detailShow && activeSection === 'region'">
-                                <f:render partial="Region/Details" arguments="{region: product.region, bars: 1}"/>
-                            </div>
-                            <!-- /Region -->
-                            <!-- Journey -->
-                            <div v-show="detailShow && activeSection === 'journey'">
-                                <f:render partial="Journey/Details" arguments="{journey: product.journey, bars: 1}"/>
-                            </div>
-                            <!-- /Journey -->
-                            <!-- Loader -->
-                            <div v-show="loading" class="loader"><p>Loading... <f:image src="EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif" alt="Loading"/></p></div>
-                            <!-- /Loader -->
-                            <div class="hidden-md hidden-lg">
-                                <f:render section="Calendar" arguments="{_all}"/>
-                                <f:render partial="Facts" arguments="{facts: product.facts}"/>
-                                <f:if condition="{product.video}">
-                                    <div class="video">
-                                        <iframe class="video__frame" width="560" height="315" frameborder="0" allowfullscreen
-                                                src="{ep:uri.video(value: product.video)}"></iframe>
-                                    </div>
-                                </f:if>
-                                <div class="ep-sidebar ep-snow">
-                                    <p><strong>Lage</strong></p>
-                                    <div>
-                                        <osm-map lat="{hotel.latitude}" lng="{hotel.longitude}" :zoom="12"
-                                              external-link="{f:uri.typolink(parameter: hotel.externalLink)}"></osm-map>
                                     </div>
                                 </div>
-                                <f:render partial="Region/Webcam" arguments="{region: region}"/>
-                                <f:render partial="RegionMaps" arguments="{region: product.region}"/>
-                                <f:render partial="RegionAward" arguments="{region: product.region}"/>
-                                <f:if condition="{product.banner}">
-                                    <div class="ep-sidebar ep-snow">
-                                        <f:link.typolink parameter="{product.banner.originalResource.link}"
-                                                     title="{product.banner.title}">
-                                            <f:image src="{product.banner.uid}" treatIdAsReference="1"
-                                                     class="scale" alt="{product.banner.alternative}"/>
-                                        </f:link.typolink>
+                                <div class="row">
+                                    <div class="col-xs-6 col-md-12">
+                                        <f:if condition="{settings.hotelOnTop}">
+                                            <f:then>
+                                                <button class="button button--light button--sidebar"
+                                                        :class="{ 'button--active': activeSection === 'dates'}"
+                                                        @click.prevent="loadDatesView()">Termine/Preise</button>
+                                            </f:then>
+                                            <f:else>
+                                                <button class="button button--light button--sidebar"
+                                                        :class="{ 'button--active': activeSection === 'hotel'}"
+                                                        @click.prevent="showHtml('hotel')">Unterkunft</button>
+                                            </f:else>
+                                        </f:if>
+                                        <button class="button button--light button--sidebar"
+                                                :class="{ 'button--active': activeSection === 'region'}"
+                                                @click.prevent="showHtml('region')">Gebiet</button>
                                     </div>
-                                </f:if>
-                                <f:render partial="Rating" arguments="{product: product, targetPageUid: settings.ratingPageUid, label: settings.ratingWidgetLabel}"/>
-                                <f:render partial="Snowreport" arguments="{snowreport: product.region.snowreport}"/>
-                                <f:render partial="Officetip" arguments="{officetip: product.officetip}"/>
-                                <f:render partial="Teamer" arguments="{teamer: hotel.teamer}"/>
+                                    <div class="col-xs-6 col-md-12">
+                                        <button class="button button--light button--sidebar"
+                                                :class="{ 'button--active': activeSection === 'city'}"
+                                                @click.prevent="showHtml('city')">Ort</button>
+                                        <f:if condition="{product.journey}">
+                                            <button class="button button--light button--sidebar"
+                                                    :class="{ 'button--active': activeSection === 'journey'}"
+                                                    @click.prevent="showHtml('journey')">Anreise</button>
+                                        </f:if>
+                                    </div>
+                                    <div class="col-xs-12">
+                                        <p>
+                                            <watchlist-toggle :watchlist="watchlist" uid="{hotel.uid}:{product.uid}"
+                                                             layout="link"></watchlist-toggle>
+                                        </p>
+                                    </div>
+                                </div>
+                                <div class="hidden-xs">
+                                    <f:render section="Calendar" arguments="{_all}"/>
+                                    <f:render partial="Facts" arguments="{facts: product.facts}"/>
+                                    <f:if condition="{product.video}">
+                                        <div class="video">
+                                            <iframe class="video__frame" width="560" height="315" frameborder="0" allowfullscreen
+                                                    src="{ep:uri.video(value: product.video)}"></iframe>
+                                        </div>
+                                    </f:if>
+                                    <div class="ep-sidebar ep-snow">
+                                        <p><strong>Lage</strong></p>
+                                        <div>
+                                            <osm-map lat="{hotel.latitude}" lng="{hotel.longitude}" :zoom="12"
+                                                  external-link="{f:uri.typolink(parameter: hotel.externalLink)}"></osm-map>
+                                        </div>
+                                    </div>
+                                    <f:render partial="Region/Webcam" arguments="{region: region}"/>
+                                    <f:render partial="RegionMaps" arguments="{region: product.region}"/>
+                                    <f:render partial="RegionAward" arguments="{region: product.region}"/>
+                                    <f:if condition="{product.banner}">
+                                        <div class="ep-sidebar ep-snow">
+                                            <f:link.typolink parameter="{product.banner.originalResource.link}"
+                                                         title="{product.banner.title}">
+                                                <f:image src="{product.banner.uid}" treatIdAsReference="1"
+                                                         class="scale" alt="{product.banner.alternative}"/>
+                                            </f:link.typolink>
+                                        </div>
+                                    </f:if>
+                                    <f:render partial="Rating" arguments="{product: product, targetPageUid: settings.ratingPageUid, label: settings.ratingWidgetLabel}"/>
+                                    <f:render partial="Snowreport" arguments="{snowreport: product.region.snowreport}"/>
+                                    <f:render partial="Officetip" arguments="{officetip: product.officetip}"/>
+                                    <f:render partial="Teamer" arguments="{teamer: hotel.teamer}"/>
+                                </div>
+                            </div>
+                            <div id="main" class="col-md-8 col-md-pull-4">
+                                <!-- Dates -->
+                                <div v-cloak v-show="!loading && datesShow">
+                                    <f:if condition="{isProductWithExcludedConcept}">
+                                        <f:if condition="{product.region.season} == 'w'">
+                                            <div class="alert alert-info">
+                                                <p><strong>Gruppenrabatt bis zu 100€ möglich</strong></p>
+                                                <p>Für Gruppen bis 15 Personen könnt ihr <f:link.typolink parameter="31">hier direkt buchen</f:link.typolink>.
+                                                    Für Gruppen ab 16 Personen erstellen wir euch ein konkretes Angebot zu günstigen
+                                                    Gruppenkonditionen zu dieser Reise. Anfrage via Tel. 0221 - 272 276 18 oder mit einer
+                                                    <f:link.typolink parameter="{settings.defaultContactFormPageUid}">Kurzanfrage</f:link.typolink>!</p>
+                                            </div>
+                                        </f:if>
+                                    </f:if>
+                                    <f:if condition="{product.daytrip}">
+                                        <f:then>
+                                            <date-select
+                                                hotel-name="{hotel.name}"
+                                                :hotel-uid="{hotel.uid}"
+                                                :product-uid="{product.uid}"
+                                                :contingent-endpoint-uri="uris.contingents"
+                                                :rooms-endpoint-uri="uris.rooms"
+                                                :argument-prefix="argumentPrefix"
+                                                loader-uri="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif')}"
+                                            ></date-select>
+                                        </f:then>
+                                        <f:else>
+                                            <template v-if="available">
+                                                <dates-table :dates-rows="datesRows"
+                                                             :alt-product-link="altProductLink"
+                                                             :alt-label="altLabel"
+                                                             hotel-name="{hotel.name}"
+                                                             :bookable="bookable"
+                                                ></dates-table>
+                                            </template>
+                                            <f:if condition="{isProductWithNoInfoConcept}">
+                                                <f:else>
+                                                    <template v-else>
+                                                        <div class="alert alert-info">
+                                                            Die von dir gewählte Reise ist aktuell nicht buchbar, aber wir helfen dir gerne dabei,
+                                                            eine andere Reise zu finden. Ruf uns an unter <a href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}" title="Service Telefon anrufen" rel="nofollow">{settings.phoneNumber}</a>
+                                                            oder schreibe an <f:link.email email="[email protected]"/>.
+                                                        </div>
+                                                    </template>
+                                                </f:else>
+                                            </f:if>
+                                        </f:else>
+                                    </f:if>
+                                    <f:render partial="Product/Details" arguments="{_all}"/>
+                                </div>
+                                <!-- /Dates -->
+                                <!-- Prices -->
+                                <div v-cloak v-show="!loading && priceTableShow">
+                                    <price-table :price-table-rows="priceTableRows" :services-included="servicesIncluded"
+                                                 :date-label="dateLabel" :single-date="singleDate"></price-table>
+                                    <f:render partial="Product/Details" arguments="{_all}"/>
+                                </div>
+                                <!-- /Prices -->
+                                <!-- Hotel -->
+                                <div v-show="detailShow && activeSection === 'hotel'">
+                                    <f:render partial="Hotel/Details" arguments="{hotel: hotel, bars: 1, showNonBookableHint: 0}"/>
+                                </div>
+                                <!-- /Hotel -->
+                                <!-- City -->
+                                <div v-show="detailShow && activeSection === 'city'">
+                                    <f:render partial="City/Details" arguments="{city: product.city, bars: 1}"/>
+                                </div>
+                                <!-- /City -->
+                                <!-- Region -->
+                                <div v-show="detailShow && activeSection === 'region'">
+                                    <f:render partial="Region/Details" arguments="{region: product.region, bars: 1}"/>
+                                </div>
+                                <!-- /Region -->
+                                <!-- Journey -->
+                                <div v-show="detailShow && activeSection === 'journey'">
+                                    <f:render partial="Journey/Details" arguments="{journey: product.journey, bars: 1}"/>
+                                </div>
+                                <!-- /Journey -->
+                                <!-- Loader -->
+                                <div v-show="loading" class="loader"><p>Loading... <f:image src="EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif" alt="Loading"/></p></div>
+                                <!-- /Loader -->
+                                <div class="hidden-md hidden-lg">
+                                    <f:render section="Calendar" arguments="{_all}"/>
+                                    <f:render partial="Facts" arguments="{facts: product.facts}"/>
+                                    <f:if condition="{product.video}">
+                                        <div class="video">
+                                            <iframe class="video__frame" width="560" height="315" frameborder="0" allowfullscreen
+                                                    src="{ep:uri.video(value: product.video)}"></iframe>
+                                        </div>
+                                    </f:if>
+                                    <div class="ep-sidebar ep-snow">
+                                        <p><strong>Lage</strong></p>
+                                        <div>
+                                            <osm-map lat="{hotel.latitude}" lng="{hotel.longitude}" :zoom="12"
+                                                  external-link="{f:uri.typolink(parameter: hotel.externalLink)}"></osm-map>
+                                        </div>
+                                    </div>
+                                    <f:render partial="Region/Webcam" arguments="{region: region}"/>
+                                    <f:render partial="RegionMaps" arguments="{region: product.region}"/>
+                                    <f:render partial="RegionAward" arguments="{region: product.region}"/>
+                                    <f:if condition="{product.banner}">
+                                        <div class="ep-sidebar ep-snow">
+                                            <f:link.typolink parameter="{product.banner.originalResource.link}"
+                                                         title="{product.banner.title}">
+                                                <f:image src="{product.banner.uid}" treatIdAsReference="1"
+                                                         class="scale" alt="{product.banner.alternative}"/>
+                                            </f:link.typolink>
+                                        </div>
+                                    </f:if>
+                                    <f:render partial="Rating" arguments="{product: product, targetPageUid: settings.ratingPageUid, label: settings.ratingWidgetLabel}"/>
+                                    <f:render partial="Snowreport" arguments="{snowreport: product.region.snowreport}"/>
+                                    <f:render partial="Officetip" arguments="{officetip: product.officetip}"/>
+                                    <f:render partial="Teamer" arguments="{teamer: hotel.teamer}"/>
+                                </div>
                             </div>
                         </div>
-                    </div>
-                    <facebook-pixel :values="{ content_ids: [ fbPixelData.productUid ], content_name: fbPixelData.nameInternal, content_type: 'product' }"></facebook-pixel>
-                </div>
-            </product-detail>
+                        <facebook-pixel :values="{ content_ids: [ fbPixelData.productUid ], content_name: fbPixelData.nameInternal, content_type: 'product' }"></facebook-pixel>
+                    </article>
+                </product-detail>
+            </div>
         </div>
         <f:render partial="Faq" arguments="{faqs: product.faqs, settings: settings}"/>
     </f:section>

web/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/HotelList.html

@@ -5,48 +5,55 @@
     <f:layout name="Default"/>
 
     <f:section name="Main">
-        <f:render partial="Product/HeaderDetail" arguments="{_all}"/>
-        <div class="container">
-            <div class="row">
-                <div class="col-md-12">
-                    <f:render partial="Header/Header" arguments="{layout: 8, subheader: product.name, header: product.headline}"/>
+        <hotel-list
+            :watchlist="watchlist"
+            referring-page-url="{f:uri.typolink(parameter: currentPageUid)}"
+            inline-template>
+            <article>
+                <f:render partial="Product/HeaderDetail" arguments="{_all}"/>
+                <div class="container">
+                    <div class="row">
+                        <div class="col-md-12">
+                            <f:render partial="Header/Header" arguments="{layout: 8, subheader: product.name, header: product.headline}"/>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-md-12">
+                            {product.teaserLong -> f:format.html()}
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-md-12">
+                            <div class="ep-headbar">Wähle deine Unterkunft</div>
+                        </div>
+                    </div>
                 </div>
-            </div>
-            <div class="row">
-                <div class="col-md-12">
-                    {product.teaserLong -> f:format.html()}
+                <div class="container">
+                    <div class="row">
+                        <div class="col-xs-12">
+                            <f:if condition="{hotels}">
+                                <f:then>
+                                    <f:for each="{hotels}" as="item">
+                                        <f:render partial="Hotel/TeaserWide" section="Teaser" arguments="{
+                                            item: item,
+                                            product: product,
+                                            referringPageUrl: referringPageUrl
+                                        }"/>
+                                    </f:for>
+                                </f:then>
+                                <f:else>
+                                    <div class="alert alert-info">
+                                        Die von dir gewählte Reise ist aktuell nicht buchbar, aber wir helfen dir gerne dabei,
+                                        eine andere Reise zu finden. Ruf uns an unter <a href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}" title="Service Telefon anrufen" rel="nofollow">{settings.phoneNumber}</a>
+                                        oder schreibe an <f:link.email email="[email protected]"/>.
+                                    </div>
+                                </f:else>
+                            </f:if>
+                        </div>
+                    </div>
                 </div>
-            </div>
-            <div class="row">
-                <div class="col-md-12">
-                    <div class="ep-headbar">Wähle deine Unterkunft</div>
-                </div>
-            </div>
-        </div>
-        <div class="container">
-            <div class="row">
-                <div class="col-xs-12">
-                    <f:if condition="{hotels}">
-                        <f:then>
-                            <f:for each="{hotels}" as="item">
-                                <f:render partial="Hotel/TeaserWide" section="Teaser" arguments="{
-                                    item: item,
-                                    product: product,
-                                    referringPageUid: referringPageUid
-                                }"/>
-                            </f:for>
-                        </f:then>
-                        <f:else>
-                            <div class="alert alert-info">
-                                Die von dir gewählte Reise ist aktuell nicht buchbar, aber wir helfen dir gerne dabei,
-                                eine andere Reise zu finden. Ruf uns an unter <a href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}" title="Service Telefon anrufen" rel="nofollow">{settings.phoneNumber}</a>
-                                oder schreibe an <f:link.email email="[email protected]"/>.
-                            </div>
-                        </f:else>
-                    </f:if>
-                </div>
-            </div>
-        </div>
+            </article>
+        </hotel-list>
     </f:section>
 
 </html>

web/typo3conf/ext/ep_theme/Resources/Private/Templates/Search/Searchresult.html

@@ -10,8 +10,7 @@
             <search-result
                 results-uri="{ep:uri.ajax(action: 'searchresult', controller: 'AjaxSearch', pageUid: settings.defaultAjaxUid, format: 'json')}"
                 :initial-filter-settings='<v:format.json.encode>{filterSettings}</v:format.json.encode>'
-                :initial-filter-options='<v:format.json.encode>{filterOptions}</v:format.json.encode>'
-                :referring-page-uid="{referringPageUid}"
+                referring-page-url="{f:uri.typolink(parameter: referringPageUid)}"
                 argument-prefix="{ep:argumentPrefix(pluginName: 'ajax')}"
                 :date-presets='{settings.datePickerPresets -> v:format.json.encode()}'
                 :watchlist="watchlist"
@@ -106,7 +105,8 @@
                                                 <div class="panel-heading" role="tab" id="headingPeriod">
                                                     <h4 class="panel-title">
                                                         <a role="button" data-toggle="collapse" href="#collapsePeriod"
-                                                           aria-expanded="true" aria-controls="collapsePeriod" class="collapsed">
+                                                           aria-expanded="true" aria-controls="collapsePeriod"
+                                                           :class="{ collapsed: !filterSettings.dateFrom && !filterSettings.dateTo }">
                                                             Reisezeitraum
                                                         </a>
                                                     </h4>
@@ -150,12 +150,14 @@
                                                 <div class="panel-heading" role="tab" id="headingDuration">
                                                     <h4 class="panel-title">
                                                         <a role="button" data-toggle="collapse" href="#collapseDuration"
-                                                           aria-expanded="true" aria-controls="collapseDuration" class="collapsed">
+                                                           aria-expanded="true" aria-controls="collapseDuration"
+                                                           :class="{ collapsed: filterSettings.priceRange === 0 }">
                                                             Preis
                                                         </a>
                                                     </h4>
                                                 </div>
                                                 <div id="collapseDuration" class="panel-collapse collapse" role="tabpanel"
+                                                     :class="{ in: filterSettings.priceRange > 0 }"
                                                      aria-labelledby="headingDuration">
                                                     <div class="panel-body">
                                                         <div class="form-group">
@@ -172,12 +174,14 @@
                                                 <div class="panel-heading" role="tab" id="headingPax">
                                                     <h4 class="panel-title">
                                                         <a role="button" data-toggle="collapse" href="#collapsePax"
-                                                           aria-expanded="true" aria-controls="collapsePax" class="collapsed">
+                                                           aria-expanded="true" aria-controls="collapsePax"
+                                                           :class="{ collapsed: filterSettings.pax === 1 }">
                                                             Personen
                                                         </a>
                                                     </h4>
                                                 </div>
                                                 <div id="collapsePax" class="panel-collapse collapse" role="tabpanel"
+                                                     :class="{ in: filterSettings.pax > 1 }"
                                                      aria-labelledby="headingPax">
                                                     <div class="panel-body">
                                                         <div class="form-group">
@@ -194,12 +198,14 @@
                                                 <div class="panel-heading" role="tab" id="headingHotel">
                                                     <h4 class="panel-title">
                                                         <a role="button" data-toggle="collapse" href="#collapseHotel"
-                                                           aria-expanded="true" aria-controls="collapseHotel" class="collapsed">
+                                                           aria-expanded="true" aria-controls="collapseHotel"
+                                                           :class="{ collapsed: !filterSettings.hotelTypes.length }">
                                                             Unterkunft
                                                         </a>
                                                     </h4>
                                                 </div>
                                                 <div id="collapseHotel" class="panel-collapse collapse" role="tabpanel"
+                                                     :class="{ in: filterSettings.hotelTypes.length }"
                                                      aria-labelledby="headingHotel">
                                                     <div class="panel-body">
                                                         <div class="form-group">
@@ -214,12 +220,14 @@
                                                 <div class="panel-heading" role="tab" id="headingBoard">
                                                     <h4 class="panel-title">
                                                         <a role="button" data-toggle="collapse" href="#collapseBoard"
-                                                           aria-expanded="true" aria-controls="collapseBoard" class="collapsed">
+                                                           aria-expanded="true" aria-controls="collapseBoard"
+                                                           :class="{ collapsed: !filterSettings.boardTypes.length }">
                                                             Verpflegung
                                                         </a>
                                                     </h4>
                                                 </div>
                                                 <div id="collapseBoard" class="panel-collapse collapse" role="tabpanel"
+                                                     :class="{ in: filterSettings.boardTypes.length }"
                                                      aria-labelledby="headingBoard">
                                                     <div class="panel-body">
                                                         <div class="form-group">
@@ -234,12 +242,14 @@
                                                 <div class="panel-heading" role="tab" id="headingRoomtype">
                                                     <h4 class="panel-title">
                                                         <a role="button" data-toggle="collapse" href="#collapseRoomtype"
-                                                           aria-expanded="true" aria-controls="collapseRoomtype" class="collapsed">
+                                                           aria-expanded="true" aria-controls="collapseRoomtype"
+                                                           :class="{ collapsed: !filterSettings.roomTypes.length }">
                                                             Zimmerarten / Apart.
                                                         </a>
                                                     </h4>
                                                 </div>
                                                 <div id="collapseRoomtype" class="panel-collapse collapse" role="tabpanel"
+                                                     :class="{ in: filterSettings.roomTypes.length }"
                                                      aria-labelledby="headingRoomtype">
                                                     <div class="panel-body">
                                                         <div class="form-group">
@@ -254,7 +264,8 @@
                                                 <div class="panel-heading" role="tab" id="headingBus">
                                                     <h4 class="panel-title">
                                                         <a role="button" data-toggle="collapse" href="#collapseBus"
-                                                           aria-expanded="true" aria-controls="collapseBus" class="collapsed">
+                                                           aria-expanded="true" aria-controls="collapseBus"
+                                                           :class="{ collapsed: !filterSettings.bus }">
                                                             Anreise
                                                         </a>
                                                     </h4>
@@ -292,6 +303,7 @@
                                                 :key="item.key"
                                                 :item="item"
                                                 :section="section"
+                                                :referring-page-url="referringPageUrl"
                                                 :watchlist="watchlist"></search-result-item>
                                         </div>
                                     </template>

webpack.config.js

@@ -26,6 +26,9 @@ Encore
         css: 'css/[name].css',
         images: 'images/[name].[ext]'
     })
+    .configureBabel(function (babelConfig) {
+        babelConfig.plugins = [ 'transform-object-rest-spread' ]
+    })
 ;
 
 const EpThemeConfig = Encore.getWebpackConfig();
@@ -50,6 +53,9 @@ Encore
         css: 'css/[name].css',
         images: 'images/[name].[ext]'
     })
+    .configureBabel(function (babelConfig) {
+        babelConfig.plugins = [ 'transform-object-rest-spread' ]
+    })
 ;
 
 const EpEventsConfig = Encore.getWebpackConfig();