Implement dynamic backlink, remove session storage

public/typo3conf/ext/ep_products/Classes/Controller/ProductController.php

@@ -173,7 +173,6 @@ class ProductController extends ActionController
         $this->view->assignMultiple([
             'hotels' => $hotels,
             'product' => $product,
-            'currentPageUid' => $GLOBALS['TSFE']->id,
             'linkHotel' => true,
         ]);
     }

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js

@@ -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

@@ -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,13 +1,11 @@
 <script>
     import WatchlistToggle from './WatchlistToggle.vue'
-    import ReferrerLink from './ReferrerLink.vue'
 
     import defaultFilterSettings from '../_filtersettings'
 
     export default {
         components: {
-            WatchlistToggle,
+            WatchlistToggle
-            ReferrerLink
         },
         props: {
             referringPageUrl: {

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/ProductDetail.vue

@@ -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

@@ -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

@@ -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

@@ -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"
+            <a :href="getUrl()" rel="nofollow" title="Details &amp; Buchen">
-                           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"
+                <a :href="getUrl()" rel="nofollow" title="Details &amp; Buchen"
-                               rel="nofollow" title="Details &amp; Buchen" v-if="item.dates.length && !item.daytrip">
+                   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"
+                <a :href="getUrl()" class="button button--full searchresult-item__button"
-                               class="button button--full searchresult-item__button" rel="nofollow" title="Details &amp; Buchen">
+                   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,
+            WatchlistToggle
-            ReferrerLink
         },
         props: {
             item: {
@@ -85,15 +82,11 @@
             section: {
                 type: Object,
                 required: true
-            },
+            }
-            referringPage: {
+        },
-                type: Object,
+        methods: {
-                default () {
+            getUrl () {
-                    return {
+                return this.item.detailPageUri + '?ref=' + window.location.pathname;
-                        url: null,
-                        label: null
-                    }
-                }
             }
         },
         computed: {

public/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/TeaserWide.html

@@ -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}')}"
+                <f:link.action action="detail" controller="Product"
-                               :referring-page="{ url: referringPageUrl, label: 'zurück' }" rel="nofollow">
+                               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}')}"
+                                <f:link.action action="detail" controller="Product"
-                                               :referring-page="{ url: referringPageUrl, label: 'zurück' }" rel="nofollow">
+                                               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}')}"
+                            <f:link.action action="detail" controller="Product"
-                                           :referring-page="{ url: referringPageUrl, label: 'zurück' }"
+                                           pageUid="{detailPage}"
-                                           class="button button--full searchresult-item__button" rel="nofollow">
+                                           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}')}"
+                            <f:link.action action="detail" controller="Product"
-                                           :referring-page="{ url: referringPageUrl, label: 'zurück' }"
+                                           pageUid="{detailPage}"
-                                           class="button button--full searchresult-item__button" rel="nofollow">Details</referrer-link>
+                                           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

@@ -60,8 +60,6 @@
             </f:link.typolink>
         </f:if>
     </div>
-    <div class="ep-backlink" v-if="referringPage" v-cloak>
+    <back-link></back-link>
-        <a :href="referringPage.url" class="button button--small">{{ referringPage.label }}</a>
-    </div>
     {v:render.template(file: 'EXT:ep_theme/Resources/Private/Partials/Breadcrumb.html')}
 </div>