EP/website-typo3
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement dynamic backlink, remove session storage

Browse Source
This commit is contained in:
Björn Fromme
2019-09-08 13:12:23 +02:00
parent ea2a777de7
commit e828aea169
10 changed files with 82 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js
+2 -2
View File
@@ -30,8 +30,8 @@ import ContactForm from './components/ContactForm.vue'
import WatchlistToggle from './components/WatchlistToggle.vue'
import Watchlist from './components/Watchlist.vue'
import HotelList from './components/HotelList.vue'
import ReferrerLink from './components/ReferrerLink.vue'
import FacebookPixel from './components/FacebookPixel.vue'
import BackLink from './components/BackLink.vue'
// Define global constants
const $window = $(window);
@@ -64,7 +64,7 @@ new Vue({
WatchlistToggle,
Watchlist,
HotelList,
ReferrerLink,
BackLink,
MyEp: () => import('./myep/components/App.vue'),
FacebookPixel
},
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/BackLink.vue
+31
View File
@@ -0,0 +1,31 @@
<template>
<div class="ep-backlink" v-if="referringUrl" v-cloak>
<a :href="referringUrl" class="button button--small">{{ label }}</a>
</div>
</template>
<script>
export default {
name: 'BackLink',
data () {
return {
referringUrl: null,
}
},
computed: {
label () {
if (this.referringUrl.match(/suche/)) {
return 'zurück zum Suchergebnis'
}
return 'zurück'
}
},
mounted () {
const urlParams = new URLSearchParams(location.search);
if (urlParams.has('ref')) {
this.referringUrl = urlParams.get('ref');
}
}
}
</script>
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/HotelList.vue
+1 -3
View File
@@ -1,13 +1,11 @@
<script>
import WatchlistToggle from './WatchlistToggle.vue'
import ReferrerLink from './ReferrerLink.vue'
import defaultFilterSettings from '../_filtersettings'
export default {
components: {
WatchlistToggle,
ReferrerLink
WatchlistToggle
},
props: {
referringPageUrl: {
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/ProductDetail.vue
+3 -1
View File
@@ -14,6 +14,7 @@
import FacebookPixel from './FacebookPixel.vue'
import WatchlistToggle from './WatchlistToggle.vue'
import OsmMap from './OsmMap.vue'
import BackLink from "./BackLink.vue";
import dayjs from 'dayjs'
import 'dayjs/locale/de'
@@ -29,7 +30,8 @@
Calendar,
FacebookPixel,
WatchlistToggle,
OsmMap
OsmMap,
BackLink
},
data () {
return {
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/ReferrerLink.vue
-28
View File
@@ -1,28 +0,0 @@
<template>
<a @click="storeReferringPage()">
<slot></slot>
</a>
</template>
<script>
export default {
props: {
referringPage: {
type: Object,
default () {
return {
url: null,
label: null
}
}
}
},
methods: {
storeReferringPage () {
if (this.referringPage.url && this.referringPage.label) {
sessionStorage.setItem('referringPage', JSON.stringify(this.referringPage))
}
}
}
}
</script>
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/SearchResult.vue
-3
View File
@@ -204,14 +204,11 @@
},
updateFilterSettings (settings) {
this.filterSettings = { ...this.filterSettings, ...settings };
sessionStorage.setItem('filterSettings', JSON.stringify(this.filterSettings));
}
},
created () {
if (!$.isEmptyObject(this.initialFilterSettings)) {
this.updateFilterSettings(this.initialFilterSettings)
} else if (sessionStorage.getItem('filterSettings')) {
this.updateFilterSettings(JSON.parse(sessionStorage.getItem('filterSettings')))
}
},
mounted () {
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/SearchResultItem.vue
+14 -21
View File
@@ -2,8 +2,7 @@
<div class="teaserbox teaserbox--landscape teaserbox--searchresult searchresult-item">
<div class="teaserbox__image">
<img class="teaserbox__flag" :src="item.country.flag" :alt="item.country.name"/>
<referrer-link :href="item.detailPageUri" :referring-page="referringPage"
rel="nofollow" title="Details &amp; Buchen">
<a :href="getUrl()" rel="nofollow" title="Details &amp; 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'"/>
@@ -12,7 +11,7 @@
:title="item.hotel.images.resized.s[0].title"
:alt="item.hotel.images.resized.s[0].alt">
</picture>
</referrer-link>
</a>
<div class="concept-badge" :id="section.concept.code"
:class=" 'concept-badge--' + section.concept.code">{{ section.concept.name }}</div>
</div>
@@ -45,21 +44,21 @@
<div class="teaserbox__aside__top">
<span class="searchresult-item__label">{{ item.dates.length > 1 ? 'Zeitraum' : 'Termin' }}</span>
<span class="searchresult-item__daterange">{{ dateRange }}</span>
<referrer-link :href="item.detailPageUri" :referring-page="referringPage"
rel="nofollow" title="Details &amp; Buchen" v-if="item.dates.length && !item.daytrip">
<a :href="getUrl()" rel="nofollow" title="Details &amp; Buchen"
v-if="item.dates.length && !item.daytrip">
<span class="searchresult-item__daterange">
<i class="fa fa-arrow-circle-right"></i> {{ item.dates.length }} Termin{{ item.dates.length > 1 ? 'e' : '' }}
</span>
</referrer-link>
</a>
<hr>
<span class="searchresult-item__label">{{ item.daytrip ? 'Tageweise buchbar' : nightsOptions }}</span>
</div>
<div class="teaserbox__aside__bottom">
<span class="searchresult-item__price">ab {{ item.minPrice }} €</span>
<referrer-link :href="item.detailPageUri" :referring-page="referringPage"
class="button button--full searchresult-item__button" rel="nofollow" title="Details &amp; Buchen">
<a :href="getUrl()" class="button button--full searchresult-item__button"
rel="nofollow" title="Details &amp; Buchen">
Details &amp; Buchen
</referrer-link>
</a>
</div>
</div>
<watchlist-toggle :uid="item.key" class="teaserbox-watchlist"></watchlist-toggle>
@@ -70,12 +69,10 @@
import dayjs from 'dayjs'
import 'dayjs/locale/de'
import WatchlistToggle from './WatchlistToggle.vue'
import ReferrerLink from './ReferrerLink.vue'
export default {
components: {
WatchlistToggle,
ReferrerLink
WatchlistToggle
},
props: {
item: {
@@ -85,15 +82,11 @@
section: {
type: Object,
required: true
},
referringPage: {
type: Object,
default () {
return {
url: null,
label: null
}
}
}
},
methods: {
getUrl () {
return this.item.detailPageUri + '?ref=' + window.location.pathname;
}
},
computed: {
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/TeaserWide.html
+30 -13
View File
@@ -10,10 +10,13 @@
<img class="teaserbox__flag"
src="{item.country.flag}"
alt="{item.country.name}"/>
<referrer-link href="{f:uri.action(pageUid: detailPage, action: 'detail', controller: 'Product', arguments: '{product: product.uid, hotel: item.hotel.uid}')}"
:referring-page="{ url: referringPageUrl, label: 'zurück' }" rel="nofollow">
<f:link.action action="detail" controller="Product"
pageUid="{detailPage}"
arguments="{product: product.uid, hotel: item.hotel.uid}"
additionalParams="{ref: '{f:uri.page()}'}"
>
<f:render section="Image" arguments="{_all}"/>
</referrer-link>
</f:link.action>
<f:if condition="{product.concept.code}">
<div class="concept-badge concept-badge--{product.concept.code}">{product.concept.name}</div>
</f:if>
@@ -70,32 +73,46 @@
<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()} > 1">
<referrer-link href="{f:uri.action(pageUid: detailPage, action: 'detail', controller: 'Product', arguments: '{product: product.uid, hotel: item.hotel.uid}')}"
:referring-page="{ url: referringPageUrl, label: 'zurück' }" rel="nofollow">
<f:link.action action="detail" controller="Product"
pageUid="{detailPage}"
arguments="{product: product.uid, hotel: item.hotel.uid}"
additionalParams="{ref: '{f:uri.page()}'}"
additionalAttributes="{rel: 'nofollow'}"
>
<span class="searchresult-item__daterange">
<i class="fa fa-arrow-circle-right"></i> {item.dates -> f:count()} Termin{f:if(condition: '{item.dates -> f:count()} > 1', then: 'e')}
</span>
</referrer-link>
</f:link.action>
</f:if>
<hr>
<span class="searchresult-item__label">{ep:nightsOptions(options: item.nights)}</span>
</div>
<div class="teaserbox__aside__bottom">
<span class="searchresult-item__price">ab {item.minPrice} €</span>
<referrer-link href="{f:uri.action(pageUid: detailPage, action: 'detail', controller: 'Product', arguments: '{product: product.uid, hotel: item.hotel.uid}')}"
:referring-page="{ url: referringPageUrl, label: 'zurück' }"
class="button button--full searchresult-item__button" rel="nofollow">
<f:link.action action="detail" controller="Product"
pageUid="{detailPage}"
arguments="{product: product.uid, hotel: item.hotel.uid}"
additionalParams="{ref: '{f:uri.page()}'}"
additionalAttributes="{rel: 'nofollow'}"
class="button button--full searchresult-item__button"
>
Details &amp; Buchen
</referrer-link>
</f:link.action>
</div>
</f:then>
<f:else>
<div class="teaserbox__aside__top">&nbsp;</div>
<div class="teaserbox__aside__bottom">
<span class="searchresult-item__price">ausgebucht</span>
<referrer-link href="{f:uri.action(pageUid: detailPage, action: 'detail', controller: 'Product', arguments: '{product: product.uid, hotel: item.hotel.uid}')}"
:referring-page="{ url: referringPageUrl, label: 'zurück' }"
class="button button--full searchresult-item__button" rel="nofollow">Details</referrer-link>
<f:link.action action="detail" controller="Product"
pageUid="{detailPage}"
arguments="{product: product.uid, hotel: item.hotel.uid}"
additionalParams="{ref: '{f:uri.page()}'}"
additionalAttributes="{rel: 'nofollow'}"
class="button button--full searchresult-item__button"
>
Details
</f:link.action>
</div>
</f:else>
</f:if>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/HeaderDetail.html
+1 -3
View File
@@ -60,8 +60,6 @@
</f:link.typolink>
</f:if>
</div>
<div class="ep-backlink" v-if="referringPage" v-cloak>
<a :href="referringPage.url" class="button button--small">{{ referringPage.label }}</a>
</div>
<back-link></back-link>
{v:render.template(file: 'EXT:ep_theme/Resources/Private/Partials/Breadcrumb.html')}
</div>