WIP Evaluate alpinejs

2021-07-27 14:06:12 +02:00
parent 5d72129ee5
commit 74fa9ee952
36 changed files with 296 additions and 303 deletions
@@ -1547,6 +1547,19 @@
        }
      }
    },
+    "@vue/reactivity": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.1.2.tgz",
+      "integrity": "sha512-glJzJoN2xE7I2lRvwKM5u1BHRPTd1yc8iaf//Lai/78/uYAvE5DXp5HzWRFOwMlbRvMGJHIQjOqoxj87cDAaag==",
+      "requires": {
+        "@vue/shared": "3.1.2"
+      }
+    },
+    "@vue/shared": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.2.tgz",
+      "integrity": "sha512-EmH/poaDWBPJaPILXNI/1fvUbArJQmmTyVCwvvyDYDFnkPoTclAbHRAtyIvqfez7jybTDn077HTNILpxlsoWhg=="
+    },
    "@webassemblyjs/ast": {
      "version": "1.11.0",
      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.0.tgz",
@@ -1806,6 +1819,14 @@
      "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=",
      "dev": true
    },
+    "alpinejs": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.1.1.tgz",
+      "integrity": "sha512-svEX82laPua+oqbYlUgX1H7Q+R0GD0V7fOnjZocPBqABmpQGkofPtPV9dGFkgZy7G6q60KFSzkiSwKMw33EFYw==",
+      "requires": {
+        "@vue/reactivity": "^3.0.2"
+      }
+    },
    "amdefine": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
@@ -12,6 +12,7 @@
    "@fancyapps/fancybox": "^3.5.7",
    "@splidejs/splide": "^2.4.21",
    "@tailwindcss/custom-forms": "^0.2.1",
+    "alpinejs": "^3.1.1",
    "axios": "^0.21.1",
    "axios-auth-refresh": "^1.0.7",
    "bootstrap-sass": "^3.4.1",
@@ -5,62 +5,37 @@ require('lazysizes/plugins/unveilhooks/ls.unveilhooks')
 require('picturefill')
 require('leaflet')

-// Enable resolution of stimulus controllers
-import { Application } from 'stimulus'
-import { definitionsFromContext } from 'stimulus/webpack-helpers'
-
-const application = Application.start()
-const context = require.context('./controllers', true, /\.js$/)
-application.load(definitionsFromContext(context))
-
 // Polyfills
 import smoothscroll from 'smoothscroll-polyfill'
 smoothscroll.polyfill()

-// Function to parse config values from JSON data in HTML source
-const parseAppConfig = () => {
-    const configElement = document.getElementById('appconfig');
-    if (null === configElement) {
-        return {}
-    }
-    return JSON.parse(configElement.innerHTML);
-}
-
-// Function to append pacode parameter to urls specified in config by domain
-const appendPaCode = appConfig => {
-    const paCode = appConfig.paCode
-    const externalDomains = appConfig.externalDomains
-    if (!paCode) {
-        return
-    }
-    document.querySelectorAll('a').forEach(element => {
-        if (element.hostname === location.hostname) {
-            return
-        }
-        if (externalDomains.indexOf(element.hostname) === -1) {
-            return
-        }
-        let url = element.href
-        if (!url) {
-            return
-        }
-        if (url.indexOf('agenturcode=') !== -1) {
-            return
-        }
-        const separator = url.indexOf('?') === -1 ? '?' : '&'
-        url += separator + 'agenturcode=' + paCode
-        element.href = url
-    })
-}
+import Alpine from 'alpinejs'
+import parseAppConfig from './components/appconfig'
+import initSliders from './components/sliders'
+import appendPaCode from './components/pacode'
+import scrollTop from './components/scoll-top'
+import sticky from './components/sticky'
+import watchlistToggle from './components/watchlist-toggle'

 // Executed on document ready
 document.addEventListener('DOMContentLoaded', () => {
    const appConfig = parseAppConfig()
+    const storedWatchlist = JSON.parse(sessionStorage.getItem('myep-watchlist'))
    appendPaCode(appConfig)
+    initSliders()
+    Alpine.store('appconfig', appConfig)
+    Alpine.store('show', {
+        searchBox: false,
+        mobileNav: false,
+    })
+    Alpine.store('watchlist', storedWatchlist ? storedWatchlist : [])
+    Alpine.data('scrollTop', scrollTop)
+    Alpine.data('sticky', sticky)
+    Alpine.data('watchlistToggle', watchlistToggle)
+    Alpine.start()
 })


