Add watchlist toggle link to sidebar, remove button

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

@@ -10,6 +10,7 @@
     import AjaxContent from './AjaxContent.vue'
     import Calendar from './Calendar.vue'
     import FacebookPixel from './FacebookPixel.vue'
+    import WatchlistToggle from './WatchlistToggle.vue'
     import dayjs from 'dayjs'
     import 'dayjs/locale/de'
 
@@ -22,7 +23,8 @@
             DaterangeSelect,
             AjaxContent,
             Calendar,
-            FacebookPixel
+            FacebookPixel,
+            WatchlistToggle
         },
         data () {
             return {
@@ -43,7 +45,7 @@
                 singleDate: false
             }
         },
-        props: [ 'filterSettings', 'argumentPrefix', 'uris', 'hotelFirst', 'fbPixelData' ],
+        props: [ 'filterSettings', 'argumentPrefix', 'uris', 'hotelFirst', 'fbPixelData', 'watchlist' ],
         computed: {
             dateLabel () {
                 return this.dateStart + ' - ' + this.dateEnd;

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

@@ -1,12 +1,11 @@
 <template>
-    <span v-on:click.prevent="toggleWatchlist()">
+    <a href="#" v-on:click.prevent="toggleWatchlist()">
-        <template v-if="onWatchlist">
+        <i class="fa tooltiptoggle" :class="{ 'fa-minus-circle': onWatchlist, 'fa-plus-circle': !onWatchlist }"
-            <i class="fa fa-minus tooltiptoggle" data-placement="auto" title="Merkliste"></i>
+           data-placement="auto" title="Merkliste +/-"></i>
-        </template>
+        <span v-if="layout === 'link'">
-        <template v-else>
+            {{ onWatchlist ? 'von der Merkliste entfernen' : 'auf die Merkliste setzen' }}
-            <i class="fa fa-plus tooltiptoggle" data-placement="auto" title="Merkliste"></i>
-        </template>
         </span>
+    </a>
 </template>
 
 <script>
@@ -21,6 +20,10 @@
             watchlist: {
                 type: Array,
                 required: true
+            },
+            layout: {
+                type: String,
+                default: 'toggle'
             }
         },
         methods: {

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

@@ -110,5 +110,13 @@
   font-size: 22px;
   line-height: 22px;
   padding: 4px 12px;
-  cursor: pointer;
+  &:hover {
+    background-color: $color-brand-secondary;
+    color: white;
+  }
+  &:visited,
+  &:active,
+  &:focus {
+    color: white;
+  }
 }

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

@@ -36,9 +36,6 @@
                 </a>
 		    </f:else>
 	    </f:if>
-        <f:if condition="{hotel}">
-            <watchlist-toggle :watchlist="watchlist" uid="{hotel.uid}:{product.uid}" class="product-detail__watchlist"></watchlist-toggle>
-        </f:if>
         <f:if condition="{product.skipassIncluded}">
             <a href="#" class="ep-property">inkl. Skipass</a>
         </f:if>

web/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html

@@ -19,6 +19,7 @@
                 argument-prefix='<ep:argumentPrefix pluginName="Ajax" />'
                 :hotel-first="{f:if(condition: settings.hotelOnTop, then: 'true', else: 'false')}"
                 :fb-pixel-data="{ productUid: <f:format.raw>{product.uid}</f:format.raw>, nameInternal: '<f:format.raw>{product.nameInternal}</f:format.raw>' }"
+                :watchlist="watchlist"
                 inline-template>
                 <div class="product-detail-wrapper">
                     <div class="row">
@@ -72,6 +73,12 @@
                                                 v-on:click.prevent="showHtml('journey')">Anreise</button>
                                     </f:if>
                                 </div>
+                                <div class="col-xs-12">
+                                    <p>
+                                        <watchlist-toggle :watchlist="watchlist" uid="{hotel.uid}:{product.uid}"
+                                                         layout="link"></watchlist-toggle>
+                                    </p>
+                                </div>
                             </div>
                             <div class="hidden-xs">
                                 <f:render section="Calendar" arguments="{_all}"/>
@@ -235,3 +242,9 @@
     </f:section>
 
 </html>
+<script>
+    import WatchlistToggle from "../../Assets/js/components/WatchlistToggle";
+    export default {
+        components: {WatchlistToggle}
+    }
+</script>