WIP Migrate search result
This commit is contained in:
Björn Fromme
@@ -15,9 +15,11 @@ import parseAppConfig from './components/appconfig'
|
||||
import initSliders from './components/sliders'
|
||||
import appendPaCode from './components/pacode'
|
||||
import scrollTop from './components/scoll-top'
|
||||
import scrollTo from './components/scroll-to'
|
||||
import sticky from './components/sticky'
|
||||
import watchlistToggle from './components/watchlist-toggle'
|
||||
import watchlistButton from './components/watchlist-button'
|
||||
import watchlist from './components/watchlist'
|
||||
import collapse from './components/collapse'
|
||||
import fbpixel from './components/fbpixel'
|
||||
import ajaxContent from './components/ajax-content'
|
||||
@@ -26,6 +28,11 @@ 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 defaultFilterSettings from './_filtersettings'
|
||||
import defaultFilterOptions from './_filteroptions'
|
||||
|
||||
// Executed on document ready
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
@@ -40,10 +47,14 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
modal: null,
|
||||
})
|
||||
Alpine.store('watchlist', storedWatchlist)
|
||||
Alpine.store('filterSettings', defaultFilterSettings)
|
||||
Alpine.store('filterOptions', defaultFilterOptions)
|
||||
Alpine.data('scrollTop', scrollTop)
|
||||
Alpine.data('scrollTo', scrollTo)
|
||||
Alpine.data('sticky', sticky)
|
||||
Alpine.data('watchlistToggle', watchlistToggle)
|
||||
Alpine.data('watchlistButton', watchlistButton)
|
||||
Alpine.data('watchlist', watchlist)
|
||||
Alpine.data('collapse', collapse)
|
||||
Alpine.data('fbpixel', fbpixel)
|
||||
Alpine.data('ajaxContent', ajaxContent)
|
||||
@@ -52,6 +63,8 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
Alpine.data('productDetail', productDetail)
|
||||
Alpine.data('daytripDateSelect', daytripDateSelect)
|
||||
Alpine.data('searchBar', searchBar)
|
||||
Alpine.data('searchResult', searchResult)
|
||||
Alpine.data('filterPanel', filterPanel)
|
||||
Alpine.start()
|
||||
|
||||
Glightbox({
|
||||
@@ -64,31 +77,31 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
/// LEGACY CODE FROM HERE ///
|
||||
|
||||
// Import dependencies
|
||||
import Vue from 'vue'
|
||||
import $ from 'jquery'
|
||||
import dayjs from 'dayjs'
|
||||
import 'dayjs/locale/de'
|
||||
// import Vue from 'vue'
|
||||
// import $ from 'jquery'
|
||||
// import dayjs from 'dayjs'
|
||||
// import 'dayjs/locale/de'
|
||||
|
||||
global.$ = global.jQuery = $;
|
||||
// global.$ = global.jQuery = $;
|
||||
|
||||
require('bootstrap-sass/assets/javascripts/bootstrap/dropdown')
|
||||
require('bootstrap-sass/assets/javascripts/bootstrap/modal')
|
||||
require('bootstrap-sass/assets/javascripts/bootstrap/transition')
|
||||
// require('bootstrap-sass/assets/javascripts/bootstrap/dropdown')
|
||||
// require('bootstrap-sass/assets/javascripts/bootstrap/modal')
|
||||
// require('bootstrap-sass/assets/javascripts/bootstrap/transition')
|
||||
|
||||
// Import components
|
||||
import SearchBar from './components/SearchBar.vue'
|
||||
import SearchBox from './components/SearchBox.vue'
|
||||
// import SearchBar from './components/SearchBar.vue'
|
||||
// import SearchBox from './components/SearchBox.vue'
|
||||
//import ProductDetail from './components/ProductDetail.vue'
|
||||
import Calendar from './components/Calendar.vue'
|
||||
import EventPricetable from './components/EventPriceTable.vue'
|
||||
import ContactForm from './components/ContactForm.vue'
|
||||
import Watchlist from './components/Watchlist.vue'
|
||||
import HotelList from './components/HotelList.vue'
|
||||
// import Calendar from './components/Calendar.vue'
|
||||
// import EventPricetable from './components/EventPriceTable.vue'
|
||||
// import ContactForm from './components/ContactForm.vue'
|
||||
// import Watchlist from './components/Watchlist.vue'
|
||||
// import HotelList from './components/HotelList.vue'
|
||||
|
||||
// Define date filter for vue templates
|
||||
Vue.filter('date', (value) => {
|
||||
return dayjs(value).format('DD.MM.YY');
|
||||
});
|
||||
// Vue.filter('date', (value) => {
|
||||
// return dayjs(value).format('DD.MM.YY');
|
||||
// });
|
||||
|
||||
// Store
|
||||
// import store from './store';
|
||||
|
||||
@@ -3,5 +3,5 @@ export default () => {
|
||||
if (null === configElement) {
|
||||
return {}
|
||||
}
|
||||
return JSON.parse(configElement.innerHTML);
|
||||
return JSON.parse(configElement.innerHTML)
|
||||
}
|
||||
|
||||
@@ -21,7 +21,7 @@ export default (isCollapsed = true, until = null, from = null) => ({
|
||||
trigger: {
|
||||
['@click.prevent']() {
|
||||
this.collapsed = !this.collapsed
|
||||
}
|
||||
},
|
||||
},
|
||||
container: {
|
||||
['x-show']() {
|
||||
|
||||
@@ -0,0 +1,153 @@
|
||||
import axios from 'axios'
|
||||
import flatpickr from 'flatpickr';
|
||||
import { German } from 'flatpickr/dist/l10n/de';
|
||||
import defaultFilterSettings from '../_filtersettings'
|
||||
|
||||
export default props => ({
|
||||
loading: false,
|
||||
show: null,
|
||||
picker: null,
|
||||
uri: props.uri,
|
||||
datePresets: props.datePresets,
|
||||
filterSettings: props.initialFilterSettings,
|
||||
defaultFilterSettings,
|
||||
filterCount: 0,
|
||||
dateRangeSelected: { from: null, to: null },
|
||||
dateRangeLabel: null,
|
||||
init() {
|
||||
this.updateFilterCount()
|
||||
this.load()
|
||||
this.$watch('filterSettings', () => {
|
||||
this.$dispatch('filter-settings-updated', this.filterSettings)
|
||||
this.updateFilterCount()
|
||||
this.updateDateRangeLabel()
|
||||
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.panel.innerHTML = response.data
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false
|
||||
if (null !== this.filterSettings.dateFrom && null !== this.filterSettings.dateTo) {
|
||||
this.picker.setDate([ this.filterSettings.dateFrom, this.filterSettings.dateTo ])
|
||||
this.dateRangeSelected = { from: new Date(this.filterSettings.dateFrom), to: new Date(this.filterSettings.dateTo) }
|
||||
this.updateDateRangeLabel()
|
||||
}
|
||||
this.$el.scrollIntoView({behavior: 'smooth'})
|
||||
})
|
||||
},
|
||||
reset() {
|
||||
this.filterSettings = {...this.defaultFilterSettings}
|
||||
this.dateRangeLabel = null
|
||||
},
|
||||
initDatePicker(minDate, maxDate) {
|
||||
this.picker = flatpickr(this.$refs.picker, {
|
||||
mode: 'range',
|
||||
locale: German,
|
||||
inline: true,
|
||||
minDate: minDate,
|
||||
maxDate: maxDate,
|
||||
onChange: selectedDates => {
|
||||
if (selectedDates.length === 2) {
|
||||
this.dateRangeSelected = { from: selectedDates[0], to: selectedDates[1] }
|
||||
this.updateFilterSettings({
|
||||
dateFrom: flatpickr.formatDate(selectedDates[0], 'Y-m-d'),
|
||||
dateTo: flatpickr.formatDate(selectedDates[1], 'Y-m-d'),
|
||||
})
|
||||
this.updateDateRangeLabel()
|
||||
this.show = null
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
updateFilterSettings(values) {
|
||||
let filterSettings = {...this.filterSettings}
|
||||
this.filterSettings = {...filterSettings, ...values}
|
||||
},
|
||||
selectDateRangePreset(preset) {
|
||||
let dateFrom = new Date(preset.dateFrom)
|
||||
let dateTo = new Date(preset.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() {
|
||||
this.dateRangeSelected = { from: null, to: null }
|
||||
this.updateFilterSettings({
|
||||
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) {
|
||||
let dateFrom = this.dateRangeSelected.from
|
||||
let dateTo = this.dateRangeSelected.to
|
||||
dateRangeLabel = `${flatpickr.formatDate(dateFrom, 'd.m.Y')} - ${flatpickr.formatDate(dateTo, 'd.m.Y')}`
|
||||
}
|
||||
this.dateRangeLabel = dateRangeLabel
|
||||
},
|
||||
updateFilterCount() {
|
||||
let count = 0
|
||||
if (this.filterSettings.destinationUid) count++
|
||||
if (this.filterSettings.destinationName) count++
|
||||
if (this.filterSettings.countryUids.length > 0) count++
|
||||
if (this.filterSettings.regionUids.length > 0) count++
|
||||
if (this.filterSettings.cityUids.length > 0) count++
|
||||
if (this.filterSettings.conceptUids.length > 0) count++
|
||||
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.bus) count++
|
||||
if (this.filterSettings.pax > 2) count++
|
||||
this.filterCount = count
|
||||
},
|
||||
})
|
||||
@@ -0,0 +1,9 @@
|
||||
export default targetId => ({
|
||||
targetId,
|
||||
init() {
|
||||
this.$el.addEventListener('click', e => {
|
||||
e.preventDefault()
|
||||
document.getElementById(this.targetId).scrollIntoView({behavior: 'smooth'})
|
||||
})
|
||||
}
|
||||
})
|
||||
+50
-67
@@ -3,9 +3,9 @@ import flatpickr from 'flatpickr'
|
||||
import { German } from 'flatpickr/dist/l10n/de'
|
||||
|
||||
export default props => ({
|
||||
loading: false,
|
||||
picker: null,
|
||||
optionsUri: props.optionsUri,
|
||||
resetUri: props.resetUri,
|
||||
uri: props.uri,
|
||||
searchParams: props.initialSearchParams,
|
||||
filterOptions: props.initialFilterOptions,
|
||||
datePresets: props.datePresets,
|
||||
@@ -22,26 +22,28 @@ export default props => ({
|
||||
this.searchParams.dateFrom = null
|
||||
this.searchParams.dateTo = null
|
||||
} else {
|
||||
let dateFrom = flatpickr.formatDate(this.dateRangeSelected.from, 'd.m.Y')
|
||||
let dateTo = flatpickr.formatDate(this.dateRangeSelected.to, 'd.m.Y')
|
||||
dateRangeLabel = `${dateFrom} - ${dateTo}`
|
||||
this.searchParams.dateFrom = dateFrom
|
||||
this.searchParams.dateTo = dateTo
|
||||
let dateFrom = this.dateRangeSelected.from
|
||||
let dateTo = this.dateRangeSelected.to
|
||||
dateRangeLabel = `${flatpickr.formatDate(dateFrom, 'd.m.Y')} - ${flatpickr.formatDate(dateTo, 'd.m.Y')}`
|
||||
this.searchParams.dateFrom = flatpickr.formatDate(dateFrom, 'Y-m-d')
|
||||
this.searchParams.dateTo = flatpickr.formatDate(dateTo, 'Y-m-d')
|
||||
}
|
||||
this.dateRangeLabel = dateRangeLabel
|
||||
this.loadOptions()
|
||||
this.load()
|
||||
})
|
||||
},
|
||||
loadOptions() {
|
||||
const data = { 'tx_epproducts_ajax[searchParams]': this.searchParams }
|
||||
axios({
|
||||
url: this.optionsUri,
|
||||
method: 'post',
|
||||
data
|
||||
}).then(response => {
|
||||
this.applyOptions(response.data)
|
||||
this.show = null
|
||||
})
|
||||
load() {
|
||||
this.loading = true
|
||||
const data = new FormData()
|
||||
data.set('tx_epproducts_ajax[searchParams]', JSON.stringify(this.searchParams))
|
||||
axios.post(this.uri, data)
|
||||
.then(response => {
|
||||
this.applyOptions(response.data)
|
||||
this.show = null
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
applyOptions(json) {
|
||||
this.filterOptions.totalResults = json.totalResults
|
||||
@@ -58,26 +60,7 @@ export default props => ({
|
||||
},
|
||||
updateSearchParam(param, value) {
|
||||
this.searchParams[param] = value
|
||||
this.loadOptions()
|
||||
},
|
||||
updateDestination(destination) {
|
||||
if (destination.type === 'concept') {
|
||||
this.searchParams.conceptUid = destination.uid
|
||||
} else {
|
||||
this.searchParams.destinationUid = destination.uid
|
||||
this.searchParams.destinationType = destination.type
|
||||
}
|
||||
this.loadOptions()
|
||||
},
|
||||
resetDestination() {
|
||||
axios({
|
||||
url: this.resetUri,
|
||||
method: 'post'
|
||||
}).then(response => {
|
||||
this.applyOptions(response.data)
|
||||
this.searchParams = response.data.searchParams
|
||||
this.show = null
|
||||
})
|
||||
this.load()
|
||||
},
|
||||
selectDateRangePreset(preset) {
|
||||
let dateFrom = new Date(preset.dateFrom)
|
||||
@@ -90,10 +73,31 @@ export default props => ({
|
||||
this.picker.clear()
|
||||
this.picker.jumpToDate()
|
||||
},
|
||||
selectDestination(uid, name, type) {
|
||||
this.destinationName = name
|
||||
this.destinationSelected = true
|
||||
this.conceptSelected = false
|
||||
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.load()
|
||||
},
|
||||
initDatePicker() {
|
||||
this.picker = flatpickr(this.$refs.picker, {
|
||||
mode: 'range',
|
||||
dateFormat: 'd.m.Y',
|
||||
locale: German,
|
||||
inline: true,
|
||||
onChange: selectedDates => {
|
||||
@@ -102,8 +106,9 @@ export default props => ({
|
||||
}
|
||||
}
|
||||
})
|
||||
if (this.filterOptions.minDate && this.filterOptions.maxDate) {
|
||||
this.picker.set('minDate', new Date(this.filterOptions.minDate))
|
||||
let minDate = this.filterOptions.minDate ? new Date(this.filterOptions.minDate) : new Date
|
||||
this.picker.set('minDate', minDate)
|
||||
if (this.filterOptions.maxDate) {
|
||||
this.picker.set('maxDate', new Date(this.filterOptions.maxDate))
|
||||
}
|
||||
},
|
||||
@@ -112,11 +117,11 @@ export default props => ({
|
||||
return 'beliebig'
|
||||
}
|
||||
let range = this.filterOptions.priceRanges[this.searchParams.priceRange]
|
||||
return this.formatPriceRange(range)
|
||||
return this.priceRangeFormatted(range)
|
||||
},
|
||||
formatPriceRange(range) {
|
||||
let min = range[0];
|
||||
let max = range[1];
|
||||
priceRangeFormatted(range) {
|
||||
let min = range.min;
|
||||
let max = range.max;
|
||||
if (min === 1) {
|
||||
return 'bis ' + max + ' €'
|
||||
}
|
||||
@@ -125,26 +130,4 @@ export default props => ({
|
||||
}
|
||||
return min + ' - ' + max + ' €'
|
||||
},
|
||||
selectDestination(uid, name, type) {
|
||||
this.destinationName = name
|
||||
this.destinationSelected = true
|
||||
this.conceptSelected = false
|
||||
this.searchParams.destinationUid = uid
|
||||
this.searchParams.destinationType = type
|
||||
this.loadOptions()
|
||||
},
|
||||
selectConcept(uid, name) {
|
||||
this.destinationName = name
|
||||
this.destinationSelected = false
|
||||
this.conceptSelected = true
|
||||
this.searchParams.destinationUid = uid
|
||||
this.searchParams.destinationType = 'concept'
|
||||
this.loadOptions()
|
||||
},
|
||||
resetDestinationSelect() {
|
||||
this.destinationName = 'beliebig'
|
||||
this.destinationSelected = false
|
||||
this.conceptSelected = false
|
||||
this.resetDestination()
|
||||
},
|
||||
})
|
||||
|
||||
@@ -0,0 +1,27 @@
|
||||
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
|
||||
})
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,22 @@
|
||||
import axios from 'axios'
|
||||
|
||||
export default uri => ({
|
||||
loading: false,
|
||||
uri,
|
||||
init() {
|
||||
this.load()
|
||||
},
|
||||
load() {
|
||||
this.loading = true
|
||||
let data = new URLSearchParams({
|
||||
'tx_epproducts_ajax[watchlistUids]': JSON.stringify(this.$store.watchlist),
|
||||
})
|
||||
axios.post(this.uri, data)
|
||||
.then(response => {
|
||||
this.$refs.watchlist.innerHTML = response.data
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,223 @@
|
||||
<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>
|
||||
+142
@@ -0,0 +1,142 @@
|
||||
<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">
|
||||
|
||||
<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 class="teaserbox__main">
|
||||
<div class="teaserbox__header">
|
||||
<span class="searchresult-item__headline">
|
||||
{item.region.name}
|
||||
<f:if condition="{section.concept.code} == 'evt'">
|
||||
<strong>
|
||||
<span class="block">
|
||||
{item.product.name}
|
||||
</span>
|
||||
</strong>
|
||||
</f:if>
|
||||
</span>
|
||||
<span class="searchresult-item__subline">
|
||||
{item.hotel.name}
|
||||
</span>
|
||||
<f:if condition="{item.hotel.category}">
|
||||
<span class="searchresult-item__category">
|
||||
Kategorie {item.hotel.category}
|
||||
</span>
|
||||
</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>
|
||||
<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">
|
||||
{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">
|
||||
<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>
|
||||
</f:if>
|
||||
</f:if>
|
||||
<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>
|
||||
<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>
|
||||
</f:for>
|
||||
</div>
|
||||
</div>
|
||||
</f:for>
|
||||
</div>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,132 @@
|
||||
<html data-namespace-typo3-fluid="true" lang="en"
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
|
||||
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers">
|
||||
|
||||
<f:if condition="{watchlist -> f:count()} == 0">
|
||||
<f:then>
|
||||
<div class="alert alert-info">
|
||||
Deine Merkliste ist aktuell leer...
|
||||
</div>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<f:for each="{watchlist}" 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 class="teaserbox__main">
|
||||
<div class="teaserbox__header">
|
||||
<span class="searchresult-item__headline">
|
||||
{item.region.name}
|
||||
<f:if condition="{section.concept.code} == 'evt'">
|
||||
<strong>
|
||||
<span class="block">
|
||||
{item.product.name}
|
||||
</span>
|
||||
</strong>
|
||||
</f:if>
|
||||
</span>
|
||||
<span class="searchresult-item__subline">
|
||||
{item.hotel.name}
|
||||
</span>
|
||||
<f:if condition="{item.hotel.category}">
|
||||
<span class="searchresult-item__category">
|
||||
Kategorie {item.hotel.category}
|
||||
</span>
|
||||
</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>
|
||||
<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">
|
||||
{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">
|
||||
<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>
|
||||
</f:if>
|
||||
</f:if>
|
||||
<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>
|
||||
<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>
|
||||
</f:for>
|
||||
</div>
|
||||
</div>
|
||||
</f:for>
|
||||
</f:else>
|
||||
</f:if>
|
||||
|
||||
</html>
|
||||
@@ -67,7 +67,7 @@
|
||||
</f:if>
|
||||
<f:if condition="{product.faqs}">
|
||||
<button class="button button--light button--sidebar"
|
||||
x-on:click.prevent="scrollTo('#faq')">FAQ</button>
|
||||
x-data="scrollTo('faq')">FAQ</button>
|
||||
</f:if>
|
||||
</div>
|
||||
<div class="col-xs-12">
|
||||
|
||||
@@ -1,305 +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"
|
||||
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers">
|
||||
|
||||
<f:layout name="Default"/>
|
||||
|
||||
<f:section name="Main">
|
||||
<product-detail
|
||||
:uris='{
|
||||
dates: "<f:format.raw>{ep:uri.ajax(action: 'dates', controller: 'AjaxDate', arguments: '{product: product, hotel: hotel}', format: 'json', pageUid: settings.defaultAjaxUid)}</f:format.raw>",
|
||||
contingents: "<f:format.raw>{ep:uri.ajax(action: 'list', controller: 'AjaxContingent', format: 'json', pageUid: settings.defaultAjaxUid)}</f:format.raw>",
|
||||
rooms: "<f:format.raw>{ep:uri.ajax(action: 'rooms', controller: 'AjaxContingent', format: 'json', pageUid: settings.defaultAjaxUid)}</f:format.raw>",
|
||||
pricetable: "<f:format.raw>{ep:uri.ajax(action: 'pricetable', controller: 'AjaxTable', arguments: '{product: product, hotel: hotel}', format: 'json', pageUid: settings.defaultAjaxUid)}</f:format.raw>"
|
||||
}'
|
||||
argument-prefix='<ep:argumentPrefix pluginName="Ajax" />'
|
||||
:hotel-first="{f:if(condition: settings.hotelOnTop, then: 'true', else: 'false')}"
|
||||
:bus-pro-id="{product.busProId -> f:format.raw()}"
|
||||
name-internal="{product.nameInternal -> f:format.raw()}"
|
||||
:daytrip="{product.daytrip -> v:variable.convert(type: 'int')}"
|
||||
date-from="{dateFrom}"
|
||||
date-to="{dateTo}"
|
||||
inline-template>
|
||||
<article>
|
||||
<f:render partial="Product/HeaderDetail" arguments="{_all}"/>
|
||||
<div class="container" id="detail">
|
||||
<div class="product-detail-wrapper">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<f:render partial="Header/Header" arguments="{layout: 8, subheader: '{product.region.name} / {product.name}', header: product.headline}"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-md-push-8">
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<f:if condition="{settings.hotelOnTop}">
|
||||
<f:then>
|
||||
<button class="button button--light button--sidebar"
|
||||
:class="{ 'button--active': activeSection === 'hotel'}"
|
||||
@click.prevent="showHtml('hotel')">Unterkunft</button>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<button class="button button--light button--sidebar"
|
||||
:class="{ 'button--active': activeSection === 'dates'}"
|
||||
@click.prevent="loadDatesView()">Termine/Preise</button>
|
||||
</f:else>
|
||||
</f:if>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-6 col-md-12">
|
||||
<f:if condition="{settings.hotelOnTop}">
|
||||
<f:then>
|
||||
<button class="button button--light button--sidebar"
|
||||
:class="{ 'button--active': activeSection === 'dates'}"
|
||||
@click.prevent="loadDatesView()">Termine/Preise</button>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<button class="button button--light button--sidebar"
|
||||
:class="{ 'button--active': activeSection === 'hotel'}"
|
||||
@click.prevent="showHtml('hotel')">Unterkunft</button>
|
||||
</f:else>
|
||||
</f:if>
|
||||
<button class="button button--light button--sidebar"
|
||||
:class="{ 'button--active': activeSection === 'region'}"
|
||||
@click.prevent="showHtml('region')">Gebiet</button>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-12">
|
||||
<button class="button button--light button--sidebar"
|
||||
:class="{ 'button--active': activeSection === 'city'}"
|
||||
@click.prevent="showHtml('city')">Ort</button>
|
||||
<f:if condition="{product.journey}">
|
||||
<button class="button button--light button--sidebar"
|
||||
:class="{ 'button--active': activeSection === 'journey'}"
|
||||
@click.prevent="showHtml('journey')">Anreise</button>
|
||||
</f:if>
|
||||
<f:if condition="{product.faqs}">
|
||||
<button class="button button--light button--sidebar"
|
||||
@click.prevent="scrollTo('#faq')">FAQ</button>
|
||||
</f:if>
|
||||
</div>
|
||||
<div class="col-xs-12">
|
||||
<p>
|
||||
<a href="#" x-data="watchlistToggle" x-bind="trigger" data-uid="{hotel.uid}:{product.uid}">
|
||||
<span data-microtip-position="top" x-bind:aria-label="label" role="tooltip">
|
||||
<i class="fa" x-bind:class="icon"></i>
|
||||
</span>
|
||||
<span x-text="label"></span>
|
||||
</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="{f:uri.typolink(parameter: settings.coronaUpdatesPageUid)}"
|
||||
class="block w-full py-2 border-2 border-red-500 rounded text-red-500 text-center uppercase hover:bg-red-500 hover:text-white transition-colors duration-200 ease-in-out"
|
||||
title="Corona Updates">
|
||||
Corona Updates
|
||||
</a>
|
||||
</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>
|
||||
<div class="osm-map"
|
||||
x-data="osmMap"
|
||||
data-lat="{hotel.latitude}"
|
||||
data-lng="{hotel.longitude}"
|
||||
data-link="{f:uri.typolink(parameter: hotel.externalLink)}"></div>
|
||||
</div>
|
||||
</div>
|
||||
<f:render partial="Region/Webcam" arguments="{region: product.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:if condition="{settings.hideTeamer}">
|
||||
<f:else>
|
||||
<f:render partial="Teamer" arguments="{teamer: hotel.teamer}"/>
|
||||
</f:else>
|
||||
</f:if>
|
||||
</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"
|
||||
travel-alert-url="{f:uri.typolink(parameter: settings.travelAlertPageUid)}"
|
||||
></dates-table>
|
||||
</template>
|
||||
<f:if condition="{isProductWithNoInfoConcept}">
|
||||
<f:else>
|
||||
<template v-else>
|
||||
<f:render partial="NotBookable" arguments="{_all}"/>
|
||||
</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"
|
||||
travel-alert-url="{f:uri.typolink(parameter: settings.travelAlertPageUid)}"
|
||||
></price-table>
|
||||
<f:alias map="{currentPageUid: 1}">
|
||||
<f:render partial="Product/Details" arguments="{_all}"/>
|
||||
</f:alias>
|
||||
</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>
|
||||
<div class="osm-map"
|
||||
x-data="osmMap"
|
||||
data-lat="{hotel.latitude}"
|
||||
data-lng="{hotel.longitude}"
|
||||
data-link="{f:uri.typolink(parameter: hotel.externalLink)}"></div>
|
||||
</div>
|
||||
</div>
|
||||
<f:render partial="Region/Webcam" arguments="{region: product.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>
|
||||
</div>
|
||||
</article>
|
||||
</product-detail>
|
||||
<div x-data="fbpixel('{ "content_ids": [ {product.busProId -> f:format.raw()} ], "content_name": "{product.nameInternal -> f:format.raw()}", "content_type": "product" }')"></div>
|
||||
<f:render partial="Faq" arguments="{faqs: product.faqs, settings: settings}"/>
|
||||
</f:section>
|
||||
|
||||
<f:section name="Calendar">
|
||||
<f:if condition="{product.calendarHotel}">
|
||||
<f:if condition="{hotel.groupsPriceConfigs}">
|
||||
<a class="button button--full"
|
||||
data-glightbox
|
||||
href="{f:uri.action(action: 'index', controller: 'GroupsPrice', arguments: '{hotel: hotel}', pageUid: settings.groupsPricePopupPageUid)}">
|
||||
Preisberechnung
|
||||
</a>
|
||||
</f:if>
|
||||
<div class="ep-sidebar ep-facts">
|
||||
<p><strong>Belegungskalender</strong></p>
|
||||
<calendar
|
||||
uri="{ep:uri.ajax(action: 'range', controller: 'AjaxCalendar', extensionName: 'epproducts', pageUid: settings.defaultAjaxUid, arguments: '{hotel: product.calendarHotel}', format: 'html')}"
|
||||
loader-uri="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif')}"
|
||||
hotel-uid="{product.calendarHotel.uid}"
|
||||
hotel-name="{product.calendarHotel.name}"
|
||||
:months="1"
|
||||
:show-header="false"
|
||||
:step="1"
|
||||
argument-prefix="{ep:argumentPrefix(pluginName: 'ajax', extensionName: 'epproducts')}"
|
||||
></calendar>
|
||||
</div>
|
||||
<f:if condition="{hotel.groupsPriceConfigs}">
|
||||
<f:else>
|
||||
<f:link.typolink class="button button--full" parameter="{settings.groupsContactFormPageUid}" additionalParams="&ref={currentPageUid}">
|
||||
Direkt zum Anfrageformular
|
||||
</f:link.typolink>
|
||||
</f:else>
|
||||
</f:if>
|
||||
</f:if>
|
||||
</f:section>
|
||||
|
||||
</html>
|
||||
@@ -5,54 +5,50 @@
|
||||
<f:layout name="Default"/>
|
||||
|
||||
<f:section name="Main">
|
||||
<hotel-list
|
||||
referring-page-url="{f:uri.typolink(parameter: currentPageUid)}"
|
||||
inline-template>
|
||||
<article>
|
||||
<f:render partial="Product/HeaderDetail" arguments="{_all}"/>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<f:render partial="Header/Header" arguments="{layout: 8, subheader: product.name, header: product.headline}"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
{product.teaserLong -> f:format.html()}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="ep-headbar">Wähle deine Unterkunft</div>
|
||||
</div>
|
||||
<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="container">
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<f:if condition="{hotels}">
|
||||
<f:then>
|
||||
<f:for each="{hotels}" as="item">
|
||||
<f:render partial="Hotel/TeaserWide" section="Teaser" arguments="{
|
||||
item: item,
|
||||
product: product,
|
||||
referringPageUrl: referringPageUrl
|
||||
}"/>
|
||||
</f:for>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<div class="alert alert-info">
|
||||
Die von dir gewählte Reise ist aktuell nicht buchbar, aber wir helfen dir gerne dabei,
|
||||
eine andere Reise zu finden. Ruf uns an unter <a href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}" title="Service Telefon anrufen" rel="nofollow">{settings.phoneNumber}</a>
|
||||
oder schreibe an <f:link.email email="[email protected]"/>.
|
||||
</div>
|
||||
</f:else>
|
||||
</f:if>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
{product.teaserLong -> f:format.html()}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</hotel-list>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="ep-headbar">Wähle deine Unterkunft</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<f:if condition="{hotels}">
|
||||
<f:then>
|
||||
<f:for each="{hotels}" as="item">
|
||||
<f:render partial="Hotel/TeaserWide" section="Teaser" arguments="{
|
||||
item: item,
|
||||
product: product,
|
||||
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>
|
||||
</article>
|
||||
</f:section>
|
||||
|
||||
</html>
|
||||
|
||||
@@ -6,13 +6,12 @@
|
||||
|
||||
<f:section name="Main">
|
||||
<div id="searchbar" x-data='searchBar({
|
||||
optionsUri: "<ep:uri.ajax controller="AjaxSearchbar" action="options" pageUid="{settings.defaultAjaxUid}" />",
|
||||
resetUri: "<ep:uri.ajax controller="AjaxSearchbar" action="reset" pageUid="{settings.defaultAjaxUid}" />",
|
||||
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()}
|
||||
})'>
|
||||
<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 searchbar{f:if(condition: fixed, then: ' affix')}"{f:if(condition: fixed, else: ' x-data="sticky(650)" x-bind:class="sticky && \'affix\'"')}">
|
||||
<div class="container">
|
||||
<f:form action="processSearch" controller="Search" method="post" name="searchParams"
|
||||
object="{searchParams}" pluginName="searchresult" extensionName="epproducts"
|
||||
@@ -36,18 +35,19 @@
|
||||
<input type="text"
|
||||
class="form-control cursor-pointer"
|
||||
placeholder="von... bis"
|
||||
x-bind:class="loading && 'cursor-not-allowed'"
|
||||
x-bind:value="dateRangeLabel"
|
||||
x-on:click.prevent="show = show === 'dateRange' ? null : 'dateRange'"/>
|
||||
<div class="absolute top-100 left-0 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>
|
||||
<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">
|
||||
@@ -70,6 +70,7 @@
|
||||
<div class="relative">
|
||||
<input type="text"
|
||||
class="form-control cursor-pointer"
|
||||
x-bind:class="loading && 'cursor-not-allowed'"
|
||||
x-bind:value="searchParams.pax"
|
||||
x-on:click.prevent="show = show === 'pax' ? null : 'pax'"/>
|
||||
<div class="absolute top-100 left-0 bg-white p-4 shadow-md w-full h-48 overflow-y-scroll" x-show="show === 'pax'" x-transition x-cloak>
|
||||
@@ -93,29 +94,30 @@
|
||||
<div class="relative">
|
||||
<input type="text"
|
||||
class="form-control cursor-pointer"
|
||||
x-bind:class="loading && 'cursor-not-allowed'"
|
||||
x-bind:value="destinationName"
|
||||
x-on:click.prevent="show = show === 'destination' ? null : 'destination'"/>
|
||||
<div class="absolute top-100 left-0 bg-white p-4 shadow-md min-w-full h-48 overflow-y-scroll" x-show="show === 'destination'" x-transition x-cloak>
|
||||
<template x-if="filterOptions.destinations && !conceptSelected">
|
||||
<template x-for="destination in filterOptions.destinations">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="w-1/2">
|
||||
<a href="#" x-on:click.prevent="selectDestination(destination.country.uid, destination.country.label, 'country')">
|
||||
<img class="destination-pulldown__flag" x-bind:src="destination.country.flag" x-bind:alt="destination.country.label">
|
||||
<strong x-text="destination.country.label"></strong>
|
||||
</a>
|
||||
</div>
|
||||
<div class="w-1/2">
|
||||
<ul class="plain-list">
|
||||
<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>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
<template x-for="destination in filterOptions.destinations">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="w-1/2">
|
||||
<a href="#" x-on:click.prevent="selectDestination(destination.country.uid, destination.country.label, 'country')">
|
||||
<img class="destination-pulldown__flag" x-bind:src="destination.country.flag" x-bind:alt="destination.country.label">
|
||||
<strong x-text="destination.country.label"></strong>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
<div class="w-1/2">
|
||||
<ul class="plain-list">
|
||||
<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>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
<template x-if="filterOptions.concepts && !destinationSelected">
|
||||
<div class="flex items-start justify-between">
|
||||
@@ -134,7 +136,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<template x-if="destinationSelected || conceptSelected">
|
||||
<button x-on:click.prevent="resetDestinationSelect()">
|
||||
<button x-on:click.prevent="resetDestination()">
|
||||
<i class="fa fa-trash-o"></i>
|
||||
zurücksetzen
|
||||
</button>
|
||||
@@ -151,18 +153,19 @@
|
||||
<div class="relative">
|
||||
<input type="text"
|
||||
class="form-control cursor-pointer"
|
||||
x-bind:class="loading && 'cursor-not-allowed'"
|
||||
x-bind:value="priceRangeLabel()"
|
||||
x-on:click.prevent="show = show === 'priceRange' ? null : 'priceRange'"/>
|
||||
<div class="absolute top-100 left-0 bg-white p-4 shadow-md w-full h-48 overflow-y-scroll" x-show="show === 'priceRange'" x-transition x-cloak>
|
||||
<ul class="m-0 p-0">
|
||||
<li>
|
||||
<a href="#" x-on:click.prevent="resetPriceRange()">beliebig</a>
|
||||
<a href="#" x-on:click.prevent="updateSearchParam('priceRange', null)">beliebig</a>
|
||||
</li>
|
||||
<template x-for="(range, index) in filterOptions.priceRanges">
|
||||
<li>
|
||||
<a href="#"
|
||||
x-on:click.prevent="updateSearchParam('priceRange', index)"
|
||||
x-text="formatPriceRange(range)"></a>
|
||||
x-text="priceRangeFormatted(range)"></a>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
@@ -173,8 +176,12 @@
|
||||
<div class="col-sm-2">
|
||||
<div class="form-group">
|
||||
<label> </label>
|
||||
<button type="submit" class="btn btn-warning">Suchen <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></button>
|
||||
<button type="submit" class="searchbar__link">Detailsuche</button>
|
||||
<button type="submit" class="btn btn-warning" x-bind:disabled="loading">
|
||||
Suchen <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
|
||||
</button>
|
||||
<button type="submit" class="searchbar__link" x-bind:disabled="loading">
|
||||
Detailsuche
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -5,102 +5,80 @@
|
||||
<f:layout name="Default"/>
|
||||
|
||||
<f:section name="Main">
|
||||
</f:section>
|
||||
<f:section name="Main__">
|
||||
<div id="searchbox" class="searchbox hidden-lg" x-data x-show="$store.show.searchBox" x-transition x-cloak>
|
||||
<search-box
|
||||
options-uri='<ep:uri.ajax controller="AjaxSearchbar" action="options" pageUid="{settings.defaultAjaxUid}" />'
|
||||
reset-uri='<ep:uri.ajax controller="AjaxSearchbar" action="reset" pageUid="{settings.defaultAjaxUid}" />'
|
||||
argument-prefix='<ep:argumentPrefix pluginName="ajax" />'
|
||||
:initial-search-params='{searchParams -> f:format.json() -> f:format.raw()}'
|
||||
:initial-filter-options='{filterOptions -> f:format.json() -> f:format.raw()}'
|
||||
:date-presets='{settings.datePickerPresets -> f:format.json() -> f:format.raw()}'
|
||||
inline-template>
|
||||
<div class="container">
|
||||
<f:form action="processSearch" controller="Search" method="post" name="searchParams"
|
||||
object="{searchParams}" pluginName="searchresult" extensionName="epproducts"
|
||||
pageUid="{settings.defaultSearchPageUid}" class="form-horizontal">
|
||||
<f:form.hidden property="destinationUid" additionalAttributes="{v-model: 'searchParams.destinationUid', number: 'number'}"/>
|
||||
<f:form.hidden property="destinationType" additionalAttributes="{v-model: 'searchParams.destinationType'}"/>
|
||||
<f:form.hidden property="dateFrom" value="" additionalAttributes="{v-model: 'searchParams.dateFrom'}"/>
|
||||
<f:form.hidden property="dateTo" value="" additionalAttributes="{v-model: 'searchParams.dateTo'}"/>
|
||||
<f:form.hidden property="nights" additionalAttributes="{v-model: 'searchParams.nights', number: 'number'}"/>
|
||||
<f:form.hidden property="pax" additionalAttributes="{v-model: 'searchParams.pax', number: 'number'}"/>
|
||||
<f:form.hidden property="conceptUid" additionalAttributes="{v-model: 'searchParams.conceptUid', number: 'number'}"/>
|
||||
<f:form.hidden property="pageUid" additionalAttributes="{v-model: 'searchParams.pageUid', number: 'number'}"/>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="form-group">
|
||||
<label>Früheste Anreise</label>
|
||||
<input
|
||||
type="date"
|
||||
@change="updateOptions"
|
||||
v-model="searchParams.dateFrom"
|
||||
:min="filterOptions.dateFrom"
|
||||
:max="filterOptions.dateTo"
|
||||
class="form-control"
|
||||
>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Späteste Abreise</label>
|
||||
<input
|
||||
type="date"
|
||||
@change="updateOptions"
|
||||
v-model="searchParams.dateTo"
|
||||
:min="filterOptions.dateFrom"
|
||||
:max="filterOptions.dateTo"
|
||||
class="form-control"
|
||||
>
|
||||
</div>
|
||||
<div id="searchbox" class="searchbox hidden-lg" x-show="$store.show.searchBox" x-transition x-cloak 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()}
|
||||
})'>
|
||||
<div class="container">
|
||||
<f:form action="processSearch" controller="Search" method="post" name="searchParams"
|
||||
object="{searchParams}" pluginName="searchresult" extensionName="epproducts"
|
||||
pageUid="{settings.defaultSearchPageUid}" class="form-horizontal">
|
||||
<f:form.hidden property="destinationUid" additionalAttributes="{x-model: 'searchParams.destinationUid'}"/>
|
||||
<f:form.hidden property="destinationType" additionalAttributes="{x-model: 'searchParams.destinationType'}"/>
|
||||
<f:form.hidden property="dateFrom" value="" additionalAttributes="{x-model: 'searchParams.dateFrom'}"/>
|
||||
<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="pageUid" additionalAttributes="{x-model: 'searchParams.pageUid'}"/>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="form-group">
|
||||
<label>Früheste Anreise</label>
|
||||
<input
|
||||
type="date"
|
||||
x-model="searchParams.dateFrom"
|
||||
x-bind:min="filterOptions.dateFrom"
|
||||
x-bind:max="filterOptions.dateTo"
|
||||
class="form-control"
|
||||
>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Späteste Abreise</label>
|
||||
<input
|
||||
type="date"
|
||||
x-model="searchParams.dateTo"
|
||||
x-bind:min="filterOptions.dateFrom"
|
||||
x-bind:max="filterOptions.dateTo"
|
||||
class="form-control"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="form-group">
|
||||
<label>Personen</label>
|
||||
<input
|
||||
type="number"
|
||||
@change="updateOptions"
|
||||
min="1"
|
||||
max="20"
|
||||
v-model="searchParams.pax"
|
||||
class="form-control"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="form-group">
|
||||
<label>Personen</label>
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
max="20"
|
||||
x-model="searchParams.pax"
|
||||
class="form-control"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<destination-select
|
||||
class="form-group"
|
||||
@selected="updateDestination"
|
||||
@reset="resetDestination"
|
||||
:destination-options="filterOptions.destinations"
|
||||
:concept-options="filterOptions.concepts"
|
||||
></destination-select>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="form-group">
|
||||
<button type="submit" class="btn btn-warning">Suchen <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></button>
|
||||
<button type="submit" class="searchbox__link">Detailsuche</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<price-range-select
|
||||
class="form-group"
|
||||
@selected="updatePriceRange"
|
||||
:range-options="filterOptions.priceRanges"
|
||||
:range="searchParams.priceRange"
|
||||
></price-range-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="form-group">
|
||||
<button type="submit" class="btn btn-warning">Suchen <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></button>
|
||||
<button type="submit" class="searchbox__link">Detailsuche</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</f:form>
|
||||
</div>
|
||||
</search-box>
|
||||
</div>
|
||||
</f:form>
|
||||
</div>
|
||||
</div>
|
||||
</f:section>
|
||||
|
||||
|
||||
+52
-303
@@ -7,315 +7,64 @@
|
||||
|
||||
<f:section name="Main">
|
||||
<div id="search">
|
||||
<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-url="{f:uri.typolink(parameter: referringPageUid)}"
|
||||
argument-prefix="{ep:argumentPrefix(pluginName: 'ajax')}"
|
||||
:date-presets='{settings.datePickerPresets -> v:format.json.encode()}'
|
||||
inline-template>
|
||||
<div class="searchresult-wrapper">
|
||||
<div class="pagehead pagehead--searchresult">
|
||||
<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" 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 id="filterpanel" class="lg:block" v-cloak x-bind="container" x-transition x-cloak>
|
||||
<concept-buttons :concepts="filterOptions.concepts"></concept-buttons>
|
||||
<div class="searchresult-wrapper">
|
||||
<div class="pagehead pagehead--searchresult">
|
||||
<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>
|
||||
<a v-if="filterCount > 0"
|
||||
class="button button--sidebar button--small"
|
||||
href="#"
|
||||
@click.prevent="resetFilterSettings">Filter zurücksetzen</a>
|
||||
<form class="border">
|
||||
<div class="panel-group" id="filteroptions" role="tablist" aria-multiselectable="true">
|
||||
<div class="panel panel-default">
|
||||
<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: !filterSettings.dateFrom && !filterSettings.dateTo }">
|
||||
Reisezeitraum
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="collapsePeriod" class="panel-collapse collapse" role="tabpanel"
|
||||
:class="{ in: filterSettings.dateFrom || filterSettings.dateTo }"
|
||||
aria-labelledby="headingPeriod">
|
||||
<div class="panel-body">
|
||||
<div class="form-group hidden-xs hidden-sm">
|
||||
<daterange-select
|
||||
class="form-control"
|
||||
:presets="datePresets"
|
||||
:from="filterSettings.dateFrom"
|
||||
:to="filterSettings.dateTo"
|
||||
:min-date="filterOptions.dateFrom"
|
||||
:max-date="filterOptions.dateTo"
|
||||
:show-label="false"
|
||||
@selected="updateDateRange"
|
||||
></daterange-select>
|
||||
</div>
|
||||
<div class="form-group hidden-md hidden-lg">
|
||||
<label>Früheste Anreise</label>
|
||||
<input
|
||||
type="date"
|
||||
@change="updateDateSelectMobile"
|
||||
v-model="filterSettings.dateFrom"
|
||||
class="form-control"
|
||||
>
|
||||
</div>
|
||||
<div class="form-group hidden-md hidden-lg">
|
||||
<label>Späteste Abreise</label>
|
||||
<input
|
||||
type="date"
|
||||
@change="updateDateSelectMobile"
|
||||
v-model="filterSettings.dateTo"
|
||||
class="form-control"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-heading" role="tab" id="headingSearch">
|
||||
<h4 class="panel-title">
|
||||
<a role="button" data-toggle="collapse" href="#collapseSearch"
|
||||
aria-expanded="true" aria-controls="collapseSearch" class="collapsed">
|
||||
Suchen
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="collapseSearch" class="panel-collapse collapse" role="tabpanel"
|
||||
aria-labelledby="headingSearch">
|
||||
<div class="panel-body">
|
||||
<div class="form-group">
|
||||
<destination-autocomplete
|
||||
class="form-group form-control"
|
||||
@selected="updateDestination"
|
||||
:show-label="false"
|
||||
:initial-filter-settings="filterSettings"
|
||||
argument-prefix="{ep:argumentPrefix(pluginName: 'ajax', extensionName: 'epproducts')}"
|
||||
ajax-uri="{ep:uri.ajax(controller: 'AjaxFilterpanel', action: 'autocomplete', pageUid: settings.defaultAjaxUid, extensionName: 'epproducts')}"
|
||||
></destination-autocomplete>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-heading" role="tab" id="headingDestination">
|
||||
<h4 class="panel-title">
|
||||
<a role="button" data-toggle="collapse" href="#collapseDestination"
|
||||
aria-expanded="true" aria-controls="collapseDestination">
|
||||
Reiseziele
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="collapseDestination" class="panel-collapse collapse in" role="tabpanel"
|
||||
aria-labelledby="headingDestination">
|
||||
<div class="panel-body">
|
||||
<div class="form-group">
|
||||
<destination-checkboxes
|
||||
:selectable-destinations="filterOptions.destinations"
|
||||
:country-uids="filterSettings.countryUids"
|
||||
:region-uids="filterSettings.regionUids"
|
||||
:show-label="false"
|
||||
@selected="updateDestinations"
|
||||
></destination-checkboxes>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-heading" role="tab" id="headingConcept">
|
||||
<h4 class="panel-title">
|
||||
<a role="button" data-toggle="collapse" href="#collapseConcept"
|
||||
aria-expanded="true" aria-controls="collapseConcept">
|
||||
Reisekonzepte
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="collapseConcept" class="panel-collapse collapse in" role="tabpanel"
|
||||
aria-labelledby="headingConcept">
|
||||
<div class="panel-body">
|
||||
<div class="form-group">
|
||||
<concept-select
|
||||
:concept-options="filterOptions.concepts"
|
||||
:concepts="filterSettings.conceptUids"
|
||||
@selected="updateConcepts"
|
||||
></concept-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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: 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">
|
||||
<price-range-select
|
||||
class="form-control"
|
||||
:range-options="filterOptions.priceRanges"
|
||||
:range="filterSettings.priceRange"
|
||||
:show-label="false"
|
||||
@selected="updatePriceRange"
|
||||
></price-range-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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: 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">
|
||||
<pax-select
|
||||
class="form-control"
|
||||
:pax-options="filterOptions.pax"
|
||||
:pax="filterSettings.pax"
|
||||
:show-label="false"
|
||||
@selected="updatePax"
|
||||
></pax-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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: !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">
|
||||
<hotel-types-select
|
||||
:hotel-types-options="filterOptions.hotelTypes"
|
||||
:hotel-types="filterSettings.hotelTypes"
|
||||
@selected="updateHotelTypes"
|
||||
></hotel-types-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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: !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">
|
||||
<board-types-select
|
||||
:board-types-options="filterOptions.boardTypes"
|
||||
:board-types="filterSettings.boardTypes"
|
||||
@selected="updateBoardTypes"
|
||||
></board-types-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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: !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">
|
||||
<room-types-select
|
||||
:room-types-options="filterOptions.roomTypes"
|
||||
:room-types="filterSettings.roomTypes"
|
||||
@selected="updateRoomTypes"
|
||||
></room-types-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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: !filterSettings.bus }">
|
||||
Anreise
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="collapseBus" class="panel-collapse collapse" role="tabpanel"
|
||||
:class="{ in: filterSettings.bus }"
|
||||
aria-labelledby="headingBus">
|
||||
<div class="panel-body">
|
||||
<div class="form-group">
|
||||
<bus-select
|
||||
:bus-available="filterOptions.busAvailable"
|
||||
:bus="filterSettings.bus"
|
||||
@selected="updateBus"
|
||||
></bus-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div v-show="loading" class="loader">
|
||||
<f:image src="EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif" alt="Loading"/>
|
||||
<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>
|
||||
</div>
|
||||
<div class="col-md-9 ajaxtarget searchresult" v-cloak>
|
||||
<div class="searchresult__info alert alert-info" v-html="resultInfo"></div>
|
||||
<div class="searchresult__content">
|
||||
<template v-for="section in resultData">
|
||||
<a :id="'concept-' + section.concept.uid" class="anchor"></a>
|
||||
<h2 class="headline headline--secondary headline--underlined">{{ section.concept.name }}</h2>
|
||||
<div class="searchresult-section" :class="'searchresult-section--' + section.concept.code">
|
||||
<search-result-item
|
||||
v-for="item in section.items"
|
||||
:key="item.key"
|
||||
:item="item"
|
||||
:section="section"
|
||||
:referring-page-uri="referringPageUri"
|
||||
></search-result-item>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div v-show="loading" class="loader">
|
||||
<f:image src="EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif" alt="Loading"/>
|
||||
</div>
|
||||
</div>
|
||||
</f:spaceless>
|
||||
</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>
|
||||
</search-result>
|
||||
</div>
|
||||
</div>
|
||||
</f:section>
|
||||
|
||||
|
||||
@@ -6,9 +6,12 @@
|
||||
|
||||
<f:section name="Main">
|
||||
<ep:container data="{data}">
|
||||
<watchlist loader-uri="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif')}"
|
||||
referring-page-url="{f:uri.typolink(parameter: referringPageUid)}"
|
||||
watchlist-uri="{ep:uri.ajax(action: 'list', controller: 'AjaxWatchlist', pageUid: settings.defaultAjaxUid)}"></watchlist>
|
||||
<div class="watchlist" x-data='watchlist("<ep:uri.ajax action="list" controller="AjaxWatchlist" pageUid="{settings.defaultAjaxUid}"/>")'>
|
||||
<div x-ref="watchlist"></div>
|
||||
<div x-show="loading" class="loader">
|
||||
<f:image src="EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif" alt="Loading"/>
|
||||
</div>
|
||||
</div>
|
||||
</ep:container>
|
||||
</f:section>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user