Remove filtersettings from url arguments completely

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

@@ -35,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
      */
@@ -100,22 +97,15 @@ class ProductController extends ActionController
         $this->filterService = $filterService;
     }
 
-    public function initializeAction()
-    {
-        $this->processFilterSettingsArgument();
-    }
-
     /**
      * @param Product $product
      * @param Hotel $hotel
-     * @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,
+        Hotel $hotel = null
-        $referringPageUid = null
     )
     {
         // Get product to display from flexform settings if not provided via url
@@ -137,7 +127,6 @@ class ProductController extends ActionController
             if ($product->getHotels()->count() > 1) {
                 $arguments = [
                     'product' => $product,
-                    'referringPageUid' => $referringPageUid,
                 ];
                 $this->forward('hotelList', null, null, $arguments);
             }
@@ -153,8 +142,6 @@ class ProductController extends ActionController
         $this->view->assignMultiple([
             'hotel' => $hotel,
             'product' => $product,
-            'referringPageUid' => $referringPageUid,
-            'currentPageUid' => $GLOBALS['TSFE']->id,
             'isProductWithExcludedConcept' => $isProductWithExcludedConcept,
             'isProductWithNoInfoConcept' => $isProductWithNoInfoConcept,
         ]);
@@ -178,18 +165,16 @@ class ProductController extends ActionController
 
     /**
      * @param Product $product
-     * @param int $referringPageUid
      */
     public function hotelListAction(
-        Product $product,
+        Product $product
-        $referringPageUid = null
     )
     {
         $hotels = $this->hotelDataService->getList($product);
         $this->view->assignMultiple([
             'hotels' => $hotels,
             'product' => $product,
-            'referringPageUid' => $referringPageUid,
+            'currentPageUid' => $GLOBALS['TSFE']->id,
             'linkHotel' => true,
         ]);
     }

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('hotel_name',':searchName'),
-                $qb->expr()->like('LOWER(hotel_keywords) COLLATE utf8_bin', ':searchKeywords')
+                $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('product_name',':searchName'),
-                $qb->expr()->like('LOWER(product_keywords) COLLATE utf8_bin', ':searchKeywords'),
+                $qb->expr()->like('product_keywords', ':searchKeywords'),
-                $qb->expr()->like('LOWER(country_name) COLLATE utf8_bin',':searchKeywords'),
+                $qb->expr()->like('country_name',':searchKeywords'),
-                $qb->expr()->like('LOWER(country_keywords) COLLATE utf8_bin', ':searchKeywords'),
+                $qb->expr()->like('country_keywords', ':searchKeywords'),
-                $qb->expr()->like('LOWER(region_name) COLLATE utf8_bin', ':searchKeywords'),
+                $qb->expr()->like('region_name', ':searchKeywords'),
-                $qb->expr()->like('LOWER(region_keywords) COLLATE utf8_bin', ':searchKeywords'),
+                $qb->expr()->like('region_keywords', ':searchKeywords'),
-                $qb->expr()->like('LOWER(city_name) COLLATE utf8_bin', ':searchKeywords'),
+                $qb->expr()->like('city_name', ':searchKeywords'),
-                $qb->expr()->like('LOWER(city_keywords) COLLATE utf8_bin', ':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($type . '_name',':searchName'),
-                $qb->expr()->like('LOWER(' . $type . '_keywords) COLLATE utf8_bin', ':searchKeywords')
+                $qb->expr()->like($type . '_keywords', ':searchKeywords')
             ))
             ->orderBy($type . '_name')
             ->groupBy($type . '_name')

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/_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/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.rangeSelected = parseInt(value);
-                this.$emit('selected', value);
+                this.$emit('selected', parseInt(value));
             }
         },
         watch: {

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

@@ -49,7 +49,8 @@
                 loading: true,
                 activeSection: null,
                 singleDate: false,
-                filterSettings: defaultFilterSettings
+                filterSettings: defaultFilterSettings,
+                referringPage: null
             }
         },
         props: {
@@ -190,6 +191,10 @@
             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

@@ -53,8 +53,9 @@
                 type: Object,
                 default: null
             },