-
 /// LEGACY CODE FROM HERE ///

 // Import dependencies
@@ -61,12 +61,9 @@
                </a>
            </div>
        </div>
-        <a href="#"
-           data-controller="watchlist-toggle"
-           :data-watchlist-toggle-uid-value="item.key"
-           data-action="watchlist-toggle#toggle">
-          <span data-microtip-position="top" data-watchlist-toggle-target="tooltip" role="tooltip">
-            <i class="fa" data-watchlist-toggle-target="icon"></i>
+        <a href="#" x-data="watchlistToggle" :data-uid="item.key" x-on:click.prevent="toggle()">
+          <span data-microtip-position="top" x-bind:aria-label="label()" role="tooltip">
+            <i class="fa fa-plus-circle" x-bind:class="icon()"></i>
          </span>
        </a>
    </div>
@@ -0,0 +1,9 @@
+const parseAppConfig = () => {
+    const configElement = document.getElementById('appconfig');
+    if (null === configElement) {
+        return {}
+    }
+    return JSON.parse(configElement.innerHTML);
+}
+
+export default parseAppConfig
@@ -0,0 +1,7 @@
+export default (callback, interval) => {
+    let debounceId
+    return (...args) => {
+        clearTimeout(debounceId)
+        debounceId = setTimeout(() => callback.apply(this, args), interval)
+    }
+}
@@ -0,0 +1,27 @@
+const appendPaCode = appConfig => {
+    const paCode = appConfig.paCode
+    const externalDomains = appConfig.externalDomains
+    if (!paCode) {
+        return
+    }
+    document.querySelectorAll('a').forEach(element => {
+        if (element.hostname === location.hostname) {
+            return
+        }
+        if (externalDomains.indexOf(element.hostname) === -1) {
+            return
+        }
+        let url = element.href
+        if (!url) {
+            return
+        }
+        if (url.indexOf('agenturcode=') !== -1) {
+            return
+        }
+        const separator = url.indexOf('?') === -1 ? '?' : '&'
+        url += separator + 'agenturcode=' + paCode
+        element.href = url
+    })
+}
+
+export default appendPaCode
@@ -0,0 +1,15 @@
+import debounce from './debounce'
+
+export default function () {
+    return {
+        show: false,
+        init() {
+            window.addEventListener('scroll', debounce(() => {
+                this.show = window.scrollY > window.innerHeight/3
+            }, 250))
+        },
+        scroll() {
+            window.scroll({ top: 0, left: 0, behavior: 'smooth' })
+        }
+    }
+}
@@ -0,0 +1,110 @@
+import Splide from '@splidejs/splide'
+
+const defaultOptions = {
+    arrows: false,
+    pagination: false,
+    perMove: 1,
+    gap: '1rem',
+    pauseOnHover: false,
+    pauseOnFocus: false,
+}
+
+const presets = {
+    header: {
+        ...defaultOptions,
+        autoplay: true,
+        type: 'fade',
+        perPage: 1,
+        gap: 0,
+        rewind: true,
+    },
+    content: {
+        ...defaultOptions,
+        rewind: true,
+        pagination: true,
+        gap: 0,
+        classes: {
+            pagination: 'slider-pagination',
+            page: 'slider-pagination__dot',
+        },
+    },
+    teasers: {
+        ...defaultOptions,
+        perPage: 4,
+        padding: {
+            right: '2rem',
+        },
+        breakpoints: {
+            1200: {
+                perPage: 4,
+                padding: {
+                    right: '2rem',
+                },
+            },
+            1024: {
+                perPage: 3,
+                padding: {
+                    right: '2rem',
+                },
+            },
+            960: {
+                perPage: 2,
+                padding: {
+                    right: '2rem',
+                },
+            },
+            640: {
+                perPage: 1,
+                padding: {
+                    right: '2rem',
+                },
+            },
+        },
+    },
+    teasersEmbedded: {
+        ...defaultOptions,
+        perPage: 2,
+        padding: {
+            right: '25%',
+        },
+        breakpoints: {
+            960: {
+                perPage: 3,
+                padding: {
+                    right: '10%',
+                },
+            },
+            768: {
+                perPage: 2,
+                padding: {
+                    right: '25%',
+                },
+            },
+            640: {
+                perPage: 2,
+                padding: {
+                    right: '10%',
+                },
+            },
+            512: {
+                perPage: 1,
+                padding: {
+                    right: '10%',
+                },
+            },
+        },
+    },
+}
+
+const initSliders = () => {
+    document.querySelectorAll( '[data-slider]').forEach(element => {
+        let options = {}
+        const preset = element.dataset.slider
+        if (preset in presets) {
+            options = presets[preset]
+        }
+        new Splide(element, options).mount()
+    })
+}
+
+export default initSliders
@@ -0,0 +1,16 @@
+import debounce from './debounce'
+
+export default function () {
+    return {
+        sticky: false,
+        offset: 0,
+        init() {
+            if (this.$el.dataset.offset) {
+                this.offset = this.$el.dataset.offset
+            }
+            window.addEventListener('scroll', debounce(() => {
+                this.sticky = window.scrollY > this.offset
+            }, 250))
+        }
+    }
+}
@@ -0,0 +1,26 @@
+export default function () {
+    return {
+        uid: null,
+        init() {
+            this.uid = this.$el.dataset.uid
+        },
+        onList() {
+            return -1 !== this.$store.watchlist.indexOf(this.uid)
+        },
+        label() {
+            return this.onList() ? 'von der Merkliste entfernen' : 'auf die Merkliste setzen'
+        },
+        icon() {
+            return this.onList() ? 'fa-minus-circle' : 'fa-plus-circle'
+        },
+        toggle() {
+            const watchlistIndex = this.$store.watchlist.indexOf(this.uid)
+            if (-1 !== watchlistIndex) {
+                this.$store.watchlist.splice(watchlistIndex, 1)
+            } else {
+                this.$store.watchlist.push(this.uid)
+            }
+            sessionStorage.setItem('myep-watchlist', JSON.stringify(this.$store.watchlist))
+        }
+    }
+}
@@ -1,23 +0,0 @@
-import { Controller } from 'stimulus'
-import {useDebounce} from '../mixins/useDebounce'
-
-export default class extends Controller {
-
-    static values = { show: Boolean }
-
-    connect() {
-        useDebounce(this)
-        window.addEventListener('scroll', this.debounce(() => {
-            this.showValue = window.scrollY > window.innerHeight/3
-        }, 250))
-    }
-
-    scroll(e) {
-        e.preventDefault()
-        window.scroll({ top: 0, left: 0, behavior: 'smooth' })
-    }
-
-    showValueChanged() {
-        this.element.classList.toggle('hidden', false === this.showValue)
-    }
-}
@@ -1,110 +0,0 @@
-import { Controller } from 'stimulus'
-import Splide from '@splidejs/splide'
-
-export default class extends Controller {
-
-    static classes = [ 'pagination' ]
-    static values = { preset: String, arrows: Boolean, dots: Boolean }
-
-    connect() {
-        const classes = {
-            page: 'slider-pagination__dot',
-        }
-
-        if (this.hasPaginationClass) {
-            classes.pagination = this.paginationClass
-        }
-
-        let options = {
-            perMove: 1,
-            gap: '1rem',
-            pauseOnHover: false,
-            pauseOnFocus: false,
-            pagination: this.dotsValue,
-            arrows: this.arrowsValue,
-            classes
-        }
-
-        switch (this.presetValue) {
-            case 'header-detail':
-                options = {
-                    ...options,
-                    rewind: true,
-                }
-                break;
-            case 'teasers':
-                options = {
-                    ...options,
-                    perPage: 4,
-                    padding: {
-                        right: '2rem',
-                    },
-                    breakpoints: {
-                        1200: {
-                            perPage: 4,
-                            padding: {
-                                right: '2rem',
-                            },
-                        },
-                        1024: {
-                            perPage: 3,
-                            padding: {
-                                right: '2rem',
-                            },
-                        },
-                        960: {
-                            perPage: 2,
-                            padding: {
-                                right: '2rem',
-                            },
-                        },
-                        640: {
-                            perPage: 1,
-                            padding: {
-                                right: '2rem',
-                            },
-                        }
-                    }
-                }
-                break;
-            case 'teasers_embedded':
-                options = {
-                    ...options,
-                    perPage: 2,
-                    padding: {
-                        right: '25%',
-                    },
-                    breakpoints: {
-                        960: {
-                            perPage: 3,
-                            padding: {
-                                right: '10%',
-                            },
-                        },
-                        768: {
-                            perPage: 2,
-                            padding: {
-                                right: '25%',
-                            },
-                        },
-                        640: {
-                            perPage: 2,
-                            padding: {
-                                right: '10%',
-                            },
-                        },
-                        512: {
-                            perPage: 1,
-                            padding: {
-                                right: '10%',
-                            },
-                        },
-                    }
-                }
-                break;
-            default:
-        }
-
-        new Splide(this.element, options).mount()
-    }
-}
@@ -1,15 +0,0 @@
-import { Controller } from 'stimulus'
-import {useDebounce} from '../mixins/useDebounce'
-
-export default class extends Controller {
-
-    static classes = [ 'sticky' ]
-    static values = { offset: Number }
-
-    connect() {
-        useDebounce(this)
-        window.addEventListener('scroll', this.debounce(() => {
-            this.element.classList.toggle(this.stickyClass, window.scrollY > this.offsetValue)
-        }, 250))
-    }
-}
@@ -1,39 +0,0 @@
-import { Controller } from 'stimulus'
-
-export default class extends Controller {
-
-    static targets = [ 'tooltip', 'label', 'icon' ]
-    static values = { uid: String, onList: Boolean }
-
-    connect() {
-        const list = this.getCurrentList()
-        this.onListValue = -1 !== list.indexOf(this.uidValue)
-    }
-
-    toggle(e) {
-        e.preventDefault()
-        this.onListValue = !this.onListValue
-        window.dispatchEvent(new CustomEvent('watchlist-toggle', {
-            detail: this.uidValue
-        }))
-    }
-
-    onListValueChanged() {
-        const label = this.onListValue ? 'von der Merkliste entfernen' : 'auf die Merkliste setzen'
-        if (this.hasTooltipTarget) {
-            this.tooltipTarget.setAttribute('aria-label', label)
-        }
-        if (this.hasLabelTarget) {
-            this.labelTarget.textContent = label
-        }
-        if (this.hasIconTarget) {
-            this.iconTarget.classList.toggle('fa-minus-circle', this.onListValue)
-            this.iconTarget.classList.toggle('fa-plus-circle', !this.onListValue)
-        }
-    }
-
-    getCurrentList() {
-        const initialList = JSON.parse(sessionStorage.getItem('myep-watchlist'))
-        return initialList ? initialList : []
-    }
-}
@@ -3,6 +3,10 @@
@tailwind utilities;

