Implement watchlist

composer.json

@@ -61,13 +61,13 @@
     "typo3-ter/sourceopt": "^1.0",
     "typo3-ter/html-compress": "^1.1",
     "typo3-ter/imageoptimizer": "^1.0",
-    "typo3-ter/loginlimit": "^1.0",
     "doctrine/dbal": "^2.5",
     "yohang/calendr": "^2.1",
     "wyrihaximus/html-compress": "^1.4",
     "symfony/property-access": "^3.4",
     "symfony/options-resolver": "^3.4",
-    "symfony/serializer": "^3.3"
+    "symfony/serializer": "^3.3",
+    "league/csv": "^8.2"
   },
   "scripts": {
     "typo3-cms-scripts": [

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "f02741f6bee387f8f2b8ec67b91ef940",
+    "content-hash": "b82dc74c08630a468c17439fc8b67cb3",
     "packages": [
         {
             "name": "cogpowered/finediff",
@@ -939,6 +939,63 @@
             ],
             "time": "2014-06-03T12:02:11+00:00"
         },
+        {
+            "name": "league/csv",
+            "version": "8.2.3",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/thephpleague/csv.git",
+                "reference": "d2aab1e7bde802582c3879acf03d92716577c76d"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/thephpleague/csv/zipball/d2aab1e7bde802582c3879acf03d92716577c76d",
+                "reference": "d2aab1e7bde802582c3879acf03d92716577c76d",
+                "shasum": ""
+            },
+            "require": {
+                "ext-mbstring": "*",
+                "php": ">=5.5.0"
+            },
+            "require-dev": {
+                "friendsofphp/php-cs-fixer": "^1.9",
+                "phpunit/phpunit": "^4.0"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "8.2-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "League\\Csv\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Ignace Nyamagana Butera",
+                    "email": "[email protected]",
+                    "homepage": "https://github.com/nyamsprod/",
+                    "role": "Developer"
+                }
+            ],
+            "description": "Csv data manipulation made easy in PHP",
+            "homepage": "http://csv.thephpleague.com",
+            "keywords": [
+                "csv",
+                "export",
+                "filter",
+                "import",
+                "read",
+                "write"
+            ],
+            "time": "2018-02-06T08:27:03+00:00"
+        },
         {
             "name": "linkorb/jsmin-php",
             "version": "1.0.0",
@@ -2421,7 +2478,6 @@
                 }
             ],
             "description": "This extension integrates the grid layout concept also to regular content elements - the grid elements.\r\nIt offers a lot of new features like advanced drag & drop or real references, that improve the usability of the page and list module to speed up the daily work with the backend.",
-            "homepage": "https://extensions.typo3.org/extension/gridelements/",
             "time": "2017-12-23T18:15:17+00:00"
         },
         {
@@ -2455,7 +2511,6 @@
                 }
             ],
             "description": "Compress/minify your HTML output",
-            "homepage": "https://extensions.typo3.org/extension/html_compress/",
             "time": "2016-12-26T10:19:02+00:00"
         },
         {
@@ -2492,39 +2547,6 @@
             "abandoned": "christophlehmann/imageoptimizer",
             "time": "2018-08-20T23:03:56+00:00"
         },
-        {
-            "name": "typo3-ter/loginlimit",
-            "version": "1.0.3",
-            "dist": {
-                "type": "zip",
-                "url": "https://extensions.typo3.org/extension/download/loginlimit/1.0.3/zip/",
-                "reference": null,
-                "shasum": null
-            },
-            "require": {
-                "typo3/cms-core": ">= 6.2.0, <= 8.7.99"
-            },
-            "replace": {
-                "loginlimit": "self.version"
-            },
-            "type": "typo3-cms-extension",
-            "autoload": {
-                "psr-4": {
-                    "WebentwicklerAt\\Loginlimit\\": "Classes/"
-                }
-            },
-            "authors": [
-                {
-                    "name": "Gernot Leitgab",
-                    "email": "",
-                    "company": "Webentwickler.at",
-                    "username": "royalknight"
-                }
-            ],
-            "description": "Protect backend and/or frontend login against brute-force attacks.",
-            "homepage": "https://extensions.typo3.org/extension/loginlimit/",
-            "time": "2017-09-23T10:40:00+00:00"
-        },
         {
             "name": "typo3-ter/media",
             "version": "4.5.0",
@@ -2559,7 +2581,6 @@
                 }
             ],
             "description": "Media management system for TYPO3 CMS.",
