Load content directly, remove ajax calls
This commit is contained in:
Björn Fromme
+11
-14
@@ -39,7 +39,7 @@
|
||||
priceTableShow: false,
|
||||
detailShow: false,
|
||||
loading: true,
|
||||
activeUri: null,
|
||||
activeSection: null,
|
||||
singleDate: false
|
||||
}
|
||||
},
|
||||
@@ -79,7 +79,7 @@
|
||||
},
|
||||
loadDatesView () {
|
||||
this.loadDates();
|
||||
this.activeUri = 'dates';
|
||||
this.activeSection = 'dates';
|
||||
this.scrollToMain();
|
||||
},
|
||||
loadPriceTable (dateUid) {
|
||||
@@ -103,21 +103,18 @@
|
||||
this.loadPriceTable(dateuid);
|
||||
this.scrollToMain();
|
||||
},
|
||||
loadHtml (uri, scroll = true) {
|
||||
this.loading = true;
|
||||
showHtml (section, scroll = true) {
|
||||
this.datesShow = false;
|
||||
this.priceTableShow = false;
|
||||
this.detailShow = true;
|
||||
const ajaxUri = this.uris[uri];
|
||||
$.get(ajaxUri, (html) => {
|
||||
this.detailHtml = html;
|
||||
this.loading = false;
|
||||
if (scroll) {
|
||||
this.scrollToMain();
|
||||
}
|
||||
EventBus.$emit('ajaxContentLoaded');
|
||||
if (scroll) {
|
||||
this.scrollToMain();
|
||||
}
|
||||
this.activeSection = section;
|
||||
// 'Wake up' Slick slider after changing visibility
|
||||
Vue.nextTick(() => {
|
||||
$('.slider--content > .slider__items').slick('setPosition');
|
||||
});
|
||||
this.activeUri = uri;
|
||||
},
|
||||
scrollToMain () {
|
||||
EventBus.$emit('scrollTo', '#main');
|
||||
@@ -134,7 +131,7 @@
|
||||
mounted () {
|
||||
Vue.nextTick(() => {
|
||||
if (this.hotelFirst) {
|
||||
this.loadHtml('hotel', false);
|
||||
this.showHtml('hotel', false);
|
||||
} else {
|
||||
this.loadDatesView();
|
||||
}
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
<f:if condition="{bars}">
|
||||
<div class="ep-headbar">Anreise</div>
|
||||
</f:if>
|
||||
<h2>Eigenanreise</h2>
|
||||
{journey.byCar -> f:format.html()}
|
||||
<f:if condition="{journey.image}">
|
||||
<img src="{f:uri.image(src: journey.image.uid, treatIdAsReference: 1, crop: journey.image.crop, width: '770', height: '430c+100')}"
|
||||
alt="{journey.image.alternative}" title="{journey.image.title}">
|
||||
</f:if>
|
||||
<f:if condition="{journey.byBus}">
|
||||
<h2>Busanreise</h2>
|
||||
{journey.byBus -> f:format.html()}
|
||||
</f:if>
|
||||
@@ -1,12 +0,0 @@
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"
|
||||
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">
|
||||
<f:render partial="City/Details" arguments="{city: city, bars: 1}"/>
|
||||
</f:section>
|
||||
|
||||
</html>
|
||||
@@ -1,12 +0,0 @@
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"
|
||||
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">
|
||||
<f:render partial="Hotel/Details" arguments="{hotel: hotel, bars: 1, showNonBookableHint: 0}"/>
|
||||
</f:section>
|
||||
|
||||
</html>
|
||||
@@ -1,22 +0,0 @@
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"
|
||||
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">
|
||||
<div class="ep-headbar">Anreise</div>
|
||||
<h2>Eigenanreise</h2>
|
||||
{journey.byCar -> f:format.html()}
|
||||
<f:if condition="{journey.image}">
|
||||
<img src="{f:uri.image(src: journey.image.uid, treatIdAsReference: 1, crop: journey.image.crop, width: '770', height: '430c+100')}"
|
||||
alt="{journey.image.alternative}" title="{journey.image.title}">
|
||||
</f:if>
|
||||
<f:if condition="{journey.byBus}">
|
||||
<h2>Busanreise</h2>
|
||||
{journey.byBus -> f:format.html()}
|
||||
</f:if>
|
||||
</f:section>
|
||||
|
||||
</html>
|
||||
@@ -1,12 +0,0 @@
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"
|
||||
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">
|
||||
<f:render partial="Region/Details" arguments="{region: region, bars: 1}"/>
|
||||
</f:section>
|
||||
|
||||
</html>
|
||||
@@ -14,11 +14,7 @@
|
||||
:filter-settings='<v:format.json.encode>{filterSettings}</v:format.json.encode>'
|
||||
:uris='{
|
||||
dates: "<f:format.raw>{ep:uri.ajax(action: 'dates', controller: 'AjaxDate', arguments: '{product: product, hotel: hotel}', format: 'json', noCacheHash: 1)}</f:format.raw>",
|
||||
pricetable: "<f:format.raw>{ep:uri.ajax(action: 'pricetable', controller: 'AjaxTable', arguments: '{product: product, hotel: hotel}', format: 'json', noCacheHash: 1)}</f:format.raw>",
|
||||
hotel: "<f:format.raw>{ep:uri.ajax(action: 'hotel', controller: 'AjaxContent', arguments: '{hotel: hotel}', format: 'html')}</f:format.raw>",
|
||||
region: "<f:format.raw>{ep:uri.ajax(action: 'region', controller: 'AjaxContent', arguments: '{region: product.region}', format: 'html')}</f:format.raw>",
|
||||
city: "<f:format.raw>{ep:uri.ajax(action: 'city', controller: 'AjaxContent', arguments: '{city: product.city}', format: 'html')}</f:format.raw>",
|
||||
journey: "<f:format.raw>{ep:uri.ajax(action: 'journey', controller: 'AjaxContent', arguments: '{journey: product.journey}', format: 'html')}</f:format.raw>"
|
||||
pricetable: "<f:format.raw>{ep:uri.ajax(action: 'pricetable', controller: 'AjaxTable', arguments: '{product: product, hotel: hotel}', format: 'json', noCacheHash: 1)}</f:format.raw>"
|
||||
}'
|
||||
argument-prefix='<ep:argumentPrefix pluginName="Ajax" />'
|
||||
:hotel-first="{f:if(condition: settings.hotelOnTop, then: 'true', else: 'false')}"
|
||||
@@ -37,12 +33,12 @@
|
||||
<f:if condition="{settings.hotelOnTop}">
|
||||
<f:then>
|
||||
<button class="button button--light button--sidebar"
|
||||
v-bind:class="{ 'button--active': activeUri === 'hotel'}"
|
||||
v-on:click.prevent="loadHtml('hotel')">Unterkunft</button>
|
||||
v-bind:class="{ 'button--active': activeSection === 'hotel'}"
|
||||
v-on:click.prevent="showHtml('hotel')">Unterkunft</button>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<button class="button button--light button--sidebar"
|
||||
v-bind:class="{ 'button--active': activeUri === 'dates'}"
|
||||
v-bind:class="{ 'button--active': activeSection === 'dates'}"
|
||||
v-on:click.prevent="loadDatesView()">Termine/Preise</button>
|
||||
</f:else>
|
||||
</f:if>
|
||||
@@ -53,27 +49,27 @@
|
||||
<f:if condition="{settings.hotelOnTop}">
|
||||
<f:then>
|
||||
<button class="button button--light button--sidebar"
|
||||
v-bind:class="{ 'button--active': activeUri === 'dates'}"
|
||||
v-bind:class="{ 'button--active': activeSection === 'dates'}"
|
||||
v-on:click.prevent="loadDatesView()">Termine/Preise</button>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<button class="button button--light button--sidebar"
|
||||
v-bind:class="{ 'button--active': activeUri === 'hotel'}"
|
||||
v-on:click.prevent="loadHtml('hotel')">Unterkunft</button>
|
||||
v-bind:class="{ 'button--active': activeSection === 'hotel'}"
|
||||
v-on:click.prevent="showHtml('hotel')">Unterkunft</button>
|
||||
</f:else>
|
||||
</f:if>
|
||||
<button class="button button--light button--sidebar"
|
||||
v-bind:class="{ 'button--active': activeUri === 'region'}"
|
||||
v-on:click.prevent="loadHtml('region')">Gebiet</button>
|
||||
v-bind:class="{ 'button--active': activeSection === 'region'}"
|
||||
v-on:click.prevent="showHtml('region')">Gebiet</button>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-12">
|
||||
<button class="button button--light button--sidebar"
|
||||
v-bind:class="{ 'button--active': activeUri === 'city'}"
|
||||
v-on:click.prevent="loadHtml('city')">Ort</button>
|
||||
v-bind:class="{ 'button--active': activeSection === 'city'}"
|
||||
v-on:click.prevent="showHtml('city')">Ort</button>
|
||||
<f:if condition="{product.journey}">
|
||||
<button class="button button--light button--sidebar"
|
||||
v-bind:class="{ 'button--active': activeUri === 'journey'}"
|
||||
v-on:click.prevent="loadHtml('journey')">Anreise</button>
|
||||
v-bind:class="{ 'button--active': activeSection === 'journey'}"
|
||||
v-on:click.prevent="showHtml('journey')">Anreise</button>
|
||||
</f:if>
|
||||
</div>
|
||||
</div>
|
||||
@@ -113,6 +109,7 @@
|
||||
</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'">
|
||||
@@ -146,12 +143,36 @@
|
||||
</f:if>
|
||||
<f:render partial="Product/Details" arguments="{_all}"/>
|
||||
</div>
|
||||
<!-- /Dates -->
|
||||
<!-- Prices -->
|
||||
<div v-cloak v-show="!loading && priceTableShow">
|
||||
<price-table :price-table-rows="priceTableRows" :services-included="servicesIncluded" :date-label="dateLabel" :single-date="singleDate"></price-table>
|
||||
<f:render partial="Product/Details" arguments="{_all}"/>
|
||||
</div>
|
||||
<div v-cloak v-show="!loading && detailShow" v-html="detailHtml"></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}"/>
|
||||
@@ -169,7 +190,7 @@
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<ajax-content uri="{ep:uri.ajax(action: 'webcam', controller: 'AjaxContent', arguments: '{region: product.region}', format: 'html')}"></ajax-content>
|
||||
<f:render partial="Region/Webcam" arguments="{region: region}"/>
|
||||
<f:render partial="RegionMaps" arguments="{region: product.region}"/>
|
||||
<f:render partial="RegionAward" arguments="{region: product.region}"/>
|
||||
<f:if condition="{product.banner}">
|
||||
|
||||
Reference in New Issue
Block a user