-            referringPageUid: {
+            referringPageUrl: {
-                type: Number
+                type: String,
+                default: ''
             },
             argumentPrefix: {
                 type: String,

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
+                                <referrer-link href="{f:uri.action(pageUid: detailPage, action: 'detail', controller: 'Product', arguments: '{product: product.uid, hotel: item.hotel.uid}')}"
-                                    pageUid="{product.detailPage}"
+                                               :referring-page="{ url: referringPageUrl, label: 'zurück' }"
-                                    action="detail"
+                                               class="button button--full searchresult-item__button" rel="nofollow">
-                                    controller="Product"
-                                    arguments="{
-                                        product: product.uid,
-                                        hotel: item.hotel.uid,
-                                        referringPageUid: referringPageUid,
-                                        filterSettings: '{filterSettings -> ep:filterSettingsEncoder()}'
-                                    }"
-                                    additionalAttributes="{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
+                            <referrer-link href="{f:uri.action(pageUid: detailPage, action: 'detail', controller: 'Product', arguments: '{product: product.uid, hotel: item.hotel.uid}')}"
-                                pageUid="{product.detailPage}"
+                                           :referring-page="{ url: referringPageUrl, label: 'zurück' }"
-                                action="detail"
+                                           class="button button--full searchresult-item__button" rel="nofollow">
-                                controller="Product"
+                                Details &amp; Buchen
-                                arguments="{product: product.uid, hotel: item.hotel.uid, referringPageUid: referringPageUid, filterSettings: '{filterSettings -> ep:filterSettingsEncoder()}'}"
+                            </referrer-link>
-                                class="button button--full searchresult-item__button"
-                                additionalAttributes="{rel: 'nofollow'}">Details &amp; Buchen</f:link.action>
                         </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
+                            <referrer-link href="{f:uri.action(pageUid: detailPage, action: 'detail', controller: 'Product', arguments: '{product: product.uid, hotel: item.hotel.uid}')}"
-                                pageUid="{product.detailPage}"
+                                           :referring-page="{ url: referringPageUrl, label: 'zurück' }"
-                                action="detail"
+                                           class="button button--full searchresult-item__button" rel="nofollow">Details</referrer-link>
-                                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>
                         </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" v-if="referringPage" v-cloak>
-        <div class="ep-backlink">
+        <a :href="referringPage.url">{{ referringPage.label }}</a>
-            <f:if condition="{referringPageUid} == {settings.defaultSearchPageUid}">
+    </div>
-                <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>
     {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,234 +7,236 @@
     <f:layout name="Default"/>
 
     <f:section name="Main">
-        <f:render partial="Product/HeaderDetail" arguments="{_all}"/>
+        <noscript><h1>{product.headline}</h1></noscript>
-        <div class="container" id="detail">
+        <product-detail
-            <noscript><h1>{product.headline}</h1></noscript>
+            :uris='{
-            <product-detail
+                dates: "<f:format.raw>{ep:uri.ajax(action: 'dates', controller: 'AjaxDate', arguments: '{product: product, hotel: hotel}', format: 'json', noCacheHash: 1)}</f:format.raw>",
-                :uris='{
+                contingents: "<f:format.raw>{ep:uri.ajax(action: 'list', controller: 'AjaxContingent', format: 'json', noCacheHash: 1)}</f:format.raw>",
-                    dates: "<f:format.raw>{ep:uri.ajax(action: 'dates', controller: 'AjaxDate', arguments: '{product: product, hotel: hotel}', 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>",
-                    contingents: "<f:format.raw>{ep:uri.ajax(action: 'list', 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>"
-                    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')}"
-                argument-prefix='<ep:argumentPrefix pluginName="Ajax" />'
+            :fb-pixel-data="{ productUid: <f:format.raw>{product.uid}</f:format.raw>, nameInternal: '<f:format.raw>{product.nameInternal}</f:format.raw>' }"
-                :hotel-first="{f:if(condition: settings.hotelOnTop, then: 'true', else: 'false')}"
+            :watchlist="watchlist"
-                :fb-pixel-data="{ productUid: <f:format.raw>{product.uid}</f:format.raw>, nameInternal: '<f:format.raw>{product.nameInternal}</f:format.raw>' }"
+            :daytrip="{product.daytrip -> v:variable.convert(type: 'int')}"
-                :watchlist="watchlist"
+            inline-template>
-                :daytrip="{product.daytrip -> v:variable.convert(type: 'int')}"
+            <article>
-                inline-template>
+                <f:render partial="Product/HeaderDetail" arguments="{_all}"/>
-                <div class="product-detail-wrapper">
+                <div class="container" id="detail">
-                    <div class="row">
+                    <div class="product-detail-wrapper">
-                        <div class="col-md-12">
+                        <div class="row">
-                            <f:render partial="Header/Header" arguments="{layout: 8, subheader: product.name, header: product.headline}"/>
+                            <div class="col-md-12">
-                        </div>
+                                <f:render partial="Header/Header" arguments="{layout: 8, subheader: product.name, header: product.headline}"/>
-                    </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}"/>
                             </div>
                         </div>
-                        <div id="main" class="col-md-8 col-md-pull-4">
+                        <div class="row">
-                            <!-- Dates -->
+                            <div class="col-md-4 col-md-push-8">
-                            <div v-cloak v-show="!loading && datesShow">
+                                <div class="row">
-                                <f:if condition="{isProductWithExcludedConcept}">
+                                    <div class="col-xs-12">
-                                    <f:if condition="{product.region.season} == 'w'">
+                                        <f:if condition="{settings.hotelOnTop}">
-                                        <div class="alert alert-info">
+                                            <f:then>
-                                            <p><strong>Gruppenrabatt bis zu 100€ möglich</strong></p>
+                                                <button class="button button--light button--sidebar"
-                                            <p>Für Gruppen bis 15 Personen könnt ihr <f:link.typolink parameter="31">hier direkt buchen</f:link.typolink>.
+                                                        :class="{ 'button--active': activeSection === 'hotel'}"
-                                                Für Gruppen ab 16 Personen erstellen wir euch ein konkretes Angebot zu günstigen
+                                                        @click.prevent="showHtml('hotel')">Unterkunft</button>
-                                                Gruppenkonditionen zu dieser Reise. Anfrage via Tel. 0221 - 272 276 18 oder mit einer
+                                            </f:then>
-                                                <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>
+                                                <button class="button button--light button--sidebar"
-                                                    <div class="alert alert-info">
+                                                        :class="{ 'button--active': activeSection === 'dates'}"
-                                                        Die von dir gewählte Reise ist aktuell nicht buchbar, aber wir helfen dir gerne dabei,
+                                                        @click.prevent="loadDatesView()">Termine/Preise</button>
-                                                        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}"/>
+                                <div class="row">
-                                <f:render partial="RegionMaps" arguments="{region: product.region}"/>
+                                    <div class="col-xs-6 col-md-12">
-                                <f:render partial="RegionAward" arguments="{region: product.region}"/>
+                                        <f:if condition="{settings.hotelOnTop}">
-                                <f:if condition="{product.banner}">
+                                            <f:then>
-                                    <div class="ep-sidebar ep-snow">
+                                                <button class="button button--light button--sidebar"
-                                        <f:link.typolink parameter="{product.banner.originalResource.link}"
+                                                        :class="{ 'button--active': activeSection === 'dates'}"
-                                                     title="{product.banner.title}">
+                                                        @click.prevent="loadDatesView()">Termine/Preise</button>
-                                            <f:image src="{product.banner.uid}" treatIdAsReference="1"
+                                            </f:then>
-                                                     class="scale" alt="{product.banner.alternative}"/>
+                                            <f:else>
-                                        </f:link.typolink>
+                                                <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>
+                                    <div class="col-xs-6 col-md-12">
-                                <f:render partial="Rating" arguments="{product: product, targetPageUid: settings.ratingPageUid, label: settings.ratingWidgetLabel}"/>
+                                        <button class="button button--light button--sidebar"
-                                <f:render partial="Snowreport" arguments="{snowreport: product.region.snowreport}"/>
+                                                :class="{ 'button--active': activeSection === 'city'}"
-                                <f:render partial="Officetip" arguments="{officetip: product.officetip}"/>
+                                                @click.prevent="showHtml('city')">Ort</button>
-                                <f:render partial="Teamer" arguments="{teamer: hotel.teamer}"/>
+                                        <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>
-                    <facebook-pixel :values="{ content_ids: [ fbPixelData.productUid ], content_name: fbPixelData.nameInternal, content_type: 'product' }"></facebook-pixel>
+                    </article>
-                </div>
+                </product-detail>
-            </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}"/>
+        <hotel-list
-        <div class="container">
+            :watchlist="watchlist"
-            <div class="row">
+            referring-page-url="{f:uri.typolink(parameter: currentPageUid)}"
-                <div class="col-md-12">
+            inline-template>
-                    <f:render partial="Header/Header" arguments="{layout: 8, subheader: product.name, header: product.headline}"/>
+            <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="container">
-            <div class="row">
+                    <div class="row">
-                <div class="col-md-12">
+                        <div class="col-xs-12">
-                    {product.teaserLong -> f:format.html()}
+                            <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>
+            </article>
-            <div class="row">
+        </hotel-list>
-                <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>
     </f:section>
 
 </html>

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

@@ -10,7 +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>'
-                :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"
@@ -105,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>
@@ -149,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">
@@ -171,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">
@@ -193,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">
@@ -213,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">
@@ -233,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">
@@ -253,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>
@@ -291,6 +303,7 @@
                                                 :key="item.key"
                                                 :item="item"
                                                 :section="section"
+                                                :referring-page-url="referringPageUrl"
                                                 :watchlist="watchlist"></search-result-item>
                                         </div>
                                     </template>