-            "homepage": "https://extensions.typo3.org/extension/media/",
             "time": "2017-11-02T13:08:04+00:00"
         },
         {
@@ -2593,7 +2614,6 @@
                 }
             ],
             "description": "Search Engine Optimization (SEO), Indexed Google-Sitemap (TXT- and XML-Sitemap) for all Extensions (pibase, extbase), Metatags, Canonical-URL, Pagetitle manipulations, Crawler verification, Piwik and Google Analytics support and some more... multi-language- and multi-tree-support",
-            "homepage": "https://extensions.typo3.org/extension/metaseo/",
             "time": "2017-06-11T18:32:55+00:00"
         },
         {
@@ -2633,7 +2653,6 @@
                 }
             ],
             "description": "Simply manage (permanent 301) redirects in the list view. The extension supports multidomain sites, count the redirect usage and shows the last referer. UPDATE! imports the records from realurl.",
-            "homepage": "https://extensions.typo3.org/extension/ods_redirects/",
             "time": "2017-05-22T22:07:45+00:00"
         },
         {
@@ -2667,7 +2686,6 @@
                 }
             ],
             "description": "Provides API for Backend modules to get a proper path to the Frontend page (simulateStatic/RealURL/CoolURI-like)",
-            "homepage": "https://extensions.typo3.org/extension/pagepath/",
             "time": "2017-02-15T15:40:25+00:00"
         },
         {
@@ -2704,7 +2722,6 @@
                     "username": "plusb"
                 }
             ],
-            "homepage": "https://extensions.typo3.org/extension/pb_social/",
             "time": "2018-02-14T11:05:37+00:00"
         },
         {
@@ -2738,7 +2755,6 @@
                 }
             ],
             "description": "Optimization of the final page: reformatting the (x)html output, removal of new lines, and quotes. Move development repository to https://github.com/lochmueller/sourceopt",
-            "homepage": "https://extensions.typo3.org/extension/sourceopt/",
             "time": "2017-06-15T17:25:53+00:00"
         },
         {

web/typo3conf/ext/ep_products/Classes/Controller/AjaxWatchlistController.php

@@ -0,0 +1,117 @@
+<?php
+
+namespace EP\EpProducts\Controller;
+
+/***************************************************************
+ *
+ *  Copyright notice
+ *
+ *  (c) 2018 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\Repository\ProductRepository;
+use EP\EpProducts\Service\FilterService;
+use EP\EpProducts\Service\SearchResultService;
+use EP\EpProducts\Service\SearchResultUrlService;
+use TYPO3\CMS\Core\Utility\GeneralUtility;
+use TYPO3\CMS\Extbase\Mvc\Controller\ActionController;
+
+class AjaxWatchlistController extends ActionController
+{
+
+    /**
+     * @var ProductRepository
+     */
+    protected $productRepository;
+
+    /**
+     * @var SearchResultService
+     */
+    protected $searchResultService;
+
+    /**
+     * @var SearchResultUrlService
+     */
+    protected $searchResultUrlService;
+
+    /**
+     * @var FilterService
+     */
+    protected $filterService;
+
+    /**
+     * @param ProductRepository $productRepository
+     * @param SearchResultService $searchResultService
+     * @param SearchResultUrlService $searchResultUrlService
+     * @param FilterService $filterService
+     */
+    public function __construct
+    (
+        ProductRepository $productRepository,
+        SearchResultService $searchResultService,
+        SearchResultUrlService $searchResultUrlService,
+        FilterService $filterService
+    )
+    {
+        parent::__construct();
+
+        $this->productRepository = $productRepository;
+        $this->searchResultService = $searchResultService;
+        $this->searchResultUrlService = $searchResultUrlService;
+        $this->filterService = $filterService;
+    }
+
+    /**
+     * @param array $watchlistUids
+     * @param string $referringPageUid
+     * @return string
+     */
+    public function listAction(array $watchlistUids, $referringPageUid)
+    {
+        $productUids = array_map(function ($uid) {
+            list (, $productUid) = GeneralUtility::trimExplode(':', $uid);
+            return $productUid;
+        }, $watchlistUids);
+
+        $hotelUids = array_map(function ($uid) {
+            list ($hotelUid,) = GeneralUtility::trimExplode(':', $uid);
+            return $hotelUid;
+        }, $watchlistUids);
+
+        $watchlistData = $this->productRepository->getWatchlist($productUids, $hotelUids);
+        $watchlist = $this->searchResultService->preprocess($watchlistData);
+
+        $forcedConceptUid = (int) $this->settings['forcedConceptUid'];
+        $filterSettings = $this->filterService->getDefaultFilterSettings($forcedConceptUid);
+
+        $options = [
+            'defaultDetailPageUid' => $this->settings['defaultDetailPageUid'],
+            'referringPageUid' => $referringPageUid,
+            'filterSettings' => $filterSettings,
+        ];
+        $this->searchResultUrlService->process($watchlist, $options);
+
+        return json_encode([
+            'data' => $watchlist->getData(),
+            'total' => $watchlist->getTotal()
+        ]);
+    }
+}