@layer base {
+    [x-cloak] {
+        @apply hidden;
+    }
+    
    @import "variables";
    @import "color";

@@ -90,6 +90,6 @@
        </div>
    </div>
 </div>
-<button data-controller="scroll-top" data-action="scroll-top#scroll" class="arrowtop hidden">
+<button x-data="scrollTop" x-on:click.prevent="scroll()" x-show="show" class="arrowtop " x-cloak>
    <i class="fa fa-angle-up"></i>
 </button>
@@ -3,10 +3,7 @@
      xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">

 <div class="pagehead">
-    <div data-controller="splide slider"
-         data-splide='{"arrows": false, "autoplay": true, "type": "fade", "perPage": 1, "rewind": true}'
-         data-slider-pagination-class="slider-pagination slider-pagination--header"
-         class="slider slider--header">
+    <div class="splide slider slider--header" data-slider="header">
        <div class="splide__track">
            <ul class="splide__list">
                <f:for each="{slides}" as="slide" iteration="iteration">
@@ -10,7 +10,7 @@
 <f:if condition="{teasers}">
    <f:then>
        <a id="teasers" class="anchor"></a>
-        <div class="splide" data-controller="slider" data-slider-preset-value="teasers">
+        <div class="splide" data-slider="teasers">
            <div class="splide__track">
                <ul class="splide__list">
                    <f:for each="{teasers}" as="teaser">
@@ -117,11 +117,10 @@
                    </f:else>
                </f:if>
            </div>
-            <a href="#"
-               class="teaserbox-watchlist"
-               data-controller="watchlist-toggle"
-               data-watchlist-toggle-uid-value="{item.hotel.uid}:{product.uid}"
-               data-action="watchlist-toggle#toggle">
+            <a href="#" class="teaserbox-watchlist" x-data="watchlistToggle" :data-uid="item.key" x-on:click.prevent="toggle()">
+              <span data-microtip-position="top" x-bind:aria-label="label()" role="tooltip">
+                <i class="fa fa-plus-circle" x-bind:class="icon()"></i>
+              </span>
            </a>
        </div>
    </f:section>
@@ -5,7 +5,7 @@
      xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers" >

    <f:section name="Mainnav">
-        <div class="navbar-main-wrapper" :class="{ 'searchbar-fixed': searchbarFixed }">
+        <div class="navbar-main-wrapper" :class="{ 'searchbar-fixed': searchbarFixed }" x-data>
            <nav class="container navbar navbar-default navbar-main{f:if(condition: data.tx_eptheme_hide_searchbar, then: ' navbar-main--no-searchbar')}">
                <f:render section="NavbarHeader" arguments="{_all}"/>
                <div class="hidden-xs hidden-sm">
@@ -25,7 +25,7 @@

    <f:section name="NavbarHeader">
        <div class="navbar-header">
-            <a @click.prevent="toggleMobileNavigation()" href="#" class="navbar-toggle collapsed" id="navtoggle">
+            <a x-on:click.prevent="$store.show.mobileNav = !$store.show.mobileNav" href="#" class="navbar-toggle collapsed" id="navtoggle">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
@@ -33,7 +33,7 @@
            </a>
            <f:if condition="{data.tx_eptheme_hide_searchbar}">
                <f:else>
-                    <a @click.prevent="toggleSearchbox()" class="search hidden-md hidden-lg" href="#" id="searchboxtoggle">
+                    <a x-on:click.prevent="$store.show.searchBox = !$store.show.searchBox" class="search hidden-md hidden-lg" href="#" id="searchboxtoggle">
                        <i class="fa fa-search" aria-hidden="true"></i>
                    </a>
                </f:else>
@@ -45,7 +45,7 @@
    </f:section>

    <f:section name="FirstLevel">
-        <div class="collapse navbar-collapse"{f:if(condition: mobile, then: ' data-mobile-menu')}>
+        <div class="navbar-collapse"{f:if(condition: mobile, then: ' x-show="$store.show.mobileNav" x-cloak')}>
            <ul class="nav navbar-nav">
                <v:menu pageUid="{navPid}" entryLevel="1" useShortcutUid="true">
                    <f:for each="{menu}" as="topitem" iteration="outerIteration">
@@ -4,10 +4,7 @@

    <f:alias map="{images: '{media -> v:iterator.filter(propertyName: \'showinpreview\', filter: 0)}'}">
        <f:if condition="{images}">
-            <div data-controller="slider"
-                 data-splide='{"perPage": 1, "rewind": true}'
-                 data-slider-pagination-class="slider-pagination"
-                 class="splide slider slider--content">
+            <div data-slider="content" class="splide slider slider--content">
                <div id="carousel-{id}" class="splide__track slider__items">
                    <ul class="splide__list">
                        <f:for each="{images}" as="image" iteration="iteration">
@@ -3,10 +3,7 @@
 <div class="container ep-product-detail product-header">
    <div class="ep-product-detail-bg season-{product.region.season}"></div>
    <div class="col-sm-6 col-sm-offset-1 pull-right">
-        <div data-controller="slider"
-             data-slider-preset="header-detail"
-             data-slider-pagination-class="slider-pagination"
-             class="splide slider slider--product">
+        <div data-slider="content" class="splide slider slider--product">
            <div class="splide__track">
                <ul class="splide__list">
                    <f:for each="{product.images}" as="image" iteration="iteration">
@@ -22,10 +19,12 @@
                    </f:for>
                </ul>
            </div>
+            <f:comment><!--
            <div class="splide__arrows slider__pagination">
                <button class="splide__arrow splide__arrow--prev slider-pagination__arrow slider-pagination__arrow--prev"><i class="fa fa-2x fa-chevron-left"></i></button>
                <button class="splide__arrow splide__arrow--next slider-pagination__arrow slider-pagination__arrow--next"><i class="fa fa-2x fa-chevron-right"></i></button>
            </div>
+            --></f:comment>
        </div>
    </div>
    <div class="col-sm-4 pull-left product-header__title">
@@ -115,12 +115,9 @@
                </a>
            </div>
        </div>
-        <a href="#"
-           data-controller="watchlist-toggle"
-           data-watchlist-toggle-uid-value="{item.key}"
-           data-action="watchlist-toggle#toggle">
-              <span data-microtip-position="top" data-watchlist-toggle-target="tooltip" role="tooltip">
-                <i class="fa" data-watchlist-toggle-target="icon"></i>
+        <a href="#" x-data="watchlistToggle" data-uid="{item.key}" x-on:click.prevent="toggle()">
+              <span data-microtip-position="top" x-bind:aria-label="onList() ? 'von der Merkliste entfernen' : 'auf die Merkliste setzen'" role="tooltip">
+                <i class="fa fa-plus-circle" x-bind:class="onList() ? 'fa-minus-circle' : 'fa-plus-circle'"></i>
              </span>
        </a>
    </div>
@@ -92,11 +92,10 @@
                    </a>
                </div>
            </div>
-            <a href="#"
-               class="teaserbox-watchlist"
-               data-controller="watchlist-toggle"
-               data-watchlist-toggle-uid-value="{teaser.key}"
-               data-action="watchlist-toggle#toggle">
+            <a href="#" class="teaserbox-watchlist" x-data="watchlistToggle" :data-uid="item.key" x-on:click.prevent="toggle()">
+              <span data-microtip-position="top" x-bind:aria-label="label()" role="tooltip">
+                <i class="fa fa-plus-circle" x-bind:class="icon()"></i>
+              </span>
            </a>
        </div>
    </f:section>
@@ -18,9 +18,7 @@
    {region.skiArea -> f:format.html()}
    <f:if condition="{teasers}">
        <a id="teasers" class="anchor"></a>
-        <div class="splide"
-             data-controller="slider"
-             data-slider-preset-value="teasers_embedded">
+        <div class="splide" data-slider="teasersEmbedded">
            <div class="splide__track">
                <ul class="splide__list">
                    <f:for each="{teasers}" as="teaser">
@@ -9,7 +9,7 @@
        <f:render partial="Header/Standalone" arguments="{_all}"/>
        <div>
            <ep:container data="{data}">
-                <div class="splide" data-controller="slider" data-slider-preset-value="teasers">
+                <div class="splide" data-slider="teasers">
                    <div class="splide__track">
                        <ul class="splide__list">
                            <f:for each="{teasers}" as="city">
@@ -8,7 +8,7 @@
    <f:section name="Main">
        <div>
            <ep:container data="{data}">
-                <div class="splide" data-controller="slider" data-slider-preset-value="teasers">
+                <div class="splide" data-slider="teasers">
                    <div class="splide__track">
                        <ul class="splide__list">
                            <f:for each="{teasers}" as="concept">
@@ -29,9 +29,8 @@
                    {country.description -> f:format.html()}
                    <f:if condition="{teasers}">
                        <a id="teasers" class="anchor"></a>
-                        <div data-controller="slider"
-                             data-slider-preset-value="teasers_embedded"
-                             data-slider-arrows-value="true"
+                        <div data-slider="teasersEmbedded"
+                             data-splide='{"arrows": true}'
                             class="splide slider slider--teasers in-column">
                            <div class="splide__track slider__items">
                                <ul class="splide__list">
@@ -7,9 +7,7 @@
    <f:section name="Main">
        <div>
            <ep:container data="{data}">
-                <div class="splide"
-                     data-controller="slider"
-                     data-slider-preset-value="teasers">
+                <div class="splide" data-slider="teasers">
                    <div class="splide__track">
                        <ul class="splide__list">
                            <f:for each="{teasers}" as="hotel">
@@ -7,9 +7,7 @@
    <f:section name="Main">
        <div>
            <ep:container data="{data}">
-                <div class="splide"
-                     data-controller="slider"
-                     data-slider-preset-value="teasers">
+                <div class="splide" data-slider="teasers">
                    <div class="splide__track">
                        <ul class="splide__list">
                            <f:for each="{bookable}" as="hotel">
@@ -83,16 +83,11 @@
                                    </div>
                                    <div class="col-xs-12">
                                        <p>
-                                            <a href="#"
-                                               data-controller="watchlist-toggle"
-                                               data-watchlist-toggle-uid-value="{hotel.uid}:{product.uid}"
-                                               data-action="watchlist-toggle#toggle">
-                                                <span data-microtip-position="top" data-watchlist-toggle-target="tooltip" role="tooltip">
-                                                  <i class="fa" data-watchlist-toggle-target="icon"></i>
-                                                </span>
-                                                <span data-watchlist-toggle-target="label">
-                                                    auf die Merkliste setzen
-                                                </span>
+                                            <a href="#" x-data="watchlistToggle" data-uid="{hotel.uid}:{product.uid}" x-on:click.prevent="toggle()">
+                                              <span data-microtip-position="top" x-bind:aria-label="label()" role="tooltip">
+                                                <i class="fa" x-bind:class="icon()"></i>
+                                              </span>
+                                                <span x-text="label()"></span>
                                            </a>
                                        </p>
                                        <p>
@@ -12,9 +12,7 @@
            <ep:container data="{data}">
                <f:if condition="{data.flexForm.settings.layout} == 'cols'">
                    <f:then>
-                        <div class="splide"
-                             data-controller="slider"
-                             data-slider-preset-value="teasers">
+                        <div class="splide" data-slider="teasers">
                            <div class="splide__track">
                                <ul class="splide__list">
                                    <f:render section="Teasers" arguments="{_all}"/>
@@ -8,9 +8,7 @@
    <f:section name="Main">
        <div>
            <ep:container data="{data}">
-                <div class="splide"
-                     data-controller="slider"
-                     data-slider-preset-value="teasers">
+                <div class="splide" data-slider="teasers">
                    <div class="splide__track">
                        <ul class="splide__list">
                            <f:for each="{teasers}" as="region">
@@ -14,7 +14,7 @@
                :initial-filter-options='{filterOptions -> f:format.json() -> f:format.raw()}'
                :date-presets='{settings.datePickerPresets -> f:format.json() -> f:format.raw()}'
                inline-template>
-                <div class="container searchbar{f:if(condition: fixed, then: ' affix')}"{f:if(condition: fixed, else: ' data-controller="sticky" data-sticky-sticky-class="affix" data-sticky-offset-value="650"')}>
+                <div class="container searchbar{f:if(condition: fixed, then: ' affix')}"{f:if(condition: fixed, else: ' x-data="sticky" data-offset="650" x-bind:class="sticky ? \'affix\': \'\'"')}>
                    <div class="container">
                        <f:form action="processSearch" controller="Search" method="post" name="searchParams"
                                object="{searchParams}" pluginName="searchresult" extensionName="epproducts"
@@ -5,7 +5,7 @@
    <f:layout name="Default"/>

    <f:section name="Main">
-        <div id="searchbox" class="searchbox hidden-lg" v-cloak>
+        <div id="searchbox" class="searchbox hidden-lg" x-data x-show="$store.show.searchBox" x-cloak>
            <search-box
                options-uri='<ep:uri.ajax controller="AjaxSearchbar" action="options" pageUid="{settings.defaultAjaxUid}" />'
                reset-uri='<ep:uri.ajax controller="AjaxSearchbar" action="reset" pageUid="{settings.defaultAjaxUid}" />'