WIP Migrate filter panel
This commit is contained in:
Björn Fromme
@@ -28,8 +28,7 @@ import osmMap from './components/osm-map'
|
||||
import productDetail from './components/product-detail'
|
||||
import daytripDateSelect from './components/daytrip-date-select'
|
||||
import searchBar from './components/search-bar'
|
||||
import searchResult from './components/search-result'
|
||||
import filterPanel from './components/filter-panel'
|
||||
import search from './components/search'
|
||||
|
||||
import defaultFilterSettings from './_filtersettings'
|
||||
import defaultFilterOptions from './_filteroptions'
|
||||
@@ -63,8 +62,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
Alpine.data('productDetail', productDetail)
|
||||
Alpine.data('daytripDateSelect', daytripDateSelect)
|
||||
Alpine.data('searchBar', searchBar)
|
||||
Alpine.data('searchResult', searchResult)
|
||||
Alpine.data('filterPanel', filterPanel)
|
||||
Alpine.data('search', search)
|
||||
Alpine.start()
|
||||
|
||||
Glightbox({
|
||||
|
||||
@@ -1,7 +1,4 @@
|
||||
export default {
|
||||
destinationName: '',
|
||||
destinationUid: 0,
|
||||
destinationType: '',
|
||||
productUid: 0,
|
||||
hotelUid: 0,
|
||||
countryUids: [],
|
||||
@@ -10,7 +7,7 @@ export default {
|
||||
conceptUids: [],
|
||||
dateFrom: null,
|
||||
dateTo: null,
|
||||
priceRange: 0,
|
||||
priceRanges: [],
|
||||
nights: 0,
|
||||
pax: 1,
|
||||
hotelTypes: [],
|
||||
|
||||
@@ -2,4 +2,4 @@ require('font-awesome/css/font-awesome.min.css')
|
||||
require('cookieconsent/build/cookieconsent.min.css')
|
||||
require('glightbox/dist/css/glightbox.css')
|
||||
require('leaflet/dist/leaflet.css')
|
||||
require('flatpickr/dist/flatpickr.css')
|
||||
|
||||
|
||||
+10
-14
@@ -53,9 +53,11 @@ export default props => ({
|
||||
this.filterOptions.destinations = filterOptions.destinations
|
||||
if (filterOptions.dateFrom !== null) {
|
||||
this.filterOptions.selectableRangeFrom = filterOptions.dateFrom
|
||||
this.picker.set('minDate', new Date(filterOptions.dateFrom))
|
||||
}
|
||||
if (filterOptions.dateTo !== null) {
|
||||
this.filterOptions.selectableRangeTo = filterOptions.dateTo
|
||||
this.picker.set('maxDate', new Date(filterOptions.dateTo))
|
||||
}
|
||||
},
|
||||
updateSearchParam(param, value) {
|
||||
@@ -75,24 +77,18 @@ export default props => ({
|
||||
},
|
||||
selectDestination(uid, name, type) {
|
||||
this.destinationName = name
|
||||
this.destinationSelected = true
|
||||
this.conceptSelected = false
|
||||
this.destinationSelected = type !== 'concept'
|
||||
this.conceptSelected = type === 'concept'
|
||||
this.searchParams.destinationUid = uid
|
||||
this.searchParams.destinationType = type
|
||||
this.load()
|
||||
},
|
||||
selectConcept(uid, name) {
|
||||
this.destinationName = name
|
||||
this.destinationSelected = false
|
||||
this.conceptSelected = true
|
||||
this.searchParams.destinationUid = uid
|
||||
this.searchParams.destinationType = 'concept'
|
||||
this.load()
|
||||
},
|
||||
resetDestination() {
|
||||
this.destinationName = 'beliebig'
|
||||
this.destinationSelected = false
|
||||
this.conceptSelected = false
|
||||
this.searchParams.destinationUid = null
|
||||
this.searchParams.destinationType = null
|
||||
this.load()
|
||||
},
|
||||
initDatePicker() {
|
||||
@@ -106,14 +102,14 @@ export default props => ({
|
||||
}
|
||||
}
|
||||
})
|
||||
let minDate = this.filterOptions.minDate ? new Date(this.filterOptions.minDate) : new Date
|
||||
let minDate = this.filterOptions.dateFrom ? new Date(this.filterOptions.dateFrom) : new Date
|
||||
this.picker.set('minDate', minDate)
|
||||
if (this.filterOptions.maxDate) {
|
||||
this.picker.set('maxDate', new Date(this.filterOptions.maxDate))
|
||||
if (this.filterOptions.dateTo) {
|
||||
this.picker.set('maxDate', new Date(this.filterOptions.dateTo))
|
||||
}
|
||||
},
|
||||
priceRangeLabel() {
|
||||
if (this.searchParams.priceRange === 0) {
|
||||
if (null === this.searchParams.priceRange) {
|
||||
return 'beliebig'
|
||||
}
|
||||
let range = this.filterOptions.priceRanges[this.searchParams.priceRange]
|
||||
|
||||
@@ -1,27 +0,0 @@
|
||||
import axios from 'axios'
|
||||
|
||||
export default props => ({
|
||||
loading: false,
|
||||
uri: props.uri,
|
||||
filterSettings: props.initialFilterSettings,
|
||||
init() {
|
||||
this.load()
|
||||
},
|
||||
onFilterSettingsUpdated(e) {
|
||||
this.filterSettings = e.detail
|
||||
this.load()
|
||||
},
|
||||
load() {
|
||||
this.loading = true
|
||||
let data = new URLSearchParams({
|
||||
'tx_epproducts_ajax[filterSettings]': JSON.stringify(this.filterSettings)
|
||||
})
|
||||
axios.post(this.uri, data)
|
||||
.then(response => {
|
||||
this.$refs.results.innerHTML = response.data
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
}
|
||||
})
|
||||
+13
-47
@@ -14,15 +14,16 @@ export default props => ({
|
||||
filterCount: 0,
|
||||
dateRangeSelected: { from: null, to: null },
|
||||
dateRangeLabel: null,
|
||||
contentWrapper: null,
|
||||
init() {
|
||||
this.contentWrapper = this.$refs.container
|
||||
this.updateFilterCount()
|
||||
this.load()
|
||||
this.$watch('filterSettings', () => {
|
||||
this.$dispatch('filter-settings-updated', this.filterSettings)
|
||||
this.updateFilterCount()
|
||||
this.updateDateRangeLabel()
|
||||
this.load()
|
||||
})
|
||||
},
|
||||
refresh() {
|
||||
this.updateFilterCount()
|
||||
this.updateDateRangeLabel()
|
||||
this.load()
|
||||
},
|
||||
load() {
|
||||
this.loading = true
|
||||
@@ -31,7 +32,7 @@ export default props => ({
|
||||
})
|
||||
axios.post(this.uri, data)
|
||||
.then(response => {
|
||||
this.$refs.panel.innerHTML = response.data
|
||||
this.contentWrapper.innerHTML = response.data
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false
|
||||
@@ -45,6 +46,7 @@ export default props => ({
|
||||
},
|
||||
reset() {
|
||||
this.filterSettings = {...this.defaultFilterSettings}
|
||||
this.dateRangeSelected = { from: null, to: null }
|
||||
this.dateRangeLabel = null
|
||||
},
|
||||
initDatePicker(minDate, maxDate) {
|
||||
@@ -61,7 +63,6 @@ export default props => ({
|
||||
dateFrom: flatpickr.formatDate(selectedDates[0], 'Y-m-d'),
|
||||
dateTo: flatpickr.formatDate(selectedDates[1], 'Y-m-d'),
|
||||
})
|
||||
this.updateDateRangeLabel()
|
||||
this.show = null
|
||||
}
|
||||
}
|
||||
@@ -74,13 +75,12 @@ export default props => ({
|
||||
selectDateRangePreset(preset) {
|
||||
let dateFrom = new Date(preset.dateFrom)
|
||||
let dateTo = new Date(preset.dateTo)
|
||||
this.picker.setDate([ dateFrom, dateTo ])
|
||||
this.dateRangeSelected = { from: dateFrom, to: dateTo }
|
||||
this.updateFilterSettings({
|
||||
dateFrom: flatpickr.formatDate(dateFrom, 'Y-m-d'),
|
||||
dateTo: flatpickr.formatDate(dateTo, 'Y-m-d'),
|
||||
})
|
||||
this.updateDateRangeLabel()
|
||||
this.picker.setDate([ dateFrom, dateTo ])
|
||||
this.show = null
|
||||
},
|
||||
resetDateRange() {
|
||||
@@ -89,40 +89,8 @@ export default props => ({
|
||||
dateFrom: null,
|
||||
dateTo: null,
|
||||
})
|
||||
this.updateDateRangeLabel()
|
||||
this.show = null
|
||||
},
|
||||
toggleFilterValue(name, value, multiple = false) {
|
||||
let updates = {}
|
||||
let newValue = this.filterSettings[name]
|
||||
if (!multiple) {
|
||||
newValue = newValue === value ? null : value
|
||||
} else {
|
||||
let index = newValue.indexOf(value)
|
||||
if (index !== -1) {
|
||||
newValue.splice(index, 1)
|
||||
} else {
|
||||
newValue.push(value)
|
||||
}
|
||||
}
|
||||
updates[name] = newValue
|
||||
this.updateFilterSettings(updates)
|
||||
},
|
||||
toggleDestinationOrConcept(uid, name, type) {
|
||||
let values = { destinationUid: null, destinationName: null, destinationType: null }
|
||||
if ('concept' === type) {
|
||||
values = {...values, conceptUids: []}
|
||||
}
|
||||
let currentUid = this.filterSettings.destinationUid
|
||||
let currentType = this.filterSettings.destinationType
|
||||
if (currentUid !== uid || currentType !== type) {
|
||||
values = { destinationUid: uid, destinationName: name, destinationType: type }
|
||||
if ('concept' === type) {
|
||||
values = {...values, conceptUids: [uid]}
|
||||
}
|
||||
}
|
||||
this.updateFilterSettings(values)
|
||||
},
|
||||
updateDateRangeLabel() {
|
||||
let dateRangeLabel = ''
|
||||
if (null !== this.dateRangeSelected.from && null !== this.dateRangeSelected.to) {
|
||||
@@ -134,8 +102,8 @@ export default props => ({
|
||||
},
|
||||
updateFilterCount() {
|
||||
let count = 0
|
||||
if (this.filterSettings.destinationUid) count++
|
||||
if (this.filterSettings.destinationName) count++
|
||||
if (this.filterSettings.dateFrom !== null) count++
|
||||
if (this.filterSettings.dateTo !== null) count++
|
||||
if (this.filterSettings.countryUids.length > 0) count++
|
||||
if (this.filterSettings.regionUids.length > 0) count++
|
||||
if (this.filterSettings.cityUids.length > 0) count++
|
||||
@@ -143,9 +111,7 @@ export default props => ({
|
||||
if (this.filterSettings.hotelTypes.length > 0) count++
|
||||
if (this.filterSettings.boardTypes.length > 0) count++
|
||||
if (this.filterSettings.roomTypes.length > 0) count++
|
||||
if (this.filterSettings.dateFrom !== null) count++
|
||||
if (this.filterSettings.dateTo !== null) count++
|
||||
if (this.filterSettings.priceRange > 0) count++
|
||||
if (this.filterSettings.priceRanges.length > 0) count++
|
||||
if (this.filterSettings.bus) count++
|
||||
if (this.filterSettings.pax > 2) count++
|
||||
this.filterCount = count
|
||||
@@ -1,5 +1,10 @@
|
||||
@import "~flatpickr/dist/flatpickr.css";
|
||||
|
||||
.flatpickr-calendar {
|
||||
box-shadow: none;
|
||||
&.inline {
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.daterange {
|
||||
|
||||
@@ -1,223 +0,0 @@
|
||||
<html data-namespace-typo3-fluid="true" lang="en"
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
|
||||
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers">
|
||||
|
||||
<form class="border rounded p-4">
|
||||
<div x-data="collapse" x-init='initDatePicker(
|
||||
"<f:format.raw>{filterOptions.dateFrom -> f:format.date(format: 'Y-m-d')}</f:format.raw>",
|
||||
"<f:format.raw>{filterOptions.dateTo -> f:format.date(format: 'Y-m-d')}</f:format.raw>"
|
||||
)'>
|
||||
<label x-bind="trigger">
|
||||
Zeitraum
|
||||
</label>
|
||||
<div x-bind="container" class="relative">
|
||||
<input type="text"
|
||||
class="form-control cursor-pointer"
|
||||
placeholder="von... bis"
|
||||
x-bind:value="dateRangeLabel"
|
||||
x-bind:class="loading && 'cursor-not-allowed'"
|
||||
x-on:click.prevent="show = show === 'dateRange' ? null : 'dateRange'"/>
|
||||
<div class="absolute top-100 left-0 z-20 bg-white p-4 shadow-md" x-show="show === 'dateRange'" x-transition x-cloak>
|
||||
<template x-if="datePresets">
|
||||
<div class="flex items-center justify-between pb-2">
|
||||
<template x-for="preset in datePresets">
|
||||
<a class="daterange__preset" href="#"
|
||||
x-on:click.prevent="selectDateRangePreset(preset)">
|
||||
<i class="fa fa-calendar"></i> <span x-text="preset.label"></span>
|
||||
</a>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<input x-ref="picker" type="hidden">
|
||||
<div class="flex items-center justify-between pt-2">
|
||||
<button class="daterange__button focus:outline-none" x-on:click.prevent="show = null">
|
||||
<i class="fa fa-times"></i> schließen
|
||||
</button>
|
||||
<button class="daterange__button focus:outline-none" x-on:click.prevent="resetDateRange()">
|
||||
<i class="fa fa-trash-o"></i> zurücksetzen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div x-data="collapse">
|
||||
<label x-bind="trigger" class="cursor-pointer">
|
||||
Reiseziel
|
||||
</label>
|
||||
<div x-bind="container" x-transition>
|
||||
<ul class="border rounded shadow-md mb-0">
|
||||
<f:for each="{filterOptions.destinations}" as="destination">
|
||||
<li>
|
||||
<a href="#"
|
||||
x-on:click.prevent="toggleDestinationOrConcept(<f:format.raw>{destination.country.uid}, '{destination.country.label}', 'country'</f:format.raw>)"
|
||||
class="{f:if(condition: '{filterSettings.destinationType} == "country" && {filterSettings.destinationUid} == {destination.country.uid}', then: 'underline')}">
|
||||
{destination.country.label}
|
||||
</a>
|
||||
<f:if condition="{destination.regions -> f:count()}">
|
||||
<ul>
|
||||
<f:for each="{destination.regions}" as="region">
|
||||
<li>
|
||||
<a href="#"
|
||||
x-on:click.prevent="toggleDestinationOrConcept(<f:format.raw>{region.uid}, '{region.label}', 'region'</f:format.raw>)"
|
||||
class="{f:if(condition: '{filterSettings.destinationType} == "region" && {filterSettings.destinationUid} == {region.uid}', then: 'underline')}">
|
||||
{region.label}
|
||||
</a>
|
||||
</li>
|
||||
</f:for>
|
||||
</ul>
|
||||
</f:if>
|
||||
</li>
|
||||
</f:for>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div x-data="collapse">
|
||||
<label x-bind="trigger">
|
||||
Reisekonzepte
|
||||
</label>
|
||||
<div x-bind="container" x-transition>
|
||||
<ul class="border rounded shadow-md mb-0">
|
||||
<f:for each="{filterOptions.concepts}" as="concept">
|
||||
<li>
|
||||
<a href="#"
|
||||
x-on:click.prevent="toggleDestinationOrConcept(<f:format.raw>{concept.uid}, '{concept.name}', 'concept'</f:format.raw>)"
|
||||
class="{f:if(condition: '{filterSettings.destinationType} == "concept" && {filterSettings.destinationUid} == {concept.uid}', then: 'underline')}">
|
||||
{concept.name}
|
||||
</a>
|
||||
</li>
|
||||
</f:for>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div x-data="collapse">
|
||||
<label x-bind="trigger">
|
||||
Preis
|
||||
</label>
|
||||
<div x-bind="container" x-transition>
|
||||
<ul class="border rounded shadow-md mb-0">
|
||||
<f:for each="{filterOptions.priceRanges}" as="range">
|
||||
<li>
|
||||
<a href="#"
|
||||
x-on:click.prevent="toggleFilterValue('priceRange', <f:format.raw>{range.uid}</f:format.raw>)"
|
||||
class="{f:if(condition: '{filterSettings.priceRange} == {range.uid}', then: 'underline')}">
|
||||
{ep:priceRange(min: range.min, max: range.max)}
|
||||
</a>
|
||||
</li>
|
||||
</f:for>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div x-data="collapse">
|
||||
<label x-bind="trigger">
|
||||
Personen
|
||||
</label>
|
||||
<div x-bind="container" x-transition>
|
||||
<ul class="h-48 overflow-y-scroll border rounded shadow-md mb-0">
|
||||
<f:for each="{filterOptions.pax}" as="option">
|
||||
<li>
|
||||
<a href="#"
|
||||
x-on:click.prevent="toggleFilterValue('pax', <f:format.raw>{option}</f:format.raw>)">
|
||||
{option}
|
||||
</a>
|
||||
</li>
|
||||
</f:for>
|
||||
<li><a href="{f:uri.typolink(parameter: settings.groupsPageUid)}">> 20</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<f:variable name="hotelTypes" value="{
|
||||
1: 'Ferienwohnung',
|
||||
2: 'Sportclub',
|
||||
3: 'Appartment',
|
||||
4: 'Gästehaus',
|
||||
5: 'Pension'
|
||||
}"/>
|
||||
<div x-data="collapse">
|
||||
<label x-bind="trigger">
|
||||
Unterkunft
|
||||
</label>
|
||||
<div x-bind="container" x-transition>
|
||||
<ul class="border rounded shadow-md mb-0">
|
||||
<f:for each="{filterOptions.hotelTypes}" as="type">
|
||||
<li>
|
||||
<a href="#"
|
||||
x-on:click.prevent="toggleFilterValue('hotelTypes', <f:format.raw>{type}</f:format.raw>, true)">
|
||||
{hotelTypes.{type}}
|
||||
</a>
|
||||
</li>
|
||||
</f:for>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div x-data="collapse">
|
||||
<label x-bind="trigger">
|
||||
Verpflegung
|
||||
</label>
|
||||
<div x-bind="container" x-transition>
|
||||
<ul class="border rounded shadow-md mb-0">
|
||||
<f:for each="{filterOptions.boardTypes}" as="type">
|
||||
<li>
|
||||
<a href="#"
|
||||
x-on:click.prevent="toggleFilterValue('boardTypes', <f:format.raw>{type.uid}</f:format.raw>, true)">
|
||||
{type.label}
|
||||
</a>
|
||||
</li>
|
||||
</f:for>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<f:variable name="roomTypes" value="{
|
||||
1: 'EZ',
|
||||
2: 'DZ / 2er',
|
||||
3: '3er',
|
||||
4: '4er',
|
||||
5: 'ab 5 Pers.',
|
||||
6: 'mit anderen'
|
||||
}"/>
|
||||
<div x-data="collapse">
|
||||
<label x-bind="trigger">
|
||||
Zimmerarten/Apart.
|
||||
</label>
|
||||
<div x-bind="container" x-transition>
|
||||
<ul class="border rounded shadow-md mb-0">
|
||||
<f:for each="{filterOptions.roomTypes}" as="type">
|
||||
<li>
|
||||
<a href="#"
|
||||
x-on:click.prevent="toggleFilterValue('roomTypes', <f:format.raw>{type}</f:format.raw>, true)">
|
||||
{roomTypes.{type}}
|
||||
</a>
|
||||
</li>
|
||||
</f:for>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<f:if condition="{filterOptions.busAvailable}">
|
||||
<div x-data="collapse">
|
||||
<label x-bind="trigger">
|
||||
Anreise
|
||||
</label>
|
||||
<div x-bind="container" x-transition>
|
||||
<ul class="border rounded shadow-md mb-0">
|
||||
<li>
|
||||
<a href="#"
|
||||
x-on:click.prevent="toggleFilterValue('bus', true)"
|
||||
class="{f:if(condition: filterSettings.bus, then: 'underline')}">
|
||||
Busanreise
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</f:if>
|
||||
</form>
|
||||
|
||||
</html>
|
||||
+377
-102
@@ -3,51 +3,83 @@
|
||||
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
|
||||
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers">
|
||||
|
||||
<div class="searchresult__info alert alert-info">
|
||||
Deine Suche
|
||||
<f:if condition="{meta.organic}">
|
||||
<f:then>
|
||||
<f:if condition="{meta.destinationName}">
|
||||
nach <strong>{meta.destinationName}</strong>
|
||||
</f:if>
|
||||
<f:if condition="{meta.dateRange}">
|
||||
<strong>{meta.dateRange}</strong>
|
||||
</f:if>
|
||||
ergab {meta.total} Treffer
|
||||
</f:then>
|
||||
<f:else>
|
||||
ergab leider keine genauen Treffer. Bitte benutze die Filter.
|
||||
</f:else>
|
||||
</f:if>
|
||||
</div>
|
||||
<div class="searchresult__content">
|
||||
<f:for each="{searchResult}" as="section">
|
||||
<div id="concept-{section.concept.uid}">
|
||||
<h2 class="headline headline--secondary headline--underlined">
|
||||
{section.concept.name}
|
||||
</h2>
|
||||
<div class="searchresult-section searchresult-section--{section.concept.code}">
|
||||
<f:for each="{section.items}" as="item">
|
||||
<div class="teaserbox teaserbox--landscape teaserbox--searchresult searchresult-item">
|
||||
<div class="teaserbox__image">
|
||||
<img src="{item.country.flag}" class="teaserbox__flag" alt="{item.country.name}"/>
|
||||
<a href="{item.detailPageUri}" rel="nofollow" title="Details & Buchen">
|
||||
<picture class="searchresult-item__image">
|
||||
<source media="(min-width: 1201px)" data-srcset="{item.hotel.images.resized.m.0.url} 260w"/>
|
||||
<source media="(max-width: 1200px)" data-srcset="{item.hotel.images.resized.l.0.url} 280w"/>
|
||||
<source media="(max-width: 768px)" data-srcset="{item.hotel.images.resized.s.0.url} 220w"/>
|
||||
<img class="scale lazyload" data-src="{item.hotel.images.resized.s[0].url}"
|
||||
title="{item.hotel.images.resized.s.0.title}"
|
||||
alt="{item.hotel.images.resized.s.0.alt}">
|
||||
</picture>
|
||||
</a>
|
||||
<div class="concept-badge concept-badge--{section.concept.code}"
|
||||
id="{section.concept.code}">
|
||||
{section.concept.name}
|
||||
<f:layout name="Default"/>
|
||||
|
||||
<f:section name="Main">
|
||||
<div class="row" x-ref="container">
|
||||
<div class="col-md-3 relative" x-data="collapse(false, 991)">
|
||||
<p class="lg:hidden">
|
||||
<button class="button button--full button--small" role="button" x-bind="trigger">
|
||||
<i class="fa fa-toggle-on"></i> Filter ein-/ausblenden
|
||||
</button>
|
||||
</p>
|
||||
<div class="lg:block"
|
||||
x-bind="container"
|
||||
x-transition
|
||||
x-cloak
|
||||
>
|
||||
<h3>Filter</h3>
|
||||
<button class="button button--sidebar button--small"
|
||||
x-show="filterCount > 0"
|
||||
x-cloak
|
||||
x-on:click.prevent="reset">
|
||||
Filter zurücksetzen
|
||||
</button>
|
||||
<f:render section="FilterPanel" arguments="{_all}"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-9 relative">
|
||||
<f:render section="SearchResult" arguments="{_all}"/>
|
||||
</div>
|
||||
</div>
|
||||
</f:section>
|
||||
|
||||
<f:section name="SearchResult">
|
||||
<div class="searchresult__info alert alert-info">
|
||||
Deine Suche
|
||||
<f:if condition="{meta.organic}">
|
||||
<f:then>
|
||||
<f:if condition="{meta.destinationName}">
|
||||
nach <strong>{meta.destinationName}</strong>
|
||||
</f:if>
|
||||
<f:if condition="{meta.dateRange}">
|
||||
<strong>{meta.dateRange}</strong>
|
||||
</f:if>
|
||||
ergab {meta.total} Treffer
|
||||
</f:then>
|
||||
<f:else>
|
||||
ergab leider keine genauen Treffer. Bitte benutze die Filter.
|
||||
</f:else>
|
||||
</f:if>
|
||||
</div>
|
||||
<div class="searchresult__content">
|
||||
<f:for each="{searchResult}" as="section">
|
||||
<div id="concept-{section.concept.uid}">
|
||||
<h2 class="headline headline--secondary headline--underlined">
|
||||
{section.concept.name}
|
||||
</h2>
|
||||
<div class="searchresult-section searchresult-section--{section.concept.code}">
|
||||
<f:for each="{section.items}" as="item">
|
||||
<div class="teaserbox teaserbox--landscape teaserbox--searchresult searchresult-item">
|
||||
<div class="teaserbox__image">
|
||||
<img src="{item.country.flag}" class="teaserbox__flag" alt="{item.country.name}"/>
|
||||
<a href="{item.detailPageUri}" rel="nofollow" title="Details & Buchen">
|
||||
<picture class="searchresult-item__image">
|
||||
<source media="(min-width: 1201px)" data-srcset="{item.hotel.images.resized.m.0.url} 260w"/>
|
||||
<source media="(max-width: 1200px)" data-srcset="{item.hotel.images.resized.l.0.url} 280w"/>
|
||||
<source media="(max-width: 768px)" data-srcset="{item.hotel.images.resized.s.0.url} 220w"/>
|
||||
<img class="scale lazyload" data-src="{item.hotel.images.resized.s[0].url}"
|
||||
title="{item.hotel.images.resized.s.0.title}"
|
||||
alt="{item.hotel.images.resized.s.0.alt}">
|
||||
</picture>
|
||||
</a>
|
||||
<div class="concept-badge concept-badge--{section.concept.code}"
|
||||
id="{section.concept.code}">
|
||||
{section.concept.name}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="teaserbox__main">
|
||||
<div class="teaserbox__header">
|
||||
<div class="teaserbox__main">
|
||||
<div class="teaserbox__header">
|
||||
<span class="searchresult-item__headline">
|
||||
{item.region.name}
|
||||
<f:if condition="{section.concept.code} == 'evt'">
|
||||
@@ -58,85 +90,328 @@
|
||||
</strong>
|
||||
</f:if>
|
||||
</span>
|
||||
<span class="searchresult-item__subline">
|
||||
<span class="searchresult-item__subline">
|
||||
{item.hotel.name}
|
||||
</span>
|
||||
<f:if condition="{item.hotel.category}">
|
||||
<f:if condition="{item.hotel.category}">
|
||||
<span class="searchresult-item__category">
|
||||
Kategorie {item.hotel.category}
|
||||
</span>
|
||||
</f:if>
|
||||
</f:if>
|
||||
</div>
|
||||
<ul class="check-list searchresult-item__checklist">
|
||||
<f:if condition="{item.hotel.fact}">
|
||||
<li>{item.hotel.fact}</li>
|
||||
</f:if>
|
||||
<f:if condition="{item.product.fact}">
|
||||
<li>{item.product.fact}</li>
|
||||
</f:if>
|
||||
<f:if condition="{item.region.feature}">
|
||||
<f:then>
|
||||
<li>{item.region.feature}</li>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<f:if condition="{item.region.fact}">
|
||||
<li>{item.region.fact}</li>
|
||||
</f:if>
|
||||
</f:else>
|
||||
</f:if>
|
||||
</ul>
|
||||
<ul class="check-list check-list--inverted searchresult-item__featurelist">
|
||||
<li>Skipass</li>
|
||||
<f:if condition="{item.board}">
|
||||
<li>{item.board}</li>
|
||||
</f:if>
|
||||
<f:if condition="{item.product.feature}">
|
||||
<li>{item.product.feature}</li>
|
||||
</f:if>
|
||||
</ul>
|
||||
</div>
|
||||
<ul class="check-list searchresult-item__checklist">
|
||||
<f:if condition="{item.hotel.fact}">
|
||||
<li>{item.hotel.fact}</li>
|
||||
</f:if>
|
||||
<f:if condition="{item.product.fact}">
|
||||
<li>{item.product.fact}</li>
|
||||
</f:if>
|
||||
<f:if condition="{item.region.feature}">
|
||||
<f:then>
|
||||
<li>{item.region.feature}</li>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<f:if condition="{item.region.fact}">
|
||||
<li>{item.region.fact}</li>
|
||||
</f:if>
|
||||
</f:else>
|
||||
</f:if>
|
||||
</ul>
|
||||
<ul class="check-list check-list--inverted searchresult-item__featurelist">
|
||||
<li>Skipass</li>
|
||||
<f:if condition="{item.board}">
|
||||
<li>{item.board}</li>
|
||||
</f:if>
|
||||
<f:if condition="{item.product.feature}">
|
||||
<li>{item.product.feature}</li>
|
||||
</f:if>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="teaserbox__aside">
|
||||
<div class="teaserbox__aside__top">
|
||||
<div class="teaserbox__aside">
|
||||
<div class="teaserbox__aside__top">
|
||||
<span class="searchresult-item__label">
|
||||
{f:if(condition: '{item.dates -> f:count()} > 1', then: 'Zeitraum', else: 'Termin')}
|
||||
</span>
|
||||
<span class="searchresult-item__daterange">
|
||||
<span class="searchresult-item__daterange">
|
||||
{ep:dateRange(dateFrom: item.minDateStart, dateTo: item.maxDateEnd, includeLabel: 0)}
|
||||
</span>
|
||||
<f:if condition="{item.dates -> f:count()} > 0">
|
||||
<f:if condition="{item.daytrip}">
|
||||
<f:else>
|
||||
<a href="{item.detailPageUri}{f:if(condition: referringPageUri, then: '?ref={referringPageUri -> f:format.urlencode()}')}" rel="nofollow" title="Details & Buchen">
|
||||
<f:if condition="{item.dates -> f:count()} > 0">
|
||||
<f:if condition="{item.daytrip}">
|
||||
<f:else>
|
||||
<a href="{item.detailPageUri}{f:if(condition: referringPageUri, then: '?ref={referringPageUri -> f:format.urlencode()}')}" rel="nofollow" title="Details & Buchen">
|
||||
<span class="searchresult-item__daterange">
|
||||
<i class="fa fa-arrow-circle-right"></i> {item.dates -> f:count()} {f:if(condition: '{item.dates -> f:count()} > 1', then: 'Termine', else: 'Termin')}
|
||||
</span>
|
||||
</a>
|
||||
</f:else>
|
||||
</a>
|
||||
</f:else>
|
||||
</f:if>
|
||||
</f:if>
|
||||
</f:if>
|
||||
<hr>
|
||||
<span class="searchresult-item__label">
|
||||
<hr>
|
||||
<span class="searchresult-item__label">
|
||||
{f:if(condition: item.daytrip, then: 'Tageweise buchbar', else: '{ep:nightsOptions(options: item.nights, daytrip: item.daytrip)}')}
|
||||
</span>
|
||||
</div>
|
||||
<div class="teaserbox__aside__bottom">
|
||||
<span class="searchresult-item__price">ab {item.minPrice} €</span>
|
||||
<a href="{item.detailPageUri}{f:if(condition: referringPageUri, then: '?ref={referringPageUri -> f:format.urlencode()}')}" class="button button--full searchresult-item__button"
|
||||
rel="nofollow" title="Details">
|
||||
Details{f:if(condition: item.hideBookingButton, else: ' & Buchen')}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="teaserbox__aside__bottom">
|
||||
<span class="searchresult-item__price">ab {item.minPrice} €</span>
|
||||
<a href="{item.detailPageUri}{f:if(condition: referringPageUri, then: '?ref={referringPageUri -> f:format.urlencode()}')}" class="button button--full searchresult-item__button"
|
||||
rel="nofollow" title="Details">
|
||||
Details{f:if(condition: item.hideBookingButton, else: ' & Buchen')}
|
||||
</a>
|
||||
</div>
|
||||
<a href="#" class="teaserbox-watchlist" x-data="watchlistToggle('{item.key}')" x-bind="trigger">
|
||||
<span data-microtip-position="top" x-bind:aria-label="label" role="tooltip">
|
||||
<i class="fa fa-plus-circle" x-bind:class="icon"></i>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<a href="#" class="teaserbox-watchlist" x-data="watchlistToggle('{item.key}')" x-bind="trigger">
|
||||
<span data-microtip-position="top" x-bind:aria-label="label" role="tooltip">
|
||||
<i class="fa fa-plus-circle" x-bind:class="icon"></i>
|
||||
</span>
|
||||
</a>
|
||||
</f:for>
|
||||
</div>
|
||||
</div>
|
||||
</f:for>
|
||||
</div>
|
||||
</f:section>
|
||||
|
||||
<f:section name="FilterPanel">
|
||||
<div class="border rounded p-4">
|
||||
<div class="mb-2 pb-2 border-b" x-data="collapse(<f:if condition="{filterSettings.dateFrom} || {filterSettings.dateTo}">false</f:if>)"
|
||||
x-init='initDatePicker(
|
||||
<f:format.raw>
|
||||
"{filterOptions.dateFrom -> f:format.date(format: 'Y-m-d')}",
|
||||
"{filterOptions.dateTo -> f:format.date(format: 'Y-m-d')}"
|
||||
</f:format.raw>
|
||||
)'>
|
||||
<label x-bind="trigger">
|
||||
Zeitraum
|
||||
</label>
|
||||
<div x-bind="container" class="relative">
|
||||
<input type="text"
|
||||
class="cursor-pointer focus:outline-none"
|
||||
placeholder="von... bis"
|
||||
x-bind:value="dateRangeLabel"
|
||||
x-bind:class="loading && 'cursor-not-allowed'"
|
||||
x-on:click.prevent="show = show === 'dateRange' ? null : 'dateRange'"/>
|
||||
<div class="absolute top-100 left-0 z-20 bg-white p-4 shadow-md" x-show="show === 'dateRange'" x-transition x-cloak>
|
||||
<template x-if="datePresets">
|
||||
<div class="flex items-center justify-between pb-2">
|
||||
<template x-for="preset in datePresets">
|
||||
<a class="daterange__preset" href="#"
|
||||
x-on:click.prevent="selectDateRangePreset(preset)">
|
||||
<i class="fa fa-calendar"></i> <span x-text="preset.label"></span>
|
||||
</a>
|
||||
</template>
|
||||
</div>
|
||||
</f:for>
|
||||
</template>
|
||||
<input x-ref="picker" type="hidden">
|
||||
<div class="flex items-center justify-between pt-2">
|
||||
<button class="daterange__button focus:outline-none" x-on:click.prevent="show = null">
|
||||
<i class="fa fa-times"></i> schließen
|
||||
</button>
|
||||
<button class="daterange__button focus:outline-none" x-on:click.prevent="resetDateRange()">
|
||||
<i class="fa fa-trash-o"></i> zurücksetzen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</f:for>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-2 pb-2 border-b" x-data="collapse(<f:if condition="{filterSettings.countryUids -> f:count()} || {filterSettings.regionUids -> f:count()}">false</f:if>)">
|
||||
<label x-bind="trigger" class="cursor-pointer">
|
||||
Reiseziel
|
||||
</label>
|
||||
<div x-bind="container" x-transition>
|
||||
<ul class="mb-0 p-0">
|
||||
<f:for each="{filterOptions.destinations}" as="destination">
|
||||
<li>
|
||||
<input type="checkbox"
|
||||
class="mr-2"
|
||||
x-on:change="refresh"
|
||||
x-model.number="filterSettings.countryUids"
|
||||
value="{destination.country.uid}">
|
||||
{destination.country.label}
|
||||
<f:if condition="{destination.regions -> f:count()}">
|
||||
<ul>
|
||||
<f:for each="{destination.regions}" as="region">
|
||||
<li>
|
||||
<input type="checkbox"
|
||||
class="mr-2"
|
||||
x-on:change="refresh"
|
||||
x-model.number="filterSettings.regionUids"
|
||||
value="{region.uid}">
|
||||
{region.label}
|
||||
</li>
|
||||
</f:for>
|
||||
</ul>
|
||||
</f:if>
|
||||
</li>
|
||||
</f:for>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-2 pb-2 border-b" x-data="collapse(<f:if condition="{filterSettings.conceptUids -> f:count()}">false</f:if>)">
|
||||
<label x-bind="trigger">
|
||||
Reisekonzepte
|
||||
</label>
|
||||
<div x-bind="container" x-transition>
|
||||
<ul class="mb-0 p-0">
|
||||
<f:for each="{filterOptions.concepts}" as="concept">
|
||||
<li>
|
||||
<input type="checkbox"
|
||||
class="mr-2"
|
||||
x-on:change="refresh"
|
||||
x-model.number="filterSettings.conceptUids"
|
||||
value="{concept.uid}">
|
||||
{concept.name}
|
||||
</li>
|
||||
</f:for>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-2 pb-2 border-b" x-data="collapse(<f:if condition="{filterSettings.priceRanges -> f:count()}">false</f:if>)">
|
||||
<label x-bind="trigger">
|
||||
Preis
|
||||
</label>
|
||||
<div x-bind="container" x-transition>
|
||||
<ul class="mb-0 p-0">
|
||||
<f:for each="{filterOptions.priceRanges}" as="range">
|
||||
<li>
|
||||
<label>
|
||||
<input type="checkbox"
|
||||
class="mr-2"
|
||||
x-on:change="refresh"
|
||||
x-model.number="filterSettings.priceRanges"
|
||||
value="<f:format.raw>{range.uid}</f:format.raw>">
|
||||
{ep:priceRange(min: range.min, max: range.max)}
|
||||
</label>
|
||||
</li>
|
||||
</f:for>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-2 pb-2 border-b" x-data="collapse(<f:if condition="{filterSettings.pax} > 1">false</f:if>)">
|
||||
<label x-bind="trigger">
|
||||
Personen
|
||||
</label>
|
||||
<div x-bind="container" x-transition>
|
||||
<div class="border rounded">
|
||||
<select x-model="filterSettings.pax" x-on:change="refresh">
|
||||
<f:for each="{filterOptions.pax}" as="option">
|
||||
<option value="<f:format.raw>{option}</f:format.raw>">
|
||||
<f:format.raw>{option}</f:format.raw>
|
||||
</option>
|
||||
</f:for>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<f:variable name="hotelTypes" value="{
|
||||
1: 'Ferienwohnung',
|
||||
2: 'Sportclub',
|
||||
3: 'Appartment',
|
||||
4: 'Gästehaus',
|
||||
5: 'Pension'
|
||||
}"/>
|
||||
<div class="mb-2 pb-2 border-b" x-data="collapse(<f:if condition="{filterSettings.hotelTypes -> f:count()}">false</f:if>)">
|
||||
<label x-bind="trigger">
|
||||
Unterkunft
|
||||
</label>
|
||||
<div x-bind="container" x-transition>
|
||||
<ul class="mb-0 p-0">
|
||||
<f:for each="{filterOptions.hotelTypes}" as="type">
|
||||
<li>
|
||||
<label>
|
||||
<input type="checkbox"
|
||||
class="mr-2"
|
||||
x-on:change="refresh"
|
||||
x-model.number="filterSettings.hotelTypes"
|
||||
value="<f:format.raw>{type}</f:format.raw>">
|
||||
{hotelTypes.{type}}
|
||||
</label>
|
||||
</li>
|
||||
</f:for>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-2 pb-2 border-b" x-data="collapse(<f:if condition="{filterSettings.boardTypes -> f:count()}">false</f:if>)">
|
||||
<label x-bind="trigger">
|
||||
Verpflegung
|
||||
</label>
|
||||
<div x-bind="container" x-transition>
|
||||
<ul class="mb-0 p-0">
|
||||
<f:for each="{filterOptions.boardTypes}" as="type">
|
||||
<f:if condition="{type.label}">
|
||||
<li>
|
||||
<label>
|
||||
<input type="checkbox"
|
||||
class="mr-2"
|
||||
x-on:change="refresh"
|
||||
x-model.number="filterSettings.boardTypes"
|
||||
value="<f:format.raw>{type.uid}</f:format.raw>">
|
||||
{type.label}
|
||||
</label>
|
||||
</li>
|
||||
</f:if>
|
||||
</f:for>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<f:variable name="roomTypes" value="{
|
||||
1: 'EZ',
|
||||
2: 'DZ / 2er',
|
||||
3: '3er',
|
||||
4: '4er',
|
||||
5: 'ab 5 Pers.',
|
||||
6: 'mit anderen'
|
||||
}"/>
|
||||
<div class="mb-2 pb-2 border-b" x-data="collapse(<f:if condition="{filterSettings.roomTypes -> f:count()}">false</f:if>)">
|
||||
<label x-bind="trigger">
|
||||
Zimmerarten/Apart.
|
||||
</label>
|
||||
<div x-bind="container" x-transition>
|
||||
<ul class="mb-0 p-0 p-0">
|
||||
<f:for each="{filterOptions.roomTypes}" as="type">
|
||||
<li>
|
||||
<label>
|
||||
<input type="checkbox"
|
||||
class="mr-2"
|
||||
x-on:change="refresh"
|
||||
x-model.number="filterSettings.roomTypes"
|
||||
value="<f:format.raw>{type}</f:format.raw>">
|
||||
{roomTypes.{type}}
|
||||
</label>
|
||||
</li>
|
||||
</f:for>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<f:if condition="{filterOptions.busAvailable}">
|
||||
<div x-data="collapse(<f:if condition="{filterSettings.bus}">false</f:if>)">
|
||||
<label x-bind="trigger">
|
||||
Anreise
|
||||
</label>
|
||||
<div x-bind="container" x-transition>
|
||||
<ul class="mb-0 p-0">
|
||||
<li>
|
||||
<label>
|
||||
<input type="checkbox"
|
||||
class="mr-2"
|
||||
x-on:change="refresh"
|
||||
x-model="filterSettings.bus">
|
||||
Busanreise
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</f:if>
|
||||
</div>
|
||||
</f:section>
|
||||
|
||||
</html>
|
||||
|
||||
@@ -475,7 +475,7 @@
|
||||
<span x-show="addBus">
|
||||
<i class="fa fa-arrow-circle-right"></i> Preise für Eigenanreise anzeigen
|
||||
</span>
|
||||
<span x-show="! addBus">
|
||||
<span x-show="! addBus">
|
||||
<i class="fa fa-arrow-circle-right"></i> Preise für Busanreise anzeigen
|
||||
</span>
|
||||
</a>
|
||||
@@ -495,9 +495,9 @@
|
||||
|
||||
<f:section name="DaytripDateSelect">
|
||||
<div class="date-select-wrapper" x-data='daytripDateSelect({
|
||||
hotelName: "{hotel.name}",
|
||||
hotelUid: {hotel.uid},
|
||||
productUid: {product.uid},
|
||||
hotelName: "<f:format.raw>{hotel.name}</f:format.raw>",
|
||||
hotelUid: <f:format.raw>{hotel.uid}</f:format.raw>,
|
||||
productUid: <f:format.raw>{product.uid}</f:format.raw>,
|
||||
contingentEndpointUri: "<f:format.raw>{ep:uri.ajax(action: 'list', controller: 'AjaxContingent', format: 'json', pageUid: settings.defaultAjaxUid)}</f:format.raw>",
|
||||
roomsEndpointUri: "<f:format.raw>{ep:uri.ajax(action: 'rooms', controller: 'AjaxContingent', format: 'json', pageUid: settings.defaultAjaxUid)}</f:format.raw>"
|
||||
})'>
|
||||
|
||||
@@ -6,10 +6,12 @@
|
||||
|
||||
<f:section name="Main">
|
||||
<div id="searchbar" x-data='searchBar({
|
||||
uri: "<ep:uri.ajax controller="AjaxSearchbar" action="update" pageUid="{settings.defaultAjaxUid}" />",
|
||||
initialSearchParams: {searchParams -> f:format.json() -> f:format.raw()},
|
||||
initialFilterOptions: {filterOptions -> f:format.json() -> f:format.raw()},
|
||||
datePresets: {settings.datePickerPresets -> f:format.json() -> f:format.raw()}
|
||||
<f:format.raw>
|
||||
uri: "{ep:uri.ajax(controller: "AjaxSearchbar", action: "update", pageUid: settings.defaultAjaxUid)}",
|
||||
initialSearchParams: {searchParams -> f:format.json()},
|
||||
initialFilterOptions: {filterOptions -> f:format.json()},
|
||||
datePresets: {settings.datePickerPresets -> f:format.json()}
|
||||
</f:format.raw>
|
||||
})'>
|
||||
<div class="container searchbar{f:if(condition: fixed, then: ' affix')}"{f:if(condition: fixed, else: ' x-data="sticky(650)" x-bind:class="sticky && \'affix\'"')}">
|
||||
<div class="container">
|
||||
@@ -22,7 +24,6 @@
|
||||
<f:form.hidden property="dateTo" value="" additionalAttributes="{x-model: 'searchParams.dateTo'}"/>
|
||||
<f:form.hidden property="nights" additionalAttributes="{x-model: 'searchParams.nights'}"/>
|
||||
<f:form.hidden property="pax" additionalAttributes="{x-model: 'searchParams.pax'}"/>
|
||||
<f:form.hidden property="conceptUid" additionalAttributes="{x-model: 'searchParams.conceptUid'}"/>
|
||||
<f:form.hidden property="priceRange" additionalAttributes="{x-model: 'searchParams.priceRange'}"/>
|
||||
<f:form.hidden property="pageUid" additionalAttributes="{x-model: 'searchParams.pageUid'}"/>
|
||||
<div class="row">
|
||||
@@ -108,7 +109,7 @@
|
||||
</a>
|
||||
</div>
|
||||
<div class="w-1/2">
|
||||
<ul class="plain-list">
|
||||
<ul class="plain-list mb-0">
|
||||
<template x-for="region in destination.regions">
|
||||
<li>
|
||||
<a href="#" x-on:click.prevent="selectDestination(region.uid, region.label, 'region')" x-text="region.label"></a>
|
||||
@@ -125,10 +126,10 @@
|
||||
<strong>Konzept</strong>
|
||||
</div>
|
||||
<div class="w-1/2">
|
||||
<ul class="plain-list">
|
||||
<ul class="plain-list mb-0">
|
||||
<template x-for="concept in filterOptions.concepts">
|
||||
<li>
|
||||
<a href="#" x-on:click.prevent="selectConcept(concept.uid, concept.name)" x-text="concept.name"></a>
|
||||
<a href="#" x-on:click.prevent="selectDestination(concept.uid, concept.name, 'concept')" x-text="concept.name"></a>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
|
||||
+13
-49
@@ -12,56 +12,20 @@
|
||||
<div class="pagehead__image"
|
||||
style="background-image: url({f:uri.image(src: settings.searchPageHeaderImage, width: '1366', height: '160c+100')})"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-3 relative" x-data="collapse(false, 991)">
|
||||
<p class="lg:hidden">
|
||||
<button class="button button--full button--small" role="button" x-bind="trigger">
|
||||
<i class="fa fa-toggle-on"></i> Filter ein-/ausblenden
|
||||
</button>
|
||||
</p>
|
||||
<f:spaceless>
|
||||
<div class="lg:block"
|
||||
x-bind="container"
|
||||
x-transition
|
||||
x-cloak
|
||||
x-data='filterPanel({
|
||||
<f:format.raw>
|
||||
uri: "{ep:uri.ajax(controller: 'AjaxFilterpanel', action: 'panel', pageUid: settings.defaultAjaxUid, format: 'html')}",
|
||||
initialFilterSettings: {filterSettings -> f:format.json()},
|
||||
datePresets: {settings.datePickerPresets -> f:format.json()}
|
||||
</f:format.raw>
|
||||
})'>
|
||||
<h3>Filter</h3>
|
||||
<button class="button button--sidebar button--small"
|
||||
x-show="filterCount > 0"
|
||||
x-cloak
|
||||
x-on:click.prevent="reset">
|
||||
Filter zurücksetzen
|
||||
</button>
|
||||
<div x-ref="panel"></div>
|
||||
<div x-show="loading" class="absolute z-20 inset-0 w-full h-fill bg-overlay-white">
|
||||
<f:image src="EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif" alt="Loading" class="absolute top-1/2 left-1/2 -translate-xy-1/2"/>
|
||||
</div>
|
||||
</div>
|
||||
</f:spaceless>
|
||||
<div class="container relative"
|
||||
x-data='search({
|
||||
<f:format.raw>
|
||||
uri: "{ep:uri.ajax(controller: 'AjaxSearch', action: 'searchresult', pageUid: settings.defaultAjaxUid, format: 'html')}",
|
||||
initialFilterSettings: {filterSettings -> f:format.json()},
|
||||
datePresets: {settings.datePickerPresets -> f:format.json()}
|
||||
</f:format.raw>
|
||||
})'>
|
||||
<div class="row" x-ref="container"></div>
|
||||
<div x-show="loading" class="absolute z-20 inset-0 w-full h-fill bg-overlay-white">
|
||||
<div class="absolute mt-16 top-0 left-1/2 -translate-x-1/2 flex items-center space-x-4">
|
||||
<f:image src="EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif" alt="Loading" />
|
||||
<span>Suchergebnis wird geladen...</span>
|
||||
</div>
|
||||
<f:spaceless>
|
||||
<div class="col-md-9 relative"
|
||||
x-data='searchResult({
|
||||
<f:format.raw>
|
||||
uri: "{ep:uri.ajax(controller: 'AjaxSearch', action: 'searchresult', pageUid: settings.defaultAjaxUid, format: 'html')}",
|
||||
initialFilterSettings: {filterSettings -> f:format.json()}
|
||||
</f:format.raw>
|
||||
})'
|
||||
x-on:filter-settings-updated.window="onFilterSettingsUpdated($event)"
|
||||
>
|
||||
<div x-ref="results"></div>
|
||||
<div x-show="loading" class="absolute z-20 inset-0 w-full h-fill bg-overlay-white">
|
||||
<f:image src="EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif" alt="Loading" class="absolute top-1/2 left-1/2 -translate-xy-1/2"/>
|
||||
</div>
|
||||
</div>
|
||||
</f:spaceless>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user