Load content directly, remove ajax calls
This commit is contained in:
Björn Fromme
@@ -1,108 +0,0 @@
|
||||
<?php
|
||||
|
||||
namespace EP\EpProducts\Controller;
|
||||
|
||||
/***************************************************************
|
||||
*
|
||||
* Copyright notice
|
||||
*
|
||||
* (c) 2016 Björn Fromme <[email protected]>, dreipunktnull
|
||||
*
|
||||
* All rights reserved
|
||||
*
|
||||
* This script is part of the TYPO3 project. The TYPO3 project is
|
||||
* free software; you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation; either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* The GNU General Public License can be found at
|
||||
* http://www.gnu.org/copyleft/gpl.html.
|
||||
*
|
||||
* This script is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
* This copyright notice MUST APPEAR in all copies of the script!
|
||||
***************************************************************/
|
||||
|
||||
use EP\EpProducts\Domain\Model\City;
|
||||
use EP\EpProducts\Domain\Model\Country;
|
||||
use EP\EpProducts\Domain\Model\Hotel;
|
||||
use EP\EpProducts\Domain\Model\Journey;
|
||||
use EP\EpProducts\Domain\Model\Product;
|
||||
use EP\EpProducts\Domain\Model\Region;
|
||||
use TYPO3\CMS\Extbase\Mvc\Controller\ActionController;
|
||||
|
||||
class AjaxContentController extends ActionController
|
||||
{
|
||||
|
||||
/**
|
||||
* @param Product $product
|
||||
* @param Hotel $hotel
|
||||
* @param integer $referringPageUid
|
||||
*/
|
||||
public function productAction(Product $product, Hotel $hotel = null, $referringPageUid = null)
|
||||
{
|
||||
$this->view->assignMultiple([
|
||||
'hotel' => $hotel,
|
||||
'product' => $product,
|
||||
'referringPageUid' => $referringPageUid,
|
||||
]);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param Hotel $hotel
|
||||
*/
|
||||
public function hotelAction(Hotel $hotel)
|
||||
{
|
||||
$this->view->assign('hotel', $hotel);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param Country $country
|
||||
*/
|
||||
public function countryAction(Country $country)
|
||||
{
|
||||
$this->view->assign('country', $country);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param Region $region
|
||||
*/
|
||||
public function regionAction(Region $region)
|
||||
{
|
||||
$this->view->assign('region', $region);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param City $city
|
||||
*/
|
||||
public function cityAction(City $city)
|
||||
{
|
||||
$this->view->assign('city', $city);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param Journey $journey
|
||||
*/
|
||||
public function journeyAction(Journey $journey)
|
||||
{
|
||||
$this->view->assign('journey', $journey);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param Region $region
|
||||
*/
|
||||
public function webcamAction(Region $region)
|
||||
{
|
||||
$webcam = $region->getWebcam();
|
||||
$available = ($webcam !== null && $webcam->getAvailable());
|
||||
$this->view->assignMultiple([
|
||||
'region' => $region,
|
||||
'webcam' => $webcam,
|
||||
'available' => $available,
|
||||
]);
|
||||
}
|
||||
}
|
||||
@@ -392,6 +392,15 @@ class Region extends AbstractDestination implements TeaserInterface
|
||||
return $this->webcam;
|
||||
}
|
||||
|
||||
/**
|
||||
* @return bool
|
||||
*/
|
||||
public function getWebcamAvailable()
|
||||
{
|
||||
$webcam = $this->getWebcam();
|
||||
return $webcam !== null && $webcam->getAvailable();
|
||||
}
|
||||
|
||||
/**
|
||||
* @param Webcam $webcam
|
||||
*/
|
||||
|
||||
@@ -110,15 +110,6 @@ tx_epproducts_ajax_json {
|
||||
AjaxFilterpanel {
|
||||
1 = autocomplete
|
||||
}
|
||||
AjaxContent {
|
||||
1 = country
|
||||
2 = region
|
||||
3 = city
|
||||
4 = hotel
|
||||
5 = product
|
||||
6 = journey
|
||||
7 = webcam
|
||||
}
|
||||
AjaxTable {
|
||||
1 = pricetable
|
||||
2 = pricetableHtml
|
||||
|
||||
+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