Compare commits
4
Commits
432d8da350
..
master
| Author | SHA1 | Date | |
|---|---|---|---|
 fromme
|
9b3550ec40 | ||
|
fromme
|
d9943619f6 | ||
|
fromme
|
e33b57c9f1 | ||
|
fromme
|
dc594efee1 |
-3284
File diff suppressed because it is too large
Load Diff
Generated
-18
@@ -21,10 +21,8 @@
|
||||
"glightbox": "^3.0.9",
|
||||
"htmx.org": "^1.9.12",
|
||||
"jquery": "^3.6.0",
|
||||
"lazysizes": "^5.3.2",
|
||||
"leaflet": "^1.7.1",
|
||||
"normalize.css": "^8.0.1",
|
||||
"picturefill": "^3.0.3",
|
||||
"slick-carousel": "^1.8.1",
|
||||
"sticky-js": "^1.3.0",
|
||||
"stimulus-use": "^0.52.0",
|
||||
@@ -6017,12 +6015,6 @@
|
||||
"shell-quote": "^1.8.4"
|
||||
}
|
||||
},
|
||||
"node_modules/lazysizes": {
|
||||
"version": "5.3.2",
|
||||
"resolved": "https://registry.npmjs.org/lazysizes/-/lazysizes-5.3.2.tgz",
|
||||
"integrity": "sha512-22UzWP+Vedi/sMeOr8O7FWimRVtiNJV2HCa+V8+peZOw6QbswN9k58VUhd7i6iK5bw5QkYrF01LJbeJe0PV8jg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/leaflet": {
|
||||
"version": "1.9.4",
|
||||
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
|
||||
@@ -6963,16 +6955,6 @@
|
||||
"url": "https://github.com/sponsors/jonschlinkert"
|
||||
}
|
||||
},
|
||||
"node_modules/picturefill": {
|
||||
"version": "3.0.3",
|
||||
"resolved": "https://registry.npmjs.org/picturefill/-/picturefill-3.0.3.tgz",
|
||||
"integrity": "sha512-JDdx+3i4fs2pkqwWZJgGEM2vFWsq+01YsQFT9CKPGuv2Q0xSdrQZoxi9XwyNARTgxiOdgoAwWQRluLRe/JQX2g==",
|
||||
"deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/pify": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
|
||||
|
||||
@@ -24,10 +24,8 @@
|
||||
"glightbox": "^3.0.9",
|
||||
"htmx.org": "^1.9.12",
|
||||
"jquery": "^3.6.0",
|
||||
"lazysizes": "^5.3.2",
|
||||
"leaflet": "^1.7.1",
|
||||
"normalize.css": "^8.0.1",
|
||||
"picturefill": "^3.0.3",
|
||||
"slick-carousel": "^1.8.1",
|
||||
"sticky-js": "^1.3.0",
|
||||
"stimulus-use": "^0.52.0",
|
||||
|
||||
@@ -4,9 +4,6 @@ import Vue from 'vue'
|
||||
import $ from 'jquery'
|
||||
import VueSession from 'vue-session'
|
||||
|
||||
import 'lazysizes';
|
||||
import 'lazysizes/plugins/attrchange/ls.attrchange';
|
||||
|
||||
const slick = require('slick-carousel');
|
||||
const Sticky = require('sticky-js');
|
||||
const $window = $(window);
|
||||
|
||||
+3
-3
@@ -38,9 +38,9 @@
|
||||
<div class="card card--no-form offerlist-item__card">
|
||||
<div class="card__inner">
|
||||
<picture>
|
||||
<source media="(max-width: 512px)" :data-srcset="offer.teaserImageMobile + ' 500w'"/>
|
||||
<img class="card__image scale lazyload" data-sizes="auto"
|
||||
:data-src="offer.teaserImage" alt="">
|
||||
<source media="(max-width: 512px)" :srcset="offer.teaserImageMobile"/>
|
||||
<img class="card__image scale"
|
||||
:src="offer.teaserImage" alt="" loading="lazy">
|
||||
</picture>
|
||||
<div class="card__caption">
|
||||
<span class="card__subtitle" v-html="offer.name"></span>
|
||||
|
||||
@@ -1,49 +0,0 @@
|
||||
<?php
|
||||
|
||||
namespace EP\EpTheme\ViewHelpers;
|
||||
|
||||
use TYPO3\CMS\Core\Utility\GeneralUtility;
|
||||
use TYPO3\CMS\Fluid\ViewHelpers\ImageViewHelper;
|
||||
|
||||
class LazyLoadImageViewHelper extends ImageViewHelper
|
||||
{
|
||||
public function initializeArguments()
|
||||
{
|
||||
parent::initializeArguments();
|
||||
$this->registerArgument('loaderimg', 'string', '', false);
|
||||
}
|
||||
|
||||
public function render(): string
|
||||
{
|
||||
parent::render();
|
||||
|
||||
$src = $this->tag->getAttribute('src');
|
||||
$this->tag->removeAttribute('src');
|
||||
$this->tag->addAttribute('data', ['src' => $src], false);
|
||||
|
||||
if (isset($this->arguments['loaderimg'])) {
|
||||
$loaderImage = $this->imageService->getImage($this->arguments['loaderimg'], null, false);
|
||||
$processingInstructions = [
|
||||
'width' => $this->arguments['width'],
|
||||
'height' => $this->arguments['height'],
|
||||
'minWidth' => $this->arguments['minWidth'],
|
||||
'minHeight' => $this->arguments['minHeight'],
|
||||
'maxWidth' => $this->arguments['maxWidth'],
|
||||
'maxHeight' => $this->arguments['maxHeight'],
|
||||
];
|
||||
$processedLoaderImage = $this->imageService->applyProcessingInstructions($loaderImage, $processingInstructions);
|
||||
$loaderImageUri = $this->imageService->getImageUri($processedLoaderImage, $this->arguments['absolute']);
|
||||
$this->tag->addAttribute('src', $loaderImageUri);
|
||||
}
|
||||
|
||||
$classes = $this->tag->getAttribute('class');
|
||||
$classItems = GeneralUtility::trimExplode(' ', $classes, true);
|
||||
$classItems[] = 'lazyload';
|
||||
$classes = implode(' ', array_unique($classItems));
|
||||
$this->tag->addAttribute('class', $classes);
|
||||
// ensure a11y compliance
|
||||
$this->tag->removeAttribute('title');
|
||||
|
||||
return $this->tag->render();
|
||||
}
|
||||
}
|
||||
@@ -1,8 +1,3 @@
|
||||
// Import dependencies
|
||||
require('lazysizes')
|
||||
require('lazysizes/plugins/unveilhooks/ls.unveilhooks')
|
||||
// require('picturefill')
|
||||
|
||||
// Polyfills
|
||||
// import smoothscroll from 'smoothscroll-polyfill'
|
||||
// smoothscroll.polyfill()
|
||||
|
||||
-791
@@ -1,791 +0,0 @@
|
||||
<template>
|
||||
<div class="relative">
|
||||
<div class="mb-8"
|
||||
v-show="!submitted">
|
||||
<label class="mb-2 font-bold">
|
||||
Zeitraum
|
||||
</label>
|
||||
<input type="text"
|
||||
class="form-field"
|
||||
placeholder="von... bis" ref="picker"/>
|
||||
<p class="text-sm mt-2" v-if="mainSeasonFrom && mainSeasonTo">
|
||||
in der Hauptsaison {{ mainSeasonFrom }}-{{ mainSeasonTo }} mind. {{ minBookingDays }} Tage
|
||||
</p>
|
||||
<p class="text-sm italic mt-2"
|
||||
v-show="nightsCount === 1">
|
||||
Einzelne Nächte sind nur auf Anfrage buchbar
|
||||
</p>
|
||||
</div>
|
||||
<div class="mb-8 grid sm:grid-cols-2 gap-8"
|
||||
v-show="!submitted">
|
||||
<div>
|
||||
<label class="mb-2 font-bold">
|
||||
Personenzahl
|
||||
</label>
|
||||
<input type="number"
|
||||
class="form-field"
|
||||
min="30"
|
||||
v-model.number="selectedPax"
|
||||
@change="onPaxUpdated()"
|
||||
v-show="nightsCount > 0"/>
|
||||
<p class="text-sm italic"
|
||||
v-show="nightsCount === 0">
|
||||
Bitte zuerst einen Zeitraum wählen
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mb-2 font-bold">
|
||||
davon Kinder 0-3 Jahre
|
||||
</label>
|
||||
<input type="number"
|
||||
class="form-field"
|
||||
min="0"
|
||||
v-model.number="childrenCount"
|
||||
@change="onPaxUpdated()"
|
||||
v-show="nightsCount > 0"/>
|
||||
<p class="text-sm italic"
|
||||
v-show="nightsCount === 0">
|
||||
Bitte zuerst einen Zeitraum wählen
|
||||
</p>
|
||||
<p class="text-sm italic"
|
||||
v-show="nightsCount > 0">
|
||||
Kinder werden nur bei Strom- und Abfallgebühren berücksichtigt.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mb-2 font-bold">
|
||||
davon Kinder 4-5 Jahre*
|
||||
</label>
|
||||
<input type="number"
|
||||
class="form-field"
|
||||
min="0"
|
||||
v-model.number="minorsCount"
|
||||
@change="onPaxUpdated()"
|
||||
v-show="nightsCount > 0"/>
|
||||
<p class="text-sm italic"
|
||||
v-show="nightsCount === 0">
|
||||
Bitte zuerst einen Zeitraum wählen
|
||||
</p>
|
||||
</div>
|
||||
<div v-if="adolescentsAge > 0">
|
||||
<label class="mb-2 font-bold">
|
||||
davon Kinder 6-{{ adolescentsAge }} Jahre*
|
||||
</label>
|
||||
<input type="number"
|
||||
class="form-field"
|
||||
min="0"
|
||||
v-model.number="adolescentsCount"
|
||||
@change="onPaxUpdated()"
|
||||
v-show="nightsCount > 0"/>
|
||||
<p class="text-sm italic"
|
||||
v-show="nightsCount === 0">
|
||||
Bitte zuerst einen Zeitraum wählen
|
||||
</p>
|
||||
</div>
|
||||
<div class="sm:col-span-2 text-sm">
|
||||
*Die Kosten für Essen und Kurtaxe werden wir entsprechend der Altersstruktur der Gäste in der Rechnung
|
||||
anpassen.
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-8"
|
||||
v-show="options.length > 0 && !submitted">
|
||||
<div class="mb-2 font-bold">
|
||||
Optionale Zusatzleistungen
|
||||
</div>
|
||||
<ul class="mb-0 p-0 space-y-2">
|
||||
<li v-for="option of options" :key="option.uid">
|
||||
<label class="flex items-start">
|
||||
<input type="checkbox"
|
||||
class="w-5 h-5 border-ep-primary-light ring-0 bg-transparent focus:ring-0 focus:border-none text-ep-primary"
|
||||
v-model="selectedOptions"
|
||||
:value="option">
|
||||
<span class="pl-2 leading-none">{{ option.title }}{{ formatOptionPriceType(option) }}</span>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mb-8"
|
||||
v-show="boards.length > 0 && !submitted">
|
||||
<label class="mb-2 font-bold">
|
||||
Verpflegungsleistungen
|
||||
</label>
|
||||
<select class="form-field"
|
||||
v-model="selectedBoard"
|
||||
v-if="selectedPax >= 30">
|
||||
<option :value="null" disabled>bitte auswählen</option>
|
||||
<option v-for="board of boards"
|
||||
:value="board"
|
||||
:key="board.uid">
|
||||
{{ board.title }} ({{ formatCurrency(board.price) }} pro Person und Nacht)
|
||||
</option>
|
||||
</select>
|
||||
<div class="text-sm text-red-600 mt-1"
|
||||
v-show="formErrors.board"
|
||||
v-html="formErrors.board"></div>
|
||||
<div v-show="selectedPax < 30">
|
||||
<span class="text-red-600">Erst ab 30 Personen buchbar.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-8">
|
||||
<div class="pb-2" v-if="submitted">
|
||||
<p class="text-lg font-bold pb-2">
|
||||
Vielen Dank für Deine {{ mode === 'booking' ? 'Buchung' : 'Anfrage' }}.
|
||||
</p>
|
||||
<p>
|
||||
Für folgendes habt ihr euch entschieden:
|
||||
</p>
|
||||
</div>
|
||||
<div class="p-2 uppercase bg-ep-primary-dark text-white w-full">
|
||||
Preise
|
||||
</div>
|
||||
<div class="bg-zinc-100 p-2 mb-2">
|
||||
<table class="w-full" v-show="nightsCount > 0">
|
||||
<tbody>
|
||||
<tr class="odd:bg-zinc-100">
|
||||
<th class="text-left py-2">Zeitraum</th>
|
||||
<td>{{ rangeFormatted }}, {{ nightsCount }} Nächte</td>
|
||||
</tr>
|
||||
<tr class="odd:bg-zinc-100">
|
||||
<th class="text-left py-2">Personenzahl</th>
|
||||
<td>
|
||||
{{ selectedPax }}<span v-if="childrenCount > 0">, davon Kinder {{ childrenCount }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="odd:bg-zinc-100">
|
||||
<th class="text-left py-2">Basispreis</th>
|
||||
<td>{{ formatCurrency(pricePax.base) }}</td>
|
||||
</tr>
|
||||
<tr class="odd:bg-zinc-100"
|
||||
v-if="pricePax.additional.EUR > 0 || pricePax.additional.CHF > 0">
|
||||
<th class="text-left py-2">Aufpreis Personenzahl</th>
|
||||
<td>{{ formatCurrency(pricePax.additional) }}</td>
|
||||
</tr>
|
||||
<tr class="odd:bg-zinc-100"
|
||||
v-if="priceShortTerm.EUR > 0 || priceShortTerm.CHF > 0">
|
||||
<th class="text-left py-2">Aufpreis Kurzzeit</th>
|
||||
<td>{{ formatCurrency(priceShortTerm) }}</td>
|
||||
</tr>
|
||||
<tr class="odd:bg-zinc-100"
|
||||
v-for="selectedOption in selectedOptions">
|
||||
<th class="text-left py-2">{{ selectedOption.title }}</th>
|
||||
<td>{{ formatCurrency(calculateOptionPrice(selectedOption)) }}</td>
|
||||
</tr>
|
||||
<tr class="odd:bg-zinc-100"
|
||||
v-if="priceBoard.EUR > 0 || priceBoard.CHF > 0">
|
||||
<th class="text-left py-2">{{ selectedBoard.title }}</th>
|
||||
<td>{{ formatCurrency(priceBoard) }}</td>
|
||||
</tr>
|
||||
<tr class="odd:bg-zinc-100"
|
||||
v-if="false === isSelfCatering && undersubscriptionLimit > 0">
|
||||
<th class="text-left py-2">Verpflegungs-Aufschlag für Gruppen unter {{ undersubscriptionLimit }} Personen</th>
|
||||
<td>{{ formatCurrency(pricePax.undersubscription) }}</td>
|
||||
</tr>
|
||||
<tr class="odd:bg-zinc-100"
|
||||
v-if="priceRunningCosts.EUR > 0 || priceRunningCosts.CHF > 0">
|
||||
<th class="text-left py-2">Strom- und Abfallgebühren</th>
|
||||
<td>{{ formatCurrency(priceRunningCosts) }}</td>
|
||||
</tr>
|
||||
<tr class="odd:bg-zinc-100">
|
||||
<th class="text-left py-2">Gesamtpreis</th>
|
||||
<td>
|
||||
<strong>{{ formatCurrency(priceTotal) }}</strong>
|
||||
<br>
|
||||
<small>{{ taxLabel }}</small>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p class="text-sm italic"
|
||||
v-show="nightsCount === 0">
|
||||
Bitte zuerst einen Zeitraum wählen
|
||||
</p>
|
||||
</div>
|
||||
<div v-if="mode === 'booking' && submitted">
|
||||
Bitte beachtet, dass die Buchung bei uns eingegangen, aber <strong>noch nicht bestätigt</strong> ist.
|
||||
Wir behalten uns vor, die Buchungen auf Verfügbarkeit und Länge des gewünschten Aufenthalts zu prüfen.
|
||||
Erst wenn wir euch die Buchung per Mail bestätigt haben, wird sie bindend.
|
||||
</div>
|
||||
<div v-if="mode === 'inquiry' && submitted">
|
||||
Die Anfrage ist bei uns eingegangen und wird schnellstmöglich bearbeitet. Wir melden uns telefonisch
|
||||
oder per Mail bei euch.
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-8"
|
||||
v-show="nightsCount > 0 && !submitted">
|
||||
<div class="p-2 uppercase bg-ep-primary-dark text-white w-full">
|
||||
Jetzt <span v-if="!forceInquiry">buchen</span><span v-if="forceInquiry">anfragen</span>
|
||||
</div>
|
||||
<div class="bg-zinc-100 p-2">
|
||||
<div class="grid md:grid-cols-2 gap-4 mb-4">
|
||||
<div :class="{ 'has-error': formErrors.name }">
|
||||
<label class="font-bold mb-2">
|
||||
Name*
|
||||
</label>
|
||||
<input type="text"
|
||||
class="form-field"
|
||||
v-model="name">
|
||||
<div class="text-sm text-red-600 mt-1"
|
||||
v-show="formErrors.name"
|
||||
v-html="formErrors.name"></div>
|
||||
</div>
|
||||
<div :class="{ 'has-error': formErrors.street }">
|
||||
<label class="font-bold mb-2">
|
||||
Strasse, Nr.*
|
||||
</label>
|
||||
<input type="text"
|
||||
class="form-field"
|
||||
v-model="street">
|
||||
<div class="text-sm text-red-600 mt-1"
|
||||
v-show="formErrors.street"
|
||||
v-html="formErrors.street"></div>
|
||||
</div>
|
||||
<div :class="{ 'has-error': formErrors.postcode }">
|
||||
<label class="font-bold mb-2">
|
||||
Postleitzahl*
|
||||
</label>
|
||||
<input type="text"
|
||||
class="form-field"
|
||||
v-model="postcode">
|
||||
<div class="text-sm text-red-600 mt-1"
|
||||
v-show="formErrors.postcode"
|
||||
v-html="formErrors.postcode"></div>
|
||||
</div>
|
||||
<div :class="{ 'has-error': formErrors.city }">
|
||||
<label class="font-bold mb-2">
|
||||
Ort*
|
||||
</label>
|
||||
<input type="text"
|
||||
class="form-field"
|
||||
v-model="city">
|
||||
<div class="text-sm text-red-600 mt-1"
|
||||
v-show="formErrors.city"
|
||||
v-html="formErrors.city"></div>
|
||||
</div>
|
||||
<div :class="{ 'has-error': formErrors.group }">
|
||||
<label class="font-bold mb-2">
|
||||
Name der Gruppe*
|
||||
</label>
|
||||
<input type="text"
|
||||
class="form-field"
|
||||
v-model="group">
|
||||
<div class="text-sm text-red-600 mt-1"
|
||||
v-show="formErrors.group"
|
||||
v-html="formErrors.group"></div>
|
||||
</div>
|
||||
<div :class="{ 'has-error': formErrors.email }">
|
||||
<label class="font-bold mb-2">
|
||||
E-Mail*
|
||||
</label>
|
||||
<input type="text"
|
||||
class="form-field"
|
||||
v-model="email">
|
||||
<div class="text-sm text-red-600 mt-1"
|
||||
v-show="formErrors.email"
|
||||
v-html="formErrors.email"></div>
|
||||
</div>
|
||||
<div :class="{ 'has-error': formErrors.phone }">
|
||||
<label class="font-bold mb-2">
|
||||
Telefon*
|
||||
</label>
|
||||
<input type="text"
|
||||
class="form-field"
|
||||
v-model="phone">
|
||||
<div class="text-sm text-red-600 mt-1"
|
||||
v-show="formErrors.phone"
|
||||
v-html="formErrors.phone"></div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="font-bold mb-2">
|
||||
Bemerkungen/Wünsche
|
||||
</label>
|
||||
<textarea class="form-field"
|
||||
cols="30"
|
||||
rows="3"
|
||||
v-model="remarks"/>
|
||||
</div>
|
||||
<div v-if="mode === 'booking'" :class="{ 'has-error': formErrors.confirmation }">
|
||||
<label for="confirmation" class="flex items-start">
|
||||
<input type="checkbox" v-model="confirmation" name="confirmation" id="confirmation">
|
||||
<span class="block ml-2">
|
||||
Durch Anklicken des Buttons 'Buchung abschicken' bestätige ich, dass ich die
|
||||
<a :href="termsUrls[countryCode]"
|
||||
class="text-ep-primary" target="_blank">
|
||||
Allgemeinen Geschäftsbedingungen (AGB)
|
||||
</a> gelesen habe und damit einverstanden bin, dass eine
|
||||
kostenpflichtige Buchung zustande kommt.
|
||||
</span>
|
||||
</label>
|
||||
<div class="text-sm text-red-600 mt-1"
|
||||
v-show="formErrors.confirmation"
|
||||
v-html="formErrors.confirmation"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="py-4">
|
||||
Ihr erhaltet von uns eine Bestätigung. Wir behalten uns vor die Buchung zu prüfen. Erst nach
|
||||
Rückbestätigung von uns gilt die Buchung auch von unserer Seite als bindend.
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<button class="button bg-button"
|
||||
type="submit"
|
||||
v-if="!forceInquiry"
|
||||
@click.prevent="submitForm('booking')">
|
||||
Buchung abschicken
|
||||
</button>
|
||||
<button class="button bg-button"
|
||||
:class="{ 'button--small bg-ep-secondary': !forceInquiry }"
|
||||
type="submit"
|
||||
@click.prevent="submitForm('inquiry')">
|
||||
als Anfrage senden
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<img :src="logoAt" alt="" v-if="countryCode === 'AT'" class="block w-full h-auto max-w-24">
|
||||
<img :src="logoCh" alt="" v-if="countryCode === 'CH'" class="block w-full h-auto max-w-24">
|
||||
</div>
|
||||
<div class="fixed top-0 left-0 inset-0 bg-white/85 flex items-center justify-center" v-show="processing">
|
||||
<img :src="loaderUri" alt="Loading...">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dayjs from 'dayjs'
|
||||
import 'dayjs/locale/de'
|
||||
import 'flatpickr';
|
||||
import {German} from 'flatpickr/dist/l10n/de';
|
||||
import Vue from 'vue';
|
||||
|
||||
export default {
|
||||
name: 'GroupsPriceCalculator',
|
||||
props: {
|
||||
loaderUri: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
endpoint: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
logoAt: {
|
||||
type: String,
|
||||
},
|
||||
logoCh: {
|
||||
type: String,
|
||||
},
|
||||
configsJson: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
boardsJson: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
optionsJson: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
runningCostsFactorEur: {
|
||||
type: Number,
|
||||
default: 2.5,
|
||||
},
|
||||
runningCostsFactorChf: {
|
||||
type: Number,
|
||||
default: 2.9,
|
||||
},
|
||||
undersubscription30Eur: {
|
||||
type: Number,
|
||||
default: 5.0,
|
||||
},
|
||||
undersubscription30Chf: {
|
||||
type: Number,
|
||||
default: 5.0,
|
||||
},
|
||||
undersubscription40Eur: {
|
||||
type: Number,
|
||||
default: 2.5,
|
||||
},
|
||||
undersubscription40Chf: {
|
||||
type: Number,
|
||||
default: 2.5,
|
||||
},
|
||||
countryCode: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
shortTermFactors: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [
|
||||
{ nights: 1, factor: 0.3 },
|
||||
{ nights: 2, factor: 0.2 },
|
||||
{ nights: 3, factor: 0.1 },
|
||||
]
|
||||
}
|
||||
},
|
||||
mainSeasonFrom: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
mainSeasonTo: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
minBookingDays: {
|
||||
type: Number,
|
||||
default: 5,
|
||||
},
|
||||
taxLabel: {
|
||||
type: String,
|
||||
default: 'zzgl. vorab zu entrichtender Ortstaxe',
|
||||
},
|
||||
adolescentsAge: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
configs: JSON.parse(this.configsJson),
|
||||
boards: JSON.parse(this.boardsJson),
|
||||
options: JSON.parse(this.optionsJson),
|
||||
processing: false,
|
||||
submitted: false,
|
||||
picker: null,
|
||||
formErrors: {},
|
||||
selectedFrom: null,
|
||||
selectedTo: null,
|
||||
selectedRange: [],
|
||||
selectedPax: 30,
|
||||
childrenCount: 0,
|
||||
minorsCount: 0,
|
||||
adolescentsCount: 0,
|
||||
selectedOptions: [],
|
||||
selectedBoard: null,
|
||||
name: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
remarks: '',
|
||||
group: '',
|
||||
street: '',
|
||||
postcode: '',
|
||||
city: '',
|
||||
mode: 'booking',
|
||||
confirmation: false,
|
||||
termsUrls: {
|
||||
AT: 'https://www.ep-reisen.de/fileadmin/user_upload/allgemein/AGB_Gruppen/AGB_Gruppen_CLLT_Touristik_GmbH.pdf',
|
||||
CH: 'https://www.ep-reisen.de/fileadmin/user_upload/allgemein/AGB_Gruppen/AVB_Gruppen_AlpineVacation_GmbH.pdf',
|
||||
IT: 'https://www.ep-reisen.de/fileadmin/user_upload/allgemein/AGB_Gruppen/AGB_Gruppen_E_P_Reisen.pdf',
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formatCurrency({ EUR, CHF }) {
|
||||
let price
|
||||
|
||||
if ('CH' === this.countryCode) {
|
||||
let formatter = new Intl.NumberFormat('de-DE', {
|
||||
style: 'currency',
|
||||
currency: 'CHF',
|
||||
})
|
||||
price = formatter.format(CHF)
|
||||
} else {
|
||||
let formatter = new Intl.NumberFormat('de-DE', {
|
||||
style: 'currency',
|
||||
currency: 'EUR',
|
||||
})
|
||||
price = formatter.format(EUR)
|
||||
}
|
||||
|
||||
return price
|
||||
},
|
||||
calculateOptionPrice(option) {
|
||||
let price = {
|
||||
EUR: 0,
|
||||
CHF: 0,
|
||||
};
|
||||
let optionPriceEUR = option.price.EUR
|
||||
let optionPriceCHF = option.price.CHF
|
||||
if (1 === option.type) {
|
||||
price.EUR = optionPriceEUR;
|
||||
price.CHF = optionPriceCHF;
|
||||
} else if (2 === option.type) {
|
||||
price.EUR = optionPriceEUR * this.paxCount;
|
||||
price.CHF = optionPriceCHF * this.paxCount;
|
||||
} else if (3 === option.type) {
|
||||
price.EUR = optionPriceEUR * this.nightsCount;
|
||||
price.CHF = optionPriceCHF * this.nightsCount;
|
||||
} else if (4 === option.type) {
|
||||
price.EUR = optionPriceEUR * this.nightsCount * this.paxCount;
|
||||
price.CHF = optionPriceCHF * this.nightsCount * this.paxCount;
|
||||
}
|
||||
return price;
|
||||
},
|
||||
formatOptionPriceType(option) {
|
||||
if (2 === option.type) {
|
||||
return ` (${this.formatCurrency(option.price)} pro Person)`
|
||||
}
|
||||
if (3 === option.type) {
|
||||
return ` (${this.formatCurrency(option.price)} pro Nacht)`
|
||||
}
|
||||
if (4 === option.type) {
|
||||
return ` (${this.formatCurrency(option.price)} pro Person und Nacht)`
|
||||
}
|
||||
|
||||
return ` (${this.formatCurrency(option.price)})`
|
||||
},
|
||||
initSelectableRanges() {
|
||||
let enabledDates = [];
|
||||
for (let config of this.configs) {
|
||||
const dateFrom = dayjs(config.dateFrom);
|
||||
const dateTo = dayjs(config.dateTo);
|
||||
enabledDates.push({
|
||||
from: dateFrom.format('DD.MM.YYYY'),
|
||||
to: dateTo.format('DD.MM.YYYY')
|
||||
});
|
||||
}
|
||||
this.picker.set('enable', enabledDates);
|
||||
if (enabledDates.length > 0) {
|
||||
const firstDate = enabledDates[0].from;
|
||||
this.picker.set('minDate', firstDate);
|
||||
}
|
||||
},
|
||||
updateSelectedRange() {
|
||||
let range = [];
|
||||
let currentDate = this.selectedFrom;
|
||||
while (currentDate < this.selectedTo) {
|
||||
range.push(currentDate);
|
||||
currentDate = currentDate.add(1, 'day');
|
||||
}
|
||||
this.selectedRange = range;
|
||||
},
|
||||
onPaxUpdated() {
|
||||
if (this.selectedPax < 30) {
|
||||
this.selectedBoard = null;
|
||||
}
|
||||
},
|
||||
submitForm(mode) {
|
||||
this.mode = mode
|
||||
let confirmation = 'inquiry' === mode ? true : this.confirmation
|
||||
let formData = new URLSearchParams({
|
||||
'tx_epproducts_ajax[groupsPriceInquiry][mode]': mode,
|
||||
'tx_epproducts_ajax[groupsPriceInquiry][confirmation]': confirmation ? '1' : '0',
|
||||
'tx_epproducts_ajax[groupsPriceInquiry][name]': this.name ? this.name : '',
|
||||
'tx_epproducts_ajax[groupsPriceInquiry][group]': this.group ? this.group : '',
|
||||
'tx_epproducts_ajax[groupsPriceInquiry][street]': this.street ? this.street : '',
|
||||
'tx_epproducts_ajax[groupsPriceInquiry][postcode]': this.postcode ? this.postcode : '',
|
||||
'tx_epproducts_ajax[groupsPriceInquiry][city]': this.city ? this.city : '',
|
||||
'tx_epproducts_ajax[groupsPriceInquiry][email]': this.email? this.email : '',
|
||||
'tx_epproducts_ajax[groupsPriceInquiry][phone]': this.phone ? this.phone : '',
|
||||
'tx_epproducts_ajax[groupsPriceInquiry][remarks]': this.remarks,
|
||||
'tx_epproducts_ajax[groupsPriceInquiry][dateFrom]': this.selectedFrom.format('DD.MM.YYYY'),
|
||||
'tx_epproducts_ajax[groupsPriceInquiry][dateTo]': this.selectedTo.format('DD.MM.YYYY'),
|
||||
'tx_epproducts_ajax[groupsPriceInquiry][nights]': this.nightsCount,
|
||||
'tx_epproducts_ajax[groupsPriceInquiry][pax]': this.selectedPax,
|
||||
'tx_epproducts_ajax[groupsPriceInquiry][children]': this.childrenCount,
|
||||
'tx_epproducts_ajax[groupsPriceInquiry][minors]': this.minorsCount,
|
||||
'tx_epproducts_ajax[groupsPriceInquiry][adolescents]': this.adolescentsCount,
|
||||
'tx_epproducts_ajax[groupsPriceInquiry][summary][paxBase]': this.formatCurrency(this.pricePax.base),
|
||||
'tx_epproducts_ajax[groupsPriceInquiry][summary][paxAdditional]': this.formatCurrency(this.pricePax.additional),
|
||||
'tx_epproducts_ajax[groupsPriceInquiry][summary][undersubscription]': this.formatCurrency(this.pricePax.undersubscription),
|
||||
'tx_epproducts_ajax[groupsPriceInquiry][summary][shortTerm]': this.formatCurrency(this.priceShortTerm),
|
||||
'tx_epproducts_ajax[groupsPriceInquiry][summary][options]': this.formatCurrency(this.priceOptions),
|
||||
'tx_epproducts_ajax[groupsPriceInquiry][summary][board]': this.formatCurrency(this.priceBoard),
|
||||
'tx_epproducts_ajax[groupsPriceInquiry][summary][runningCosts]': this.formatCurrency(this.priceRunningCosts),
|
||||
'tx_epproducts_ajax[groupsPriceInquiry][summary][total]': this.formatCurrency(this.priceTotal),
|
||||
})
|
||||
if (this.selectedBoard) {
|
||||
formData.append('tx_epproducts_ajax[groupsPriceInquiry][board]', this.selectedBoard.uid)
|
||||
}
|
||||
this.selectedOptions.map(option => (
|
||||
formData.append('tx_epproducts_ajax[groupsPriceInquiry][options][]', option.uid)
|
||||
))
|
||||
this.processing = true;
|
||||
this.submitted = false;
|
||||
fetch(this.endpoint, { method: 'POST', body: formData })
|
||||
.then(response => response.json())
|
||||
.then((json) => {
|
||||
if ('validation' === json.status) {
|
||||
this.formErrors = json.errors
|
||||
} else {
|
||||
this.submitted = true;
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
dataLayer.push({
|
||||
'event': 'Preisberechnung'
|
||||
})
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.processing = false
|
||||
})
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
isSelfCatering() {
|
||||
let selectedBoard = this.selectedBoard
|
||||
if (null === selectedBoard) {
|
||||
return true
|
||||
}
|
||||
if ('CH' === this.countryCode) {
|
||||
return selectedBoard.price.CHF === 0
|
||||
} else {
|
||||
return selectedBoard.price.EUR === 0
|
||||
}
|
||||
},
|
||||
undersubscriptionLimit() {
|
||||
if (this.paxCount < 40) {
|
||||
return 40
|
||||
} else if (this.paxCount < 50) {
|
||||
return 50
|
||||
}
|
||||
|
||||
return 0
|
||||
},
|
||||
paxCount() {
|
||||
// subtract number of children from pax for price calculation, but minimum 30 pax
|
||||
return Math.max(this.selectedPax - this.childrenCount, 30)
|
||||
},
|
||||
nightsCount() {
|
||||
return this.selectedRange.length;
|
||||
},
|
||||
forceInquiry() {
|
||||
return 1 === this.selectedRange.length
|
||||
},
|
||||
rangeFormatted() {
|
||||
if (null === this.selectedFrom || null === this.selectedTo) {
|
||||
return '-';
|
||||
}
|
||||
|
||||
return this.selectedFrom.format('DD.MM.YYYY') + ' - ' + this.selectedTo.format('DD.MM.YYYY');
|
||||
},
|
||||
pricePax() {
|
||||
let base = {
|
||||
EUR: 0,
|
||||
CHF: 0,
|
||||
}
|
||||
let additional = {
|
||||
EUR: 0,
|
||||
CHF: 0,
|
||||
}
|
||||
let undersubscription = {
|
||||
EUR: 0,
|
||||
CHF: 0,
|
||||
}
|
||||
for (let date of this.selectedRange) {
|
||||
for (let config of this.configs) {
|
||||
if (date >= dayjs(config.dateFrom) && date < dayjs(config.dateTo)) {
|
||||
base.EUR += config.price.EUR
|
||||
base.CHF += config.price.CHF
|
||||
let included = config.personsIncluded
|
||||
if (this.paxCount > included) {
|
||||
let additionalPax = this.paxCount - included
|
||||
additional.EUR += additionalPax * config.priceAdditionalPerson.EUR
|
||||
additional.CHF += additionalPax * config.priceAdditionalPerson.CHF
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if (false === this.isSelfCatering) {
|
||||
if (this.paxCount < 40) {
|
||||
undersubscription.EUR = this.paxCount * this.undersubscription30Eur * this.selectedRange.length
|
||||
undersubscription.CHF = this.paxCount * this.undersubscription30Chf * this.selectedRange.length
|
||||
} else if (this.paxCount < 50) {
|
||||
undersubscription.EUR = this.paxCount * this.undersubscription40Eur * this.selectedRange.length
|
||||
undersubscription.CHF = this.paxCount * this.undersubscription40Chf * this.selectedRange.length
|
||||
}
|
||||
}
|
||||
|
||||
return {base, additional, undersubscription}
|
||||
},
|
||||
priceOptions() {
|
||||
let price = {
|
||||
EUR: 0,
|
||||
CHF: 0,
|
||||
};
|
||||
for (let option of this.selectedOptions) {
|
||||
let optionPrice = this.calculateOptionPrice(option)
|
||||
price.EUR += optionPrice.EUR;
|
||||
price.CHF += optionPrice.CHF;
|
||||
}
|
||||
return price;
|
||||
},
|
||||
priceBoard() {
|
||||
let price = {
|
||||
EUR: 0,
|
||||
CHF: 0,
|
||||
}
|
||||
if (this.selectedBoard) {
|
||||
price.EUR = this.selectedBoard.price.EUR * this.nightsCount * this.paxCount;
|
||||
price.CHF = this.selectedBoard.price.CHF * this.nightsCount * this.paxCount;
|
||||
}
|
||||
return price
|
||||
},
|
||||
priceShortTerm() {
|
||||
let price = {
|
||||
EUR: 0,
|
||||
CHF: 0,
|
||||
}
|
||||
const totalPricePax = this.pricePax.base.EUR + this.pricePax.additional.EUR;
|
||||
const totalPricePaxCHF = this.pricePax.base.CHF + this.pricePax.additional.CHF;
|
||||
const shorTermFactor = this.shortTermFactors.find(element => element.nights === this.nightsCount);
|
||||
if (undefined !== shorTermFactor) {
|
||||
price.EUR = totalPricePax * shorTermFactor.factor;
|
||||
price.CHF = totalPricePaxCHF * shorTermFactor.factor;
|
||||
}
|
||||
return price
|
||||
},
|
||||
priceRunningCosts() {
|
||||
return {
|
||||
EUR: this.nightsCount * this.selectedPax * this.runningCostsFactorEur,
|
||||
CHF: this.nightsCount * this.selectedPax * this.runningCostsFactorChf,
|
||||
}
|
||||
},
|
||||
priceTotal() {
|
||||
let totalEUR = this.pricePax.base.EUR
|
||||
+ this.pricePax.additional.EUR
|
||||
+ this.pricePax.undersubscription.EUR
|
||||
+ this.priceOptions.EUR
|
||||
+ this.priceBoard.EUR
|
||||
+ this.priceShortTerm.EUR
|
||||
+ this.priceRunningCosts.EUR
|
||||
|
||||
let totalCHF = 0
|
||||
|
||||
// calculate CHF price when pax price in CHF is available since CHF prices may not be provided via CMS yet
|
||||
if (0 < this.pricePax.base.CHF) {
|
||||
totalCHF = this.pricePax.base.CHF
|
||||
+ this.pricePax.additional.CHF
|
||||
+ this.pricePax.undersubscription.CHF
|
||||
+ this.priceOptions.CHF
|
||||
+ this.priceBoard.CHF
|
||||
+ this.priceShortTerm.CHF
|
||||
+ this.priceRunningCosts.CHF
|
||||
}
|
||||
|
||||
|
||||
return {
|
||||
EUR: totalEUR,
|
||||
CHF: totalCHF,
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
Vue.nextTick(() => {
|
||||
this.picker = flatpickr(this.$refs.picker, {
|
||||
mode: 'range',
|
||||
dateFormat: 'd.m.Y',
|
||||
locale: German,
|
||||
onChange: selectedDates => {
|
||||
if (2 === selectedDates.length) {
|
||||
this.selectedFrom = dayjs(selectedDates[0]);
|
||||
this.selectedTo = dayjs(selectedDates[1]);
|
||||
this.updateSelectedRange();
|
||||
}
|
||||
}
|
||||
});
|
||||
this.initSelectableRanges();
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,10 +0,0 @@
|
||||
// Initialize vue app
|
||||
import Vue from 'vue'
|
||||
import vueCustomElement from 'vue-custom-element'
|
||||
import 'document-register-element/build/document-register-element'
|
||||
import GroupsPriceCalculator from './components/GroupsPriceCalculator'
|
||||
|
||||
Vue.use(vueCustomElement)
|
||||
Vue.config.productionTip = false
|
||||
|
||||
Vue.customElement('groups-price-calculator', GroupsPriceCalculator)
|
||||
@@ -3,7 +3,3 @@
|
||||
@apply block w-full h-auto;
|
||||
}
|
||||
|
||||
img.lazyloading {
|
||||
background: url(../../images/lazy.png) no-repeat top center;
|
||||
}
|
||||
|
||||
|
||||
@@ -18,12 +18,12 @@
|
||||
</f:if>
|
||||
<f:if condition="{image}">
|
||||
<f:then>
|
||||
<ep:lazyLoadImage image="{image}"
|
||||
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
|
||||
class="block w-full h-full object-cover"
|
||||
width="400c"
|
||||
height="300c"
|
||||
alt="{city.name}" />
|
||||
<f:image image="{image}"
|
||||
loading="lazy"
|
||||
class="block w-full h-full object-cover"
|
||||
width="400c"
|
||||
height="300c"
|
||||
alt="{city.name}" />
|
||||
</f:then>
|
||||
<f:else>
|
||||
<f:image src="EXT:ep_theme/Resources/Public/images/lazy.png"
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
<html data-namespace-typo3-fluid="true" lang="en"
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
|
||||
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
||||
|
||||
<f:section name="Teaser">
|
||||
@@ -18,12 +17,12 @@
|
||||
</f:if>
|
||||
<f:if condition="{image}">
|
||||
<f:then>
|
||||
<ep:lazyLoadImage image="{image}"
|
||||
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
|
||||
class="block w-full h-full object-cover"
|
||||
width="400c"
|
||||
height="300c"
|
||||
alt="{concept.name}" />
|
||||
<f:image image="{image}"
|
||||
loading="lazy"
|
||||
class="block w-full h-full object-cover"
|
||||
width="400c"
|
||||
height="300c"
|
||||
alt="{concept.name}" />
|
||||
</f:then>
|
||||
<f:else>
|
||||
<f:image src="EXT:ep_theme/Resources/Public/images/lazy.png"
|
||||
|
||||
@@ -13,12 +13,12 @@
|
||||
<div class="col-span-2 md:col-span-1">
|
||||
<div class="relative max-w-md mx-auto mb-8">
|
||||
<f:if condition="{image}">
|
||||
<ep:lazyLoadImage image="{image}"
|
||||
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
|
||||
class="block w-full h-auto rounded-full"
|
||||
width="400"
|
||||
height="400c"
|
||||
alt="{image.alternative}" />
|
||||
<f:image image="{image}"
|
||||
loading="lazy"
|
||||
class="block w-full h-auto rounded-full"
|
||||
width="400"
|
||||
height="400c"
|
||||
alt="{image.alternative}" />
|
||||
</f:if>
|
||||
<a href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}"
|
||||
rel="nofollow"
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
<html data-namespace-typo3-fluid="true" lang="en"
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
|
||||
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
||||
|
||||
<f:alias map="{button: data.flexForm.buttons.0}">
|
||||
@@ -11,11 +10,11 @@
|
||||
<div class="col-md-6">
|
||||
<a href="{f:uri.typolink(parameter: button.container.link)}" title="{button.container.label -> f:format.raw()}">
|
||||
<f:if condition="{image}">
|
||||
<ep:lazyLoadImage image="{image}"
|
||||
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
|
||||
class="block w-full h-auto rounded-full"
|
||||
width="400"
|
||||
alt="{image.alternative}" />
|
||||
<f:image image="{image}"
|
||||
loading="lazy"
|
||||
class="block w-full h-auto rounded-full"
|
||||
width="400"
|
||||
alt="{image.alternative}" />
|
||||
</f:if>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -11,12 +11,12 @@
|
||||
<div class="md:flex md:items-start py-4">
|
||||
<div class="px-16 pb-4 md:px-4 md:pb-0 md:w-1/6">
|
||||
<f:if condition="{image}">
|
||||
<ep:lazyLoadImage image="{image}"
|
||||
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
|
||||
class="block w-full h-auto rounded-full"
|
||||
width="400"
|
||||
height="400c"
|
||||
alt="{image.alternative}" />
|
||||
<f:image image="{image}"
|
||||
loading="lazy"
|
||||
class="block w-full h-auto rounded-full"
|
||||
width="400"
|
||||
height="400c"
|
||||
alt="{image.alternative}" />
|
||||
</f:if>
|
||||
</div>
|
||||
<div class="px-16 md:px-4 md:w-5/6 md:pl-8 text-center text-white md:text-left" data-rte-content>
|
||||
|
||||
@@ -14,12 +14,12 @@
|
||||
<div class="col-span-2 md:col-span-1">
|
||||
<div class="relative max-w-md mx-auto mb-8">
|
||||
<f:if condition="{teaserImage}">
|
||||
<ep:lazyLoadImage image="{teaserImage}"
|
||||
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
|
||||
class="block w-full h-auto rounded-full"
|
||||
width="400"
|
||||
height="400c"
|
||||
alt="{teaserImage.alternative}" />
|
||||
<f:image image="{teaserImage}"
|
||||
loading="lazy"
|
||||
class="block w-full h-auto rounded-full"
|
||||
width="400"
|
||||
height="400c"
|
||||
alt="{teaserImage.alternative}" />
|
||||
</f:if>
|
||||
<a href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}"
|
||||
rel="nofollow"
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
<html data-namespace-typo3-fluid="true" lang="en"
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
|
||||
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
||||
|
||||
<f:alias map="{button: data.flexForm.buttons.0}">
|
||||
@@ -11,11 +10,11 @@
|
||||
<div class="col-md-6">
|
||||
<a href="{f:uri.typolink(parameter: button.container.link)}" title="{button.container.label -> f:format.raw()}">
|
||||
<f:if condition="{teaserImage}">
|
||||
<ep:lazyLoadImage image="{teaserImage}"
|
||||
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
|
||||
class="block w-full h-auto rounded-full"
|
||||
width="400"
|
||||
alt="{teaserImage.alternative}" />
|
||||
<f:image image="{teaserImage}"
|
||||
loading="lazy"
|
||||
class="block w-full h-auto rounded-full"
|
||||
width="400"
|
||||
alt="{teaserImage.alternative}" />
|
||||
</f:if>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -11,12 +11,12 @@
|
||||
<div class="md:flex md:items-start py-4">
|
||||
<div class="px-16 pb-4 md:px-4 md:pb-0 md:w-1/6">
|
||||
<f:if condition="{teaserImage}">
|
||||
<ep:lazyLoadImage image="{teaserImage}"
|
||||
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
|
||||
class="block w-full h-auto rounded-full"
|
||||
width="400"
|
||||
height="400c"
|
||||
alt="{teaserImage.alternative}" />
|
||||
<f:image image="{teaserImage}"
|
||||
loading="lazy"
|
||||
class="block w-full h-auto rounded-full"
|
||||
width="400"
|
||||
height="400c"
|
||||
alt="{teaserImage.alternative}" />
|
||||
</f:if>
|
||||
</div>
|
||||
<div class="px-16 md:px-4 md:w-5/6 md:pl-8 text-center text-white md:text-left" data-rte-content>
|
||||
|
||||
@@ -158,11 +158,11 @@
|
||||
target="_blank"
|
||||
rel="nofollow"
|
||||
title="Global Compact">
|
||||
<ep:lazyLoadImage src="EXT:ep_theme/Resources/Public/images/global_compact.png"
|
||||
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
|
||||
class="block w-full h-auto"
|
||||
width="100"
|
||||
alt="Global Compact" />
|
||||
<f:image src="EXT:ep_theme/Resources/Public/images/global_compact.png"
|
||||
loading="lazy"
|
||||
class="block w-full h-auto"
|
||||
width="100"
|
||||
alt="Global Compact" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -184,8 +184,10 @@
|
||||
<f:format.raw>{totalRatings.jsonData->f:format.json()}</f:format.raw>
|
||||
</script>
|
||||
|
||||
<f:if condition="{site.identifier} == 'ep-reisen'">
|
||||
<f:render partial="Chatbot" arguments="{_all}"/>
|
||||
</f:if>
|
||||
<f:comment><!--
|
||||
<f:if condition="{site.identifier} == 'ep-reisen'">
|
||||
<f:render partial="Chatbot" arguments="{_all}"/>
|
||||
</f:if>
|
||||
--></f:comment>
|
||||
|
||||
</html>
|
||||
|
||||
@@ -9,12 +9,12 @@
|
||||
{ep:icon(icon: 'flag-{hotel.country.code -> f:format.case(mode: \'lower\')}', class: 'w-8 h-6 absolute top-0 left-0')}
|
||||
<f:if condition="{hotel.images.original.0}">
|
||||
<f:then>
|
||||
<ep:lazyLoadImage image="{hotel.images.original.0}"
|
||||
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
|
||||
class="block w-full h-full object-cover"
|
||||
width="400c"
|
||||
height="300c"
|
||||
alt="{hotel.name}" />
|
||||
<f:image image="{hotel.images.original.0}"
|
||||
loading="lazy"
|
||||
class="block w-full h-full object-cover"
|
||||
width="400c"
|
||||
height="300c"
|
||||
alt="{hotel.name}" />
|
||||
</f:then>
|
||||
<f:else>
|
||||
<f:image src="EXT:ep_theme/Resources/Public/images/lazy.png"
|
||||
|
||||
@@ -15,12 +15,12 @@
|
||||
<a href="{f:uri.image(image: image, cropVariant: 'zoom', maxWidth: '2560')}"
|
||||
title="{image.title}"
|
||||
data-action="lightbox#open">
|
||||
<ep:lazyLoadImage image="{image}"
|
||||
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
|
||||
class="block w-full h-auto"
|
||||
width="770"
|
||||
height="430c+100"
|
||||
alt="{image.alternative}"/>
|
||||
<f:image image="{image}"
|
||||
loading="lazy"
|
||||
class="block w-full h-auto"
|
||||
width="770"
|
||||
height="430c+100"
|
||||
alt="{image.alternative}"/>
|
||||
</a>
|
||||
</f:alias>
|
||||
<f:if condition="{thumbnails}">
|
||||
@@ -35,12 +35,12 @@
|
||||
data-lightbox-caption="{image.originalResource.description}"
|
||||
title="{image.title}"
|
||||
class="block">
|
||||
<ep:lazyLoadImage image="{image}"
|
||||
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
|
||||
class="block w-full h-auto"
|
||||
width="150"
|
||||
height="85c+100"
|
||||
alt="{image.alternative}"/>
|
||||
<f:image image="{image}"
|
||||
loading="lazy"
|
||||
class="block w-full h-auto"
|
||||
width="150"
|
||||
height="85c+100"
|
||||
alt="{image.alternative}"/>
|
||||
</a>
|
||||
</f:if>
|
||||
</f:for>
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
<html data-namespace-typo3-fluid="true" lang="en"
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
|
||||
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
||||
|
||||
<div class="odd:bg-zinc-50 p-4" data-rte-content>
|
||||
@@ -18,12 +17,12 @@
|
||||
</h3>
|
||||
{journey.byCar -> f:format.html()}
|
||||
<f:if condition="{journey.image}">
|
||||
<ep:lazyLoadImage image="{journey.image}"
|
||||
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
|
||||
class="block w-full h-auto"
|
||||
width="770"
|
||||
height="430c+100"
|
||||
alt="{journey.image.alternative}" />
|
||||
<f:image image="{journey.image}"
|
||||
loading="lazy"
|
||||
class="block w-full h-auto"
|
||||
width="770"
|
||||
height="430c+100"
|
||||
alt="{journey.image.alternative}" />
|
||||
</f:if>
|
||||
</f:if>
|
||||
</div>
|
||||
|
||||
@@ -10,8 +10,9 @@
|
||||
<f:then>
|
||||
<f:if condition="{newsItem.mediaPreviews.0}">
|
||||
<f:alias map="{mediaElement: '{newsItem.mediaPreviews.0}'}">
|
||||
<img class="block w-full h-auto lazyload"
|
||||
data-src="{f:uri.image(image: mediaElement, width: '640', height: '360c+50')}"
|
||||
<img class="block w-full h-auto"
|
||||
src="{f:uri.image(image: mediaElement, width: '640', height: '360c+50')}"
|
||||
loading="lazy"
|
||||
alt="{mediaElement.originalResource.alternative}">
|
||||
</f:alias>
|
||||
</f:if>
|
||||
@@ -19,8 +20,9 @@
|
||||
<f:else>
|
||||
<f:if condition="{newsItem.media}">
|
||||
<f:alias map="{mediaElement: '{newsItem.media.0}'}">
|
||||
<img class="block w-full h-auto lazyload"
|
||||
data-src="{f:uri.image(image: mediaElement, width: '640', height: '360c+50')}"
|
||||
<img class="block w-full h-auto"
|
||||
src="{f:uri.image(image: mediaElement, width: '640', height: '360c+50')}"
|
||||
loading="lazy"
|
||||
alt="{mediaElement.originalResource.alternative}">
|
||||
</f:alias>
|
||||
</f:if>
|
||||
|
||||
@@ -8,11 +8,11 @@
|
||||
</div>
|
||||
<div class="col-span-1">
|
||||
<f:if condition="{officetip.author.image}">
|
||||
<ep:lazyLoadImage image="{officetip.author.image}"
|
||||
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
|
||||
class="block w-full h-auto"
|
||||
width="120"
|
||||
alt="{officetip.author.name}" />
|
||||
<f:image image="{officetip.author.image}"
|
||||
loading="lazy"
|
||||
class="block w-full h-auto"
|
||||
width="120"
|
||||
alt="{officetip.author.name}" />
|
||||
</f:if>
|
||||
</div>
|
||||
<div class="col-span-2">
|
||||
|
||||
@@ -16,19 +16,19 @@
|
||||
<div class="relative{f:if(condition: landscape, then: ' sm:w-2/5')}">
|
||||
<f:if condition="{productImage}">
|
||||
<f:then>
|
||||
<ep:lazyLoadImage image="{productImage}"
|
||||
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
|
||||
class="block w-full h-full object-cover"
|
||||
width="400c"
|
||||
height="300c"
|
||||
alt="{product.name}" />
|
||||
<f:image image="{productImage}"
|
||||
loading="lazy"
|
||||
class="block w-full h-full object-cover"
|
||||
width="400c"
|
||||
height="300c"
|
||||
alt="{product.name}" />
|
||||
</f:then>
|
||||
<f:else>
|
||||
<f:image src="EXT:ep_theme/Resources/Public/images/lazy.png"
|
||||
class="block w-full h-full object-cover"
|
||||
width="400c"
|
||||
height="300c"
|
||||
alt="{product.name}" />
|
||||
class="block w-full h-full object-cover"
|
||||
width="400c"
|
||||
height="300c"
|
||||
alt="{product.name}" />
|
||||
</f:else>
|
||||
</f:if>
|
||||
<div class="absolute top-0 left-0 z-20 inset-x-0 p-2 flex justify-between items-center {f:if(condition: concept, then: 'bg-concept-{concept.code}/70', else: 'bg-ep-primary/80')}">
|
||||
|
||||
@@ -18,12 +18,12 @@
|
||||
</f:if>
|
||||
<f:if condition="{image}">
|
||||
<f:then>
|
||||
<ep:lazyLoadImage image="{image}"
|
||||
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
|
||||
class="block w-full h-full object-cover"
|
||||
width="400c"
|
||||
height="300c"
|
||||
alt="{region.name}" />
|
||||
<f:image image="{image}"
|
||||
loading="lazy"
|
||||
class="block w-full h-full object-cover"
|
||||
width="400c"
|
||||
height="300c"
|
||||
alt="{region.name}" />
|
||||
</f:then>
|
||||
<f:else>
|
||||
<f:image src="EXT:ep_theme/Resources/Public/images/lazy.png"
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
<html data-namespace-typo3-fluid="true" lang="en"
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
|
||||
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
||||
|
||||
<f:if condition="{region.webcam.available}">
|
||||
@@ -13,11 +12,11 @@
|
||||
data-action="lightbox#open"
|
||||
data-lightbox-caption="Webcam {region.name}"
|
||||
title="Webcam {region.name}">
|
||||
<ep:lazyLoadImage src="{region.webcam.url}"
|
||||
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
|
||||
class="block w-full h-auto"
|
||||
width="330"
|
||||
alt="Webcam {region.name}" />
|
||||
<f:image src="{region.webcam.url}"
|
||||
loading="lazy"
|
||||
class="block w-full h-auto"
|
||||
width="330"
|
||||
alt="Webcam {region.name}" />
|
||||
</a>
|
||||
</div>
|
||||
</f:if>
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
<html data-namespace-typo3-fluid="true" lang="en"
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
|
||||
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
||||
|
||||
<f:if condition="{region.regionMaps}">
|
||||
@@ -17,11 +16,11 @@
|
||||
data-lightbox-index="{iteration.cycle}"
|
||||
data-lightbox-caption="Pistenplan {region.name}"
|
||||
title="Pistenplan {region.name}">
|
||||
<ep:lazyLoadImage image="{regionMap}"
|
||||
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
|
||||
class="block w-full h-auto"
|
||||
width="330"
|
||||
alt="{regionMap.alternative}"/>
|
||||
<f:image image="{regionMap}"
|
||||
loading="lazy"
|
||||
class="block w-full h-auto"
|
||||
width="330"
|
||||
alt="{regionMap.alternative}"/>
|
||||
</a>
|
||||
</f:for>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
<html data-namespace-typo3-fluid="true" lang="en"
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
|
||||
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
|
||||
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
||||
|
||||
@@ -11,11 +10,11 @@
|
||||
Teamer vor Ort
|
||||
</p>
|
||||
<f:if condition="{teamerInCharge.image}">
|
||||
<ep:lazyLoadImage image="{teamerInCharge.image}"
|
||||
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
|
||||
class="block w-full h-auto mb-4"
|
||||
width="330"
|
||||
alt="{teamerInCharge.name}"/>
|
||||
<f:image image="{teamerInCharge.image}"
|
||||
loading="lazy"
|
||||
class="block w-full h-auto mb-4"
|
||||
width="330"
|
||||
alt="{teamerInCharge.name}"/>
|
||||
</f:if>
|
||||
<p>{teamerInCharge.name}</p>
|
||||
</div>
|
||||
|
||||
@@ -9,12 +9,12 @@
|
||||
<f:if condition="{context.country}">
|
||||
{ep:icon(icon: 'flag-{context.country.code -> f:format.case(mode: \'lower\')}', class: 'w-8 h-6 absolute top-0 left-0')}
|
||||
</f:if>
|
||||
<ep:lazyLoadImage image="{teaserImage}"
|
||||
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
|
||||
class="block w-full h-full object-cover"
|
||||
width="400c"
|
||||
height="300c"
|
||||
alt="{teaserImage.alternative}" />
|
||||
<f:image image="{teaserImage}"
|
||||
loading="lazy"
|
||||
class="block w-full h-full object-cover"
|
||||
width="400c"
|
||||
height="300c"
|
||||
alt="{teaserImage.alternative}" />
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col pt-4 bg-white border border-t-0 border-zinc-200">
|
||||
<a href="{f:uri.typolink(parameter: data.header_link)}" class="px-2 peer headline--3 mb-2 no-underline">
|
||||
|
||||
@@ -1,62 +1,61 @@
|
||||
<html data-namespace-typo3-fluid="true" lang="en"
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
|
||||
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
||||
|
||||
<f:if condition="{image.uid}">
|
||||
<f:then>
|
||||
<picture>
|
||||
<source media="(min-width: 1201px)" data-srcset="{f:uri.image(
|
||||
<source media="(min-width: 1201px)" srcset="{f:uri.image(
|
||||
image: image, width: '370', height: '220c-100'
|
||||
)} 370w"/>
|
||||
<source media="(max-width: 1200px)" data-srcset="{f:uri.image(
|
||||
<source media="(max-width: 1200px)" srcset="{f:uri.image(
|
||||
image: image, width: '320', height: '160c-100'
|
||||
)} 320w"/>
|
||||
<source media="(max-width: 991px)" data-srcset="{f:uri.image(
|
||||
<source media="(max-width: 991px)" srcset="{f:uri.image(
|
||||
image: image, width: '360', height: '200c-100'
|
||||
)} 360w"/>
|
||||
<source media="(max-width: 768px)" data-srcset="{f:uri.image(
|
||||
<source media="(max-width: 768px)" srcset="{f:uri.image(
|
||||
image: image, width: '500', height: '250c-100'
|
||||
)} 500w"/>
|
||||
<source media="(max-width: 512px)" data-srcset="{f:uri.image(
|
||||
<source media="(max-width: 512px)" srcset="{f:uri.image(
|
||||
image: image, width: '350', height: '175c-100'
|
||||
)} 350w"/>
|
||||
<ep:lazyLoadImage image="{image}"
|
||||
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
|
||||
class="block w-full h-auto"
|
||||
width="500"
|
||||
height="250c-100"
|
||||
alt="{image.alternative}" />
|
||||
<f:image image="{image}"
|
||||
loading="lazy"
|
||||
class="block w-full h-auto"
|
||||
width="500"
|
||||
height="250c-100"
|
||||
alt="{image.alternative}" />
|
||||
</picture>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<picture>
|
||||
<source media="(min-width: 1201px)" data-srcset="{f:uri.image(
|
||||
<source media="(min-width: 1201px)" srcset="{f:uri.image(
|
||||
src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
|
||||
width: '370', height: '220c-100'
|
||||
)} 370w"/>
|
||||
<source media="(max-width: 1200px)" data-srcset="{f:uri.image(
|
||||
<source media="(max-width: 1200px)" srcset="{f:uri.image(
|
||||
src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
|
||||
width: '320', height: '160c-100'
|
||||
)} 420w"/>
|
||||
<source media="(max-width: 991px)" data-srcset="{f:uri.image(
|
||||
)} 320w"/>
|
||||
<source media="(max-width: 991px)" srcset="{f:uri.image(
|
||||
src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
|
||||
width: '360', height: '200c-100'
|
||||
)} 360w"/>
|
||||
<source media="(max-width: 768px)" data-srcset="{f:uri.image(
|
||||
<source media="(max-width: 768px)" srcset="{f:uri.image(
|
||||
src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
|
||||
width: '500', height: '250c-100'
|
||||
)} 500w"/>
|
||||
<source media="(max-width: 512px)" data-srcset="{f:uri.image(
|
||||
<source media="(max-width: 512px)" srcset="{f:uri.image(
|
||||
src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
|
||||
width: '350', height: '175c-100'
|
||||
)} 320w"/>
|
||||
<ep:lazyLoadImage src="EXT:ep_theme/Resources/Public/images/header-winter.jpg"
|
||||
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
|
||||
class="block w-full h-auto"
|
||||
width="360"
|
||||
height="270c-100"
|
||||
alt="" />
|
||||
)} 350w"/>
|
||||
<f:image src="EXT:ep_theme/Resources/Public/images/header-winter.jpg"
|
||||
loading="lazy"
|
||||
class="block w-full h-auto"
|
||||
width="360"
|
||||
height="270c-100"
|
||||
alt="" />
|
||||
</picture>
|
||||
</f:else>
|
||||
</f:if>
|
||||
|
||||
@@ -1,25 +1,27 @@
|
||||
<f:if condition="{image}">
|
||||
<f:then>
|
||||
<picture class="product-teaser__image">
|
||||
<source media="(min-width: 1201px)" data-srcset="{f:uri.image(
|
||||
<source media="(min-width: 1201px)" srcset="{f:uri.image(
|
||||
image: image, width: '320', height: '200c-100'
|
||||
)} 320w"/>
|
||||
<source media="(max-width: 1200px)" data-srcset="{f:uri.image(
|
||||
<source media="(max-width: 1200px)" srcset="{f:uri.image(
|
||||
image: image, width: '220', height: '130c-100'
|
||||
)} 220w"/>
|
||||
<source media="(max-width: 991px)" data-srcset="{f:uri.image(
|
||||
<source media="(max-width: 991px)" srcset="{f:uri.image(
|
||||
image: image, width: '260', height: '220c-100'
|
||||
)} 260w"/>
|
||||
<source media="(max-width: 768px)" data-srcset="{f:uri.image(
|
||||
<source media="(max-width: 768px)" srcset="{f:uri.image(
|
||||
image: image, width: '320', height: '140c-100'
|
||||
)} 320w"/>
|
||||
<img class="scale lazyload" alt="{image.alternative}"
|
||||
src="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/lazy.png', width: '260', height: '160')}"
|
||||
data-src="{f:uri.image(image: image, width: '260', height: '160c-100')}"
|
||||
<img class="scale" alt="{image.alternative}"
|
||||
src="{f:uri.image(image: image, width: '260', height: '160c-100')}"
|
||||
loading="lazy"
|
||||
>
|
||||
</picture>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<img class="scale" data-src="https://placehold.it/400x300" alt="">
|
||||
<img class="scale" alt=""
|
||||
src="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/lazy.png', width: '260', height: '160')}"
|
||||
loading="lazy">
|
||||
</f:else>
|
||||
</f:if>
|
||||
|
||||
@@ -7,8 +7,9 @@
|
||||
{data.bodytext -> f:format.html()}
|
||||
<f:if condition="{files}">
|
||||
<f:link.typolink parameter="{files.0.link}" title="{files.0.originalResource.title}">
|
||||
<img class="img-responsive lazyload"
|
||||
data-src="{f:uri.image(image: files.0, maxWidth: '770')}"
|
||||
<img class="img-responsive"
|
||||
src="{f:uri.image(image: files.0, maxWidth: '770')}"
|
||||
loading="lazy"
|
||||
alt="{files.0.originalResource.alternative}">
|
||||
</f:link.typolink>
|
||||
</f:if>
|
||||
|
||||
+6
-7
@@ -1,7 +1,6 @@
|
||||
<html data-namespace-typo3-fluid="true" lang="en"
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
|
||||
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
|
||||
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
||||
|
||||
<f:section name="Content">
|
||||
@@ -25,12 +24,12 @@
|
||||
<f:section name="Image">
|
||||
<div class="{cssClasses}">
|
||||
<f:link.typolink parameter="{image.link}">
|
||||
<ep:lazyLoadImage image="{image}"
|
||||
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
|
||||
class="block w-full h-auto"
|
||||
width="400c"
|
||||
height="400"
|
||||
alt="{image.alternative}" />
|
||||
<f:image image="{image}"
|
||||
loading="lazy"
|
||||
class="block w-full h-auto"
|
||||
width="400c"
|
||||
height="400"
|
||||
alt="{image.alternative}" />
|
||||
</f:link.typolink>
|
||||
</div>
|
||||
</f:section>
|
||||
|
||||
+5
-6
@@ -10,12 +10,11 @@
|
||||
<f:for each="{items}" as="item" iteration="iteration">
|
||||
<div class="lg:flex odd:flex-row-reverse justify-between items-end mb-16">
|
||||
<div class="mb-4 lg:mb-0 lg:w-1/2">
|
||||
<ep:lazyLoadImage image="{item.image.0}"
|
||||
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
|
||||
class="block w-full h-auto"
|
||||
width="768"
|
||||
alt="{item.data.name}"
|
||||
title="{item.data.name}" />
|
||||
<f:image image="{item.image.0}"
|
||||
loading="lazy"
|
||||
class="block w-full h-auto"
|
||||
width="768"
|
||||
alt="{item.data.name}"/>
|
||||
</div>
|
||||
<div class="lg:w-1/2">
|
||||
<div class="px-4 {f:if(condition: iteration.isEven, then: 'lg:pl-12', else: 'lg:pr-12')}">
|
||||
|
||||
+6
-7
@@ -1,6 +1,5 @@
|
||||
<html data-namespace-typo3-fluid="true" lang="en"
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
|
||||
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
||||
|
||||
<f:layout name="Bare"/>
|
||||
@@ -12,12 +11,12 @@
|
||||
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-flag-{country.code -> f:format.case(mode: 'lower')}"></use>
|
||||
</svg>
|
||||
<f:if condition="{country.teaserImages}">
|
||||
<ep:lazyLoadImage image="{country.teaserImages.0}"
|
||||
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
|
||||
class="block w-full h-full object-cover"
|
||||
width="400c"
|
||||
height="300c"
|
||||
alt="{country.name}" />
|
||||
<f:image image="{country.teaserImages.0}"
|
||||
loading="lazy"
|
||||
class="block w-full h-full object-cover"
|
||||
width="400c"
|
||||
height="300c"
|
||||
alt="{country.name}" />
|
||||
</f:if>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col pt-4 bg-white border border-t-0 border-zinc-200">
|
||||
|
||||
@@ -182,12 +182,11 @@
|
||||
title="360°-Rundgang {hotel.name}">
|
||||
<f:if condition="{product.tourThumbnail}">
|
||||
<f:then>
|
||||
<ep:lazyLoadImage image="{product.tourThumbnail}"
|
||||
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
|
||||
class="block w-full h-auto"
|
||||
width="330"
|
||||
alt="360°-Rundgang {hotel.name}"
|
||||
title="360°-Rundgang {hotel.name}"/>
|
||||
<f:image image="{product.tourThumbnail}"
|
||||
loading="lazy"
|
||||
class="block w-full h-auto"
|
||||
width="330"
|
||||
alt="360°-Rundgang {hotel.name}"/>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<div class="button bg-button w-full">
|
||||
@@ -335,11 +334,11 @@
|
||||
data-lightbox-caption="{image.originalResource.description}"
|
||||
data-action="lightbox#open"
|
||||
class="{f:if(condition: iteration.isFirst, then: 'col-span-4')}">
|
||||
<ep:lazyLoadImage image="{image}"
|
||||
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
|
||||
class="block w-full h-auto"
|
||||
width="{f:if(condition: iteration.isFirst, then: '400', else: '160')}"
|
||||
height="{f:if(condition: iteration.isFirst, then: '225c+100', else: '160c+100')}"/>
|
||||
<f:image image="{image}"
|
||||
loading="lazy"
|
||||
class="block w-full h-auto"
|
||||
width="{f:if(condition: iteration.isFirst, then: '400', else: '160')}"
|
||||
height="{f:if(condition: iteration.isFirst, then: '225c+100', else: '160c+100')}"/>
|
||||
</a>
|
||||
</f:for>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
<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"/>
|
||||
@@ -28,13 +27,12 @@
|
||||
arguments: '{member: member}'
|
||||
)}">
|
||||
<f:if condition="{member.image}">
|
||||
<ep:lazyLoadImage image="{member.image}"
|
||||
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
|
||||
class="block w-full h-auto rounded-full"
|
||||
width="400"
|
||||
height="400c"
|
||||
alt="{member.name}"
|
||||
title="{member.name}" />
|
||||
<f:image image="{member.image}"
|
||||
loading="lazy"
|
||||
class="block w-full h-auto rounded-full"
|
||||
width="400"
|
||||
height="400c"
|
||||
alt="{member.name}"/>
|
||||
</f:if>
|
||||
<div class="text-center text-zinc-800 pt-2">
|
||||
<span class="block font-bold text-xl">
|
||||
|
||||
@@ -9,7 +9,6 @@ Encore
|
||||
.setOutputPath('./public/typo3conf/ext/ep_theme/Resources/Public/')
|
||||
.setPublicPath('/typo3conf/ext/ep_theme/Resources/Public/')
|
||||
.addEntry('main', './public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/main.js')
|
||||
.addEntry('groups-calculator', './public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/groups-calculator.js')
|
||||
.addStyleEntry('rte', './public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/rte.scss')
|
||||
.splitEntryChunks()
|
||||
.enableSingleRuntimeChunk()
|
||||
|
||||
Reference in New Issue
Block a user