web/typo3conf/ext/ep_products/Classes/Controller/WatchlistController.php

@@ -0,0 +1,40 @@
+<?php
+
+namespace EP\EpProducts\Controller;
+
+/***************************************************************
+ *
+ *  Copyright notice
+ *
+ *  (c) 2018 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 TYPO3\CMS\Extbase\Mvc\Controller\ActionController;
+
+class WatchlistController extends ActionController
+{
+
+    public function listAction()
+    {
+        $this->view->assign('referringPageUid', $GLOBALS['TSFE']->id);
+    }
+
+}

web/typo3conf/ext/ep_products/Classes/Domain/Repository/ProductRepository.php

@@ -36,6 +36,44 @@ use EP\EpProducts\Utility\DbUtility;
 
 class ProductRepository extends AbstractRepository
 {
+    /**
+     * @param array $productUids
+     * @param array $hotelUids
+     * @return array
+     */
+    public function getWatchlist(array $productUids, array $hotelUids)
+    {
+        $qb = DbUtility::getDbConnection()->createQueryBuilder();
+
+        $query = $qb
+            ->select(
+                'date.concept conceptUid', 'date.concept_name conceptName', 'date.concept_code conceptCode',
+                'date.product productUid', 'date.product_name productName', 'date.product_detail_page productDetailPage',
+                'date.product_feature productFeature',
+                'date.country countryUid','date.country_name countryName', 'date.country_code countryCode',
+                'date.region regionUid', 'date.region_name regionName', 'date.region_feature regionFeature',
+                'date.date_start dateStart', 'date.date_end dateEnd',
+                'date.hotel hotelUid', 'date.hotel_name hotelName', 'date.hotel_category hotelCategory',
+                'date.earlybird earlybird', 'date.low_contingent lowContingent', 'date.board board',
+                'date.product_fact productFact', 'date.hotel_fact hotelFact', 'date.region_fact regionFact',
+                'date.services_included servicesIncluded', 'date.min_price minPrice', 'date.nights nights',
+                'date.available available', 'date.pseudo_price pseudoPrice'
+            )
+            ->from('tx_epproducts_domain_model_date', 'date')
+            ->where('date.product IN (:productUids)')
+            ->andWhere('date.hotel IN (:hotelUids)')
+            ->andWhere('date.product_searchable = 1')
+            ->orderBy('date.concept_sorting')
+            ->addOrderBy('date.product_name')
+            ->addOrderBy('date.min_price')
+            ->addOrderBy('date.date_start')
+            ->addOrderBy('date.hotel_name')
+            ->setParameter('productUids', $productUids, Connection::PARAM_INT_ARRAY)
+            ->setParameter('hotelUids', $hotelUids, Connection::PARAM_INT_ARRAY)
+        ;
+
+        return $query->execute()->fetchAll();
+    }
 
     /**
      * @param FilterSettings $filterSettings

web/typo3conf/ext/ep_products/Classes/Service/ProductService.php

@@ -183,7 +183,11 @@ class ProductService implements SingletonInterface
         $hotelCategory = array_key_exists($teaserData['hotelCategory'], Hotel::$categoryLabels) ?
             Hotel::$categoryLabels[$teaserData['hotelCategory']] : null;
 
+        // Use compound key, hotel is not unique
+        $key = $teaserData['hotelUid'] . ':' . $teaserData['productUid'];
+
         return [
+            'key' => $key,
             'minDateStart' => null,
             'maxDateEnd' => null,
             'minPrice' => null,

web/typo3conf/ext/ep_products/Configuration/TypoScript/setup.txt

@@ -127,6 +127,9 @@ tx_epproducts_ajax_json {
             AjaxCalendar {
                 1 = range
             }
+            AjaxWatchlist {
+                1 = list
+            }
         }
 
         settings =< plugin.tx_epproducts.settings

web/typo3conf/ext/ep_products/ext_localconf.php

@@ -308,6 +308,17 @@ $GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['scheduler']['tasks'][\EP\EpProducts\T
     ]
 );
 
+\TYPO3\CMS\Extbase\Utility\ExtensionUtility::configurePlugin(
+    'EP.' . $_EXTKEY,
+    'watchlist',
+    [
+        'Watchlist' => 'list',
+    ],
+    [
+        'Watchlist' => '',
+    ]
+);
+
 \TYPO3\CMS\Extbase\Utility\ExtensionUtility::configurePlugin(
     'EP.' . $_EXTKEY,
     'ajax',
@@ -319,6 +330,7 @@ $GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['scheduler']['tasks'][\EP\EpProducts\T
         'AjaxContent' => 'country,region,city,hotel,product,journey,webcam',
         'AjaxTable' => 'pricetable,pricetableHtml,eventPricetable',
         'AjaxCalendar' => 'range',
+        'AjaxWatchlist' => 'list',
     ],
     [
         'AjaxSearch' => 'searchresult',
@@ -328,6 +340,7 @@ $GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['scheduler']['tasks'][\EP\EpProducts\T
         'AjaxContent' => 'webcam',
         'AjaxTable' => 'pricetable,pricetableHtml,eventPricetable',
         'AjaxCalendar' => 'range',
+        'AjaxWatchlist' => 'list',
     ]
 );
 

web/typo3conf/ext/ep_products/ext_tables.php

@@ -143,6 +143,12 @@ if (!defined('TYPO3_MODE')) {
     'Vertriebspartner Export'
 );
 
+\TYPO3\CMS\Extbase\Utility\ExtensionUtility::registerPlugin(
+    'EP.' . $_EXTKEY,
+    'watchlist',
+    'Merkliste'
+);
+
 $extensionName = strtolower(\TYPO3\CMS\Core\Utility\GeneralUtility::underscoredToUpperCamelCase($_EXTKEY));
 
 $pluginSignature = str_replace('_', '', $_EXTKEY) . '_product_detail';

web/typo3conf/ext/ep_theme/Configuration/TypoScript/constants.txt

@@ -43,6 +43,8 @@ plugin.tx_eptheme {
 		groupsContactFormPageUid =
 		# cat=eptheme/200/250; type=string; label=Rating page UID
 		ratingPageUid =
+		# cat=eptheme/200/260; type=string; label=Watchlist page UID
+		watchlistPageUid =
 
 		# cat=eptheme/400/100; type=string; label=Phone number general
 		phoneNumber = 0221 - 272 276 0

web/typo3conf/ext/ep_theme/Configuration/TypoScript/setup.txt

@@ -81,6 +81,7 @@ plugin.tx_eptheme {
         groupsContactFormPageUid = {$plugin.tx_eptheme.settings.groupsContactFormPageUid}
         blogDetailPageUid = {$plugin.tx_eptheme.settings.blogDetailPageUid}
         ratingPageUid = {$plugin.tx_eptheme.settings.ratingPageUid}
+        watchlistPageUid = {$plugin.tx_eptheme.settings.watchlistPageUid}
     }
     view {
         templateRootPaths.0 = EXT:ep_theme/Resources/Private/Templates

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/app.js

@@ -25,6 +25,7 @@ require('../images/favicon_uch.ico');
 
 // Import dependencies
 import Vue from 'vue'
+import VueSession from 'vue-session'
 import $ from 'jquery'
 import dayjs from 'dayjs'
 import 'dayjs/locale/de'
@@ -49,6 +50,8 @@ import Gmap from './components/Gmap.vue'
 import Calendar from './components/Calendar.vue'
 import EventPricetable from './components/EventPriceTable.vue'
 import ContactForm from './components/ContactForm.vue'
+import WatchlistToggle from './components/WatchlistToggle.vue'
+import Watchlist from './components/Watchlist.vue'
 
 // Define global constants
 const $window = $(window);
@@ -56,6 +59,9 @@ const sliderPrevArrow = '<button class="slider-pagination__arrow slider-paginati
 const sliderNextArrow = '<button class="slider-pagination__arrow slider-pagination__arrow--next"><i class="fa fa-2x fa-chevron-right"></i></button>';
 const sliderDot = '<button class="slider-pagination__dot" data-role="none" role="button" tabindex="0" />';
 
+// Enable session handling
+Vue.use(VueSession);
+
 // Define date filter for vue templates
 Vue.filter('date', (value) => {
     return dayjs(value).format('DD.MM.YYYY');
@@ -73,7 +79,9 @@ new Vue({
         Gmap,
         Calendar,
         EventPricetable,
-        ContactForm
+        ContactForm,
+        WatchlistToggle,
+        Watchlist
     },
     data () {
         return {
@@ -85,6 +93,12 @@ new Vue({
             searchbarFixed: false,
             mobileMode: false,
             backgroundImageMode: 'mobile',
+            watchlist: []
+        }
+    },
+    computed: {
+        watchlistCount () {
+            return this.watchlist.length;
         }
     },
     methods: {
@@ -366,6 +380,25 @@ new Vue({
         EventBus.$on('scrollTo', (anchorId, offset) => {
             this.scrollTo(anchorId, offset);
         });
+        EventBus.$on('watchlistToggle', uid => {
+            let list = this.watchlist;
+            let watchlistIndex = list.indexOf(uid);
+            if (watchlistIndex === -1) {
+                list.push(uid)
+            } else {
+                list.splice(watchlistIndex, 1)
+            }
+            this.watchlist = list;
+            this.$session.set('watchlist', this.watchlist);
+
+        });
+        if (!this.$session.exists()) {
+            this.$session.start();
+        }
+        if (!this.$session.has('watchlist')) {
+            this.$session.set('watchlist', []);
+        }
+        this.watchlist = this.$session.get('watchlist');
     },
     mounted () {
         Vue.nextTick(() => {

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/SearchResult.vue

@@ -73,6 +73,12 @@
                 default () {
                     return {};
                 }
+            },
+            watchlist: {
+                type: Array,
+                default () {
+                    return [];
+                }
             }
         },
         computed: {
@@ -133,7 +139,6 @@
                     this.loading = false;
                     EventBus.$emit('ajaxContentLoaded');
                 });
-
             },
             resetFilterSettings () {
                 this.filterSettings = this.defaultFilterSettings;

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/SearchResultItem.vue

@@ -59,14 +59,19 @@
                 </a>
             </div>
         </div>
+        <watchlist-toggle :uid="item.key" :watchlist="watchlist" class="teaserbox-watchlist"></watchlist-toggle>
     </div>
 </template>
 
 <script>
     import dayjs from 'dayjs'
     import 'dayjs/locale/de'
+    import WatchlistToggle from './WatchlistToggle.vue'
 
     export default {
+        components: {
+            WatchlistToggle
+        },
         props: {
             item: {
                 type: Object,
@@ -75,6 +80,12 @@
             section: {
                 type: Object,
                 required: true
+            },
+            watchlist: {
+                type: Array,
+                default () {
+                    return [];
+                }
             }
         },
         computed: {

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/Watchlist.vue

@@ -0,0 +1,88 @@
+<template>
+    <div class="watchlist">
+        <template v-for="section in teasers">
+            <h2 class="headline headline--secondary headline--underlined">{{ section.concept.name }}</h2>
+            <div class="searchresult-section" v-bind:class="'searchresult-section--' + section.concept.code">
+                <search-result-item
+                        v-for="item in section.items"
+                        v-bind:key="item.key"
+                        v-bind:item="item"
+                        v-bind:section="section"
+                        v-bind:watchlist="watchlist"></search-result-item>
+            </div>
+        </template>
+        <div class="alert alert-info" v-if="total === 0">
+            Deine Merkliste ist aktuell leer...
+        </div>
+        <div v-show="loading" class="loader">
+            <img :src="loaderUri" alt="Loading...">
+        </div>
+    </div>
+</template>
+
+<script>
+    import Vue from 'vue'
+    import EventBus from '../bus'
+    import SearchResultItem from './SearchResultItem.vue'
+
+    export default {
+        components: {
+            SearchResultItem
+        },
+        props: {
+            watchlistUri: {
+                type: String,
+                required: true
+            },
+            loaderUri: {
+                type: String,
+                required: true
+            },
+            referringPageUid: {
+                type: Number,
+                required: true
+            },
+            watchlist: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            }
+        },
+        data () {
+            return {
+                teasers: {},
+                total: 0
+            }
+        },
+        methods: {
+            loadList () {
+                if (this.watchlist.length === 0) {
+                    this.teasers = {};
+                    this.total = 0;
+                    return;
+                }
+                let query = {};
+                query['tx_epproducts_ajax[watchlistUids]'] = this.watchlist;
+                query['tx_epproducts_ajax[referringPageUid]'] = this.referringPageUid;
+                this.loading = true;
+                $.post(this.watchlistUri, query, (json) => {
+                    this.teasers = json.data;
+                    this.total = json.total;
+                    this.loading = false;
+                    EventBus.$emit('ajaxContentLoaded');
+                });
+            }
+        },
+        created () {
+            EventBus.$on('watchlistToggle', () => {
+                this.loadList();
+            });
+        },
+        mounted () {
+            Vue.nextTick(() => {
+                this.loadList();
+            })
+        }
+    }
+</script>

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/WatchlistToggle.vue

@@ -0,0 +1,37 @@
+<template>
+    <span v-on:click.prevent="toggleWatchlist()">
+        <template v-if="onWatchlist">
+            <i class="fa fa-minus tooltiptoggle" data-placement="auto" title="Merkliste"></i>
+        </template>
+        <template v-else>
+            <i class="fa fa-plus tooltiptoggle" data-placement="auto" title="Merkliste"></i>
+        </template>
+    </span>
+</template>
+
+<script>
+    import EventBus from '../bus'
+
+    export default {
+        props: {
+            uid: {
+                type: String,
+                required: true
+            },
+            watchlist: {
+                type: Array,
+                required: true
+            }
+        },
+        methods: {
+            toggleWatchlist () {
+                EventBus.$emit('watchlistToggle', this.uid);
+            }
+        },
+        computed: {
+            onWatchlist () {
+                return this.watchlist.indexOf(this.uid) !== -1;
+            }
+        }
+    }
+</script>

web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss

@@ -36,8 +36,8 @@ $output-bourbon-deprecation-warnings: false;
 @import "remix/forms";
 @import "remix/contactnav";
 @import "remix/faq";
-
 @import "remix/destination-pulldown";
+@import "remix/watchlist";
 
 // core config
 @import "variables";

web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main_boarderweek.scss

@@ -33,6 +33,7 @@ $output-bourbon-deprecation-warnings: false;
 @import "remix/socialmedia";
 @import "remix/contactnav";
 @import "remix/faq";
+@import "remix/watchlist";
 
 // core config
 @import "variables";

web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main_snowzone.scss

@@ -33,6 +33,7 @@ $output-bourbon-deprecation-warnings: false;
 @import "remix/socialmedia";
 @import "remix/contactnav";
 @import "remix/faq";
+@import "remix/watchlist";
 
 // core config
 @import "variables";

web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main_unichamp.scss

@@ -33,6 +33,7 @@ $output-bourbon-deprecation-warnings: false;
 @import "remix/socialmedia";
 @import "remix/contactnav";
 @import "remix/faq";
+@import "remix/watchlist";
 
 // core config
 @import "variables";

web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/remix/_contactnav.scss

@@ -108,6 +108,9 @@
       &.youtube {
         top: 176px;
       }
+      &.watchlist {
+        top: 220px;
+      }
       &:hover{
         right: 0;
       }

web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/remix/_product.scss

@@ -100,3 +100,15 @@
     color: $color-label-low-contingent;
   }
 }
+
+.product-detail {}
+
+.product-detail__watchlist {
+  display: inline-block;
+  color: white;
+  background-color: $color-brand-primary;
+  font-size: 22px;
+  line-height: 22px;
+  padding: 4px 12px;
+  cursor: pointer;
+}

web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/remix/_teaserbox.scss

@@ -6,6 +6,7 @@
   text-decoration: none;
   color: $color-font-base;
   margin-bottom: 20px;
+  position: relative;
 
   &:hover {
     color: $color-font-base;
@@ -57,6 +58,11 @@
     @include mq($from: tablet) {
       display: flex;
       flex-wrap: nowrap;
+
+      &:not(:last-child) {
+        padding-bottom: 20px;
+        border-bottom: 2px solid $color-grey;
+      }
     }
 
   }
@@ -150,7 +156,7 @@
 
   .teaserbox--landscape & {
     height: auto;
-    border-style: none solid;
+    border-style: none;
 
     @include mq($from: tablet) {
       display: flex;
@@ -158,7 +164,7 @@
       flex-direction: column;
       justify-content: space-between;
       padding: 8px 16px;
-      border-style: solid none;
+      border-style: none;
     }
 
   }
@@ -189,7 +195,8 @@
     border-style: solid solid solid none;
   }
 
-  .teaserbox--searchresult & {
+  .teaserbox--searchresult &,
+  .teaserbox--landscape & {
     border: none;
 
     @include mq($from: tablet) {
@@ -341,3 +348,30 @@
   }
 
 }
+
+.teaserbox-watchlist {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 10;
+  @include size(48px);
+  display: block;
+  color: white;
+  &:hover,
+  &:focus,
+  &:visited,
+  &:active {
+    color: white;
+  }
+  cursor: pointer;
+  padding: 4px 0 0 28px;
+  &:before {
+    content: "";
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    left: 0;
+    display: block;
+    @include triangle(48px, $color-brand-secondary, up-right);
+  }
+}

web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/remix/_watchlist.scss

@@ -0,0 +1,21 @@
+.watchlist {
+  position: relative;
+
+  .loader {
+    position: absolute;
+    z-index: 100;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(white, 0.75);
+
+    img {
+      position: absolute;
+      top: 0;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+
+}

web/typo3conf/ext/ep_theme/Resources/Private/Partials/ContactBar.html

@@ -1,5 +1,9 @@
 {namespace v=FluidTYPO3\Vhs\ViewHelpers}
 <div class="ep-contactnav">
+    <a href="{f:uri.page(pageUid: settings.watchlistPageUid)}" class="bg-red watchlist" v-show="watchlistCount > 0" v-cloak>
+        <span class="fa fa-list" aria-hidden="true"></span>
+        <div>Merkliste ({{ watchlistCount }})</div>
+    </a>
     <a href="tel:{settings.phoneNumberLink}" class="bg-red phone" title="Telefonische Beratung">
         <span class="fa fa-phone" aria-hidden="true"></span>
         <div>{settings.phoneNumber}</div>

web/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/HeaderDetail.html

@@ -17,7 +17,6 @@
     </div>
     <div class="col-sm-4 pull-left product-header__title">
         <div class="head">
-            <!-- <a href="#" class="add-note" title="Dem Merkzettel hinzufügen"></a> -->
             {product.concept.name}
         </div>
         <div class="content">
@@ -27,12 +26,17 @@
         <f:image class="flag" src="{ep:flagiconSource(countryCode: product.country.code)}" alt="{product.country.name}"/>
 	    <f:if condition="{hotel}">
 		    <f:then>
-			    <a href="{ep:gmapsUrl(hotel: hotel)}" target="_blank" class="ep-property ep-marker"><i class="fa fa-map-marker" aria-hidden="true"></i></a>
+			    <a href="{ep:gmapsUrl(hotel: hotel)}" target="_blank" class="ep-property ep-marker">
+                    <i class="fa fa-map-marker" aria-hidden="true"></i>
+                </a>
 		    </f:then>
 		    <f:else>
-			    <a href="{ep:gmapsUrl(region: product.region)}" target="_blank" class="ep-property ep-marker"><i class="fa fa-map-marker" aria-hidden="true"></i></a>
+			    <a href="{ep:gmapsUrl(region: product.region)}" target="_blank" class="ep-property ep-marker">
+                    <i class="fa fa-map-marker" aria-hidden="true"></i>
+                </a>
 		    </f:else>
 	    </f:if>
+        <watchlist-toggle :watchlist="watchlist" uid="{hotel.uid}:{product.uid}" class="product-detail__watchlist"></watchlist-toggle>
         <f:if condition="{product.skipassIncluded}">
             <a href="#" class="ep-property">inkl. Skipass</a>
         </f:if>
@@ -72,3 +76,9 @@
     </f:if>
     {v:render.template(file: 'EXT:ep_theme/Resources/Private/Partials/Breadcrumb.html')}
 </div>
+<script>
+    import WatchlistToggle from "../../Assets/js/components/WatchlistToggle";
+    export default {
+        components: {WatchlistToggle}
+    }
+</script>

web/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/TeaserWide.html

@@ -94,6 +94,7 @@
                     <a href="{uriLink}" title="{teaser.product.name}" class="button button--full searchresult-item__button">Details &amp; Buchen</a>
                 </div>
             </div>
+            <watchlist-toggle uid="{teaser.key}" v-bind:watchlist="watchlist" class="teaserbox-watchlist"></watchlist-toggle>
         </div>
     </f:section>
 

web/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/List.html

@@ -8,6 +8,13 @@
 
     <f:section name="Content">
         <f:switch expression="{data.list_type}">
+            <f:comment>Plugin watchlist</f:comment>
+            <f:case value="epproducts_watchlist">
+                <f:render section="Header" arguments="{_all}"/>
+                <ep:container data="{data}">
+                    <f:cObject typoscriptObjectPath="tt_content.list.20.{data.list_type}" data="{data}"/>
+                </ep:container>
+            </f:case>
             <f:comment>Plugin snowreport</f:comment>
             <f:case value="epproducts_snowreport_list">
                 <f:render section="Header" arguments="{_all}"/>

web/typo3conf/ext/ep_theme/Resources/Private/Templates/Search/Searchresult.html

@@ -9,11 +9,12 @@
         <div id="search">
             <search-result
                 results-uri="{ep:uri.ajax(action: 'searchresult', controller: 'AjaxSearch', format: 'json', noCacheHash: 1)}"
-                :initial-filter-settings='<v:format.json.encode>{filterSettings}</v:format.json.encode>'
+                v-bind:initial-filter-settings='<v:format.json.encode>{filterSettings}</v:format.json.encode>'
-                :initial-filter-options='<v:format.json.encode>{filterOptions}</v:format.json.encode>'
+                v-bind:initial-filter-options='<v:format.json.encode>{filterOptions}</v:format.json.encode>'
-                :referring-page-uid="{referringPageUid}"
+                v-bind:referring-page-uid="{referringPageUid}"
                 argument-prefix="{ep:argumentPrefix(pluginName: 'ajax')}"
-                :date-presets='{settings.datePickerPresets -> v:format.json.encode()}'
+                v-bind:date-presets='{settings.datePickerPresets -> v:format.json.encode()}'
+                v-bind:watchlist="watchlist"
                 inline-template>
                 <div class="searchresult-wrapper">
                     <div class="pagehead pagehead--searchresult">
@@ -290,7 +291,8 @@
                                                 v-for="item in section.items"
                                                 v-bind:key="item.key"
                                                 v-bind:item="item"
-                                                v-bind:section="section"></search-result-item>
+                                                v-bind:section="section"
+                                                v-bind:watchlist="watchlist"></search-result-item>
                                         </div>
                                     </template>
                                 </div>

web/typo3conf/ext/ep_theme/Resources/Private/Templates/Watchlist/List.html

@@ -0,0 +1,14 @@
+<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">
+
+    <f:layout name="Default"/>
+
+    <f:section name="Main">
+
+        <watchlist :watchlist="watchlist" :referring-page-uid="{referringPageUid}"
+                   loader-uri="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif')}"
+                   watchlist-uri="{ep:uri.ajax(action: 'list', controller: 'AjaxWatchlist', format: 'json', noCacheHash: 1)}"></watchlist>
+    </f:section>
+
+</html>