WIP Complete overhaul of all js

package.json

@@ -1,18 +1,18 @@
 {
   "name": "epevents",
   "description": "EP Reisen TYPO3 website package",
-  "version": "4.0.0",
+  "version": "5.0.0",
   "author": "Björn Fromme, [email protected]",
-  "license": "WTFPL",
+  "license": "proprietary",
-  "repository": "https://gitlab.com/dreipunktnull/ep_theme.git",
   "scripts": {
     "dev": "./node_modules/.bin/encore dev --watch",
     "build": "NODE_ENV=production ./node_modules/.bin/encore production"
   },
   "dependencies": {
     "@fancyapps/fancybox": "^3.5.7",
+    "@splidejs/splide": "^2.4.21",
     "@tailwindcss/custom-forms": "^0.2.1",
-    "axios": "^0.18.0",
+    "axios": "^0.21.1",
     "axios-auth-refresh": "^1.0.7",
     "bootstrap-sass": "^3.4.1",
     "bourbon": "^4.3.2",
@@ -28,22 +28,27 @@
     "sass-mq": "^3.3.2",
     "slick-carousel": "^1.8.0",
     "sticky-js": "^1.3.0",
+    "stimulus": "^2.0.0",
     "tailwindcss": "^1.8.10",
     "tinycolor2": "^1.4.1",
     "vue": "^2.6.14",
     "vue-router": "^3.5.1",
-    "vue-scrollto": "^2.18.2",
+    "vue-scrollto": "^2.20.0",
     "vue-session": "^1.0.0",
     "vuex": "^3.6.2"
   },
   "devDependencies": {
-    "@babel/plugin-proposal-object-rest-spread": "^7.14.4",
+    "@babel/plugin-proposal-object-rest-spread": "^7.14.5",
+    "@babel/preset-env": "^7.14.5",
+    "@symfony/webpack-encore": "^1.5.0",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@symfony/webpack-encore": "^0.28.3",
+    "autoprefixer": "^9.4.6",
-    "autoprefixer": "^8.6.5",
+    "core-js": "^3.15.0",
+    "file-loader": "^6.2.0",
     "node-sass": "^4.14.1",
-    "postcss-loader": "^3.0.0",
+    "postcss": "^8.3.5",
-    "sass-loader": "^7.3.1",
+    "postcss-loader": "^5.3.0",
+    "sass-loader": "^9.0.3",
     "vue-loader": "^15.9.7",
     "vue-template-compiler": "^2.6.14"
   },

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

@@ -154,6 +154,11 @@ class ProductController extends ActionController
         $noInfoConceptUids = GeneralUtility::trimExplode(',', $this->settings['noInfoConceptUids']);
         $isProductWithNoInfoConcept = ($product->getConcept() !== null) && \in_array($product->getConcept()->getUid(),
                 $noInfoConceptUids, false);
+
+        // Assemble backlink
+        $backlinkUrl = GeneralUtility::_GET('ref');
+        $backLinkLabel = strpos($backlinkUrl, 'suche') !== -1 ? 'zurück zum Suchergebnis' : 'zurück';
+
         $this->view->assignMultiple([
             'hotel' => $hotel,
             'product' => $product,
@@ -162,6 +167,8 @@ class ProductController extends ActionController
             'currentPageUid' => $GLOBALS['TSFE']->id,
             'dateFrom' => $dateFrom,
             'dateTo' => $dateTo,
+            'referringUrl' => $backlinkUrl,
+            'backlinkLabel' => $backLinkLabel
         ]);
     }
 

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

@@ -1,4 +1,14 @@
-'use strict';
+// 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))
+
+
+
+
 
 // Import dependencies
 import Vue from 'vue'
@@ -31,8 +41,6 @@ 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 FacebookPixel from './components/FacebookPixel.vue'
-import BackLink from './components/BackLink.vue'
 
 // Define global constants
 const $window = $(window);
@@ -68,10 +76,8 @@ new Vue({
         WatchlistToggle,
         Watchlist,
         HotelList,
-        BackLink,
         MyEp: () => import('./myep/App.vue'),
         GroupsPriceCalculator: () => import('./components/GroupsPriceCalculator.vue'),
-        FacebookPixel
     },
     data () {
         return {
@@ -148,53 +154,53 @@ new Vue({
             });
         },
         initCarousels () {
-            let $carouselItemWrappers = $('.slider--teasers > .slider__items').not('.slick-initialized');
+            // let $carouselItemWrappers = $('.slider--teasers > .slider__items').not('.slick-initialized');
-            let initCallback = this.initTeaserSlider;
+            // let initCallback = this.initTeaserSlider;
-            $.each($carouselItemWrappers, function () {
+            // $.each($carouselItemWrappers, function () {
-                initCallback($(this));
+            //     initCallback($(this));
-            });
+            // });
-            $carouselItemWrappers = $('.slider--thirds > .slider__items').not('.slick-initialized');
+            // $carouselItemWrappers = $('.slider--thirds > .slider__items').not('.slick-initialized');
-            $.each($carouselItemWrappers, function () {
+            // $.each($carouselItemWrappers, function () {
-                let numberOfSlides = $(this).children().length;
+            //     let numberOfSlides = $(this).children().length;
-                $(this).slick({
+            //     $(this).slick({
-                    accessibility: false, // This is a hack to avoid a slick carousel bug. see: https://github.com/kenwheeler/slick/issues/1407#issuecomment-325228683
+            //         accessibility: false, // This is a hack to avoid a slick carousel bug. see: https://github.com/kenwheeler/slick/issues/1407#issuecomment-325228683
-                    mobileFirst: true,
+            //         mobileFirst: true,
-                    infinite: false,
+            //         infinite: false,
-                    slidesToShow: 1.15,
+            //         slidesToShow: 1.15,
-                    slidesToScroll: 1,
+            //         slidesToScroll: 1,
-                    arrows: false,
+            //         arrows: false,
-                    dots: false,
+            //         dots: false,
-                    responsive: [
+            //         responsive: [
-                        {
+            //             {
-                            breakpoint: 1200,
+            //                 breakpoint: 1200,
-                            settings: {
+            //                 settings: {
-                                slidesToShow: 3,
+            //                     slidesToShow: 3,
-                                arrows: numberOfSlides > 3,
+            //                     arrows: numberOfSlides > 3,
-                                prevArrow: sliderPrevArrow,
+            //                     prevArrow: sliderPrevArrow,
-                                nextArrow: sliderNextArrow
+            //                     nextArrow: sliderNextArrow
-                            }
+            //                 }
-                        },
+            //             },
-                        {
+            //             {
-                            breakpoint: 992,
+            //                 breakpoint: 992,
-                            settings: {
+            //                 settings: {
-                                slidesToShow: 2.75,
+            //                     slidesToShow: 2.75,
-                            }
+            //                 }
-                        },
+            //             },
-                        {
+            //             {
-                            breakpoint: 640,
+            //                 breakpoint: 640,
-                            settings: {
+            //                 settings: {
-                                slidesToShow: 2.5,
+            //                     slidesToShow: 2.5,
-                            }
+            //                 }
-                        },
+            //             },
-                        {
+            //             {
-                            breakpoint: 384,
+            //                 breakpoint: 384,
-                            settings: {
+            //                 settings: {
-                                slidesToShow: 1.75,
+            //                     slidesToShow: 1.75,
-                            }
+            //                 }
-                        }
+            //             }
-                    ]
+            //         ]
-                });
+            //     });
-            });
+            // });
         },
         initTeaserSlider ($element) {
             let maxNumberOfSlides = $element.parent('.slider').hasClass('in-column') ? 3 : 4;
@@ -236,39 +242,6 @@ new Vue({
                 ]
             });
         },
-        initContentsliders () {
-            $('.slider--content > .slider__items, .slider--product > .slider__items').not('.slick-initialized').slick({
-                dots: true,
-                dotsClass: 'slider-pagination',
-                customPaging: (slider, i) => {
-                    return $(sliderDot).text(i + 1);
-                },
-                prevArrow: sliderPrevArrow,
-                nextArrow: sliderNextArrow
-            });
-        },
-        initHeaderSlider () {
-            $('.slider--header').not('.slider--disabled').slick({
-                dots: false,
-                dotsClass: 'slider-pagination slider-pagination--header',
-                autoplay: true,
-                customPaging: (slider, i) => {
-                    return $(sliderDot).text(i + 1);
-                },
-                prevArrow: '<div class="slider-pagination__zone slider-pagination__zone--prev"></div>',
-                nextArrow: '<div class="slider-pagination__zone slider-pagination__zone--next"></div>',
-                mobileFirst: true,
-                responsive: [
-                    {
-                        breakpoint: 768,
-                        settings: {
-                            dots: true
-                        }
-                    }
-                ]
-            });
-
-        },
         initDropdownMenuBehavior () {
             const $dropdownLinks = $('.navbar-main').find('a.dropdown-toggle');
             if (this.mobileMode) {
@@ -374,27 +347,11 @@ new Vue({
                 $(this).attr('href', url);
             });
         },
-        loadSocialFeed () {
-            const $feedWrapper = $('[data-social-feed]');
-            if ($feedWrapper.length) {
-                const uri = $feedWrapper.data('uri');
-                axios.get(uri)
-                    .then(response => {
-                        $feedWrapper.html(response.data.html);
-                        const $slider = $feedWrapper.find('.slider__items');
-                        this.initTeaserSlider($slider);
-                    })
-                    .catch(error => {
-                        $feedWrapper.html('<p>Social feed konnte nicht geladen werden.</p>')
-                    })
-            }
-        }
     },
     created () {
         this.$store.dispatch('init');
         EventBus.$on('ajaxContentLoaded', () => {
             Vue.nextTick(() => {
-                this.initContentsliders();
                 this.initTooltips();
                 this.initFilterpanel();
                 this.appendPaCode();
@@ -418,14 +375,11 @@ new Vue({
             this.initListeners();
             this.initFilterpanel();
             this.initCarousels();
-            this.initHeaderSlider();
-            this.initContentsliders();
             this.initTooltips();
             this.initDropdownMenuBehavior();
             this.initPartnerIdSelect();
             this.initFaqFilter();
             this.appendPaCode();
-            this.loadSocialFeed();
         });
     }
 });

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

@@ -1,59 +0,0 @@
-'use strict';
-
-// Require images
-require('../images/bg_login.jpg');
-require('../images/logo.svg');
-require('../images/logo_wide.svg');
-require('../images/at.png');
-require('../images/ch.png');
-require('../images/de.png');
-require('../images/fr.png');
-require('../images/gb.png');
-require('../images/badge_skipass.png');
-require('../images/polygon.jpg');
-require('../images/global_compact.png');
-require('../images/global_compact_weiss.png');
-
-require('../images/icons/apple-touch-icon.png');
-require('../images/icons/apple-touch-icon-57x57.png');
-require('../images/icons/apple-touch-icon-60x60.png');
-require('../images/icons/apple-touch-icon-72x72.png');
-require('../images/icons/apple-touch-icon-76x76.png');
-require('../images/icons/apple-touch-icon-114x114.png');
-require('../images/icons/apple-touch-icon-120x120.png');
-require('../images/icons/apple-touch-icon-128x128.png');
-require('../images/icons/apple-touch-icon-144x144.png');
-require('../images/icons/apple-touch-icon-152x152.png');
-require('../images/icons/apple-touch-icon-180x180.png');
-require('../images/icons/apple-touch-icon-precomposed.png');
-require('../images/icons/favicon.gif');
-require('../images/icons/favicon.ico');
-require('../images/icons/favicon.png');
-require('../images/icons/favicon-16x16.png');
-require('../images/icons/favicon-32x32.png');
-require('../images/icons/favicon-96x96.png');
-require('../images/icons/favicon-160x160.png');
-require('../images/icons/favicon-192x192.png');
-require('../images/icons/favicon-196x196.png');
-
-require('../images/icons/icon_ce.svg');
-require('../images/icons/icon_select.png');
-require('../images/icons/tx_eptheme_domain_model_lineup.gif');
-require('../images/icons/tx_eptheme_domain_model_slide.gif');
-require('../images/icons/tx_eptheme_gridelements_half_and_two_quarters.png');
-require('../images/icons/tx_eptheme_gridelements_halves.png');
-require('../images/icons/tx_eptheme_gridelements_quarters.png');
-require('../images/icons/tx_eptheme_gridelements_thirds.png');
-require('../images/icons/tx_eptheme_gridelements_two_quarters_and_half.png');
-
-require('../images/logo_boarderweek.svg');
-require('../images/favicon_sbw.ico');
-require('../images/logo_snowzone.svg');
-require('../images/logo_snowzone_2019.svg');
-require('../images/favicon_sz.ico');
-require('../images/logo_uni_champ.svg');
-require('../images/favicon_uch.ico');
-
-require('leaflet/dist/images/marker-icon.png');
-require('leaflet/dist/images/marker-icon-2x.png');
-require('leaflet/dist/images/marker-shadow.png');

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

@@ -1,31 +0,0 @@
-<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/FacebookPixel.vue

@@ -1,18 +0,0 @@
-<template></template>
-<script>
-    import Vue from 'vue'
-
-    export default {
-        props: {
-            values: {
-                type: Object,
-                required: true
-            }
-        },
-        mounted () {
-            Vue.nextTick(() => {
-                fbq('track', 'ViewContent', this.values);
-            })
-        }
-    }
-</script>

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

@@ -1,13 +1,11 @@
 <script>
     import WatchlistToggle from './WatchlistToggle'
-    import BackLink from './BackLink'
 
     import defaultFilterSettings from '../_filtersettings'
 
     export default {
         components: {
             WatchlistToggle,
-            BackLink
         },
         props: {
             referringPageUrl: {

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

@@ -11,10 +11,8 @@
     import DaterangeSelect from './DaterangeSelect.vue'
     import AjaxContent from './AjaxContent.vue'
     import Calendar from './Calendar.vue'
-    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'
 
@@ -28,10 +26,8 @@
             DaterangeSelect,
             AjaxContent,
             Calendar,
-            FacebookPixel,
             WatchlistToggle,
             OsmMap,
-            BackLink
         },
         data () {
             return {

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/facebook_pixel_controller.js

@@ -0,0 +1,10 @@
+import { Controller } from 'stimulus'
+
+export default class extends Controller {
+
+    static values = { props: Object }
+
+    connect() {
+        fbq('track', 'ViewContent', this.propsValue);
+    }
+}

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/slider_controller.js

@@ -0,0 +1,60 @@
+import { Controller } from 'stimulus'
+import Splide from '@splidejs/splide'
+
+export default class extends Controller {
+
+    static classes = [ 'pagination' ]
+    static values = { preset: String }
+
+    connect() {
+        const classes = {
+            page: 'slider-pagination__dot',
+        }
+
+        if (this.hasPaginationClass) {
+            classes.pagination = this.paginationClass
+        }
+
+        let options = {
+            pauseOnHover: false,
+            pauseOnFocus: false,
+            classes
+        }
+
+        switch (this.presetValue) {
+            case 'header-detail':
+                options = {
+                    ...options,
+                    perPage: 1,
+                    rewind: true,
+                }
+                break;
+            case 'teasers':
+                options = {
+                    ...options,
+                    perPage: 3,
+                    perMove: 1,
+                    pagination: false,
+                    gap: '1rem',
+                    breakpoints: {
+                        1200: {
+                            perPage: 3,
+                        },
+                        992: {
+                            perPage: 2.75,
+                        },
+                        640: {
+                            perPage: 2.5,
+                        },
+                        384: {
+                            perPage: 1.75,
+                        }
+                    }
+                }
+                break;
+            default:
+        }
+
+        new Splide(this.element, options).mount()
+    }
+}

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

@@ -6,8 +6,5 @@ require('./_app');
 // Main and vendor styles
 require('./_styles');
 
-// Main and vendor images
-require('./_images');
-
 // Main styles
 require('../scss/main.scss');

public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/remix/_slider.scss

@@ -1,3 +1,5 @@
+@import "~@splidejs/splide/dist/css/splide-core.min.css";
+
 .slider {
   position: relative;
   margin-bottom: 20px;
@@ -16,12 +18,6 @@
   position: relative;
   background-size: cover;
   background-position: left center;
-  display: none;
-
-  // Avoid FOUC
-  .slick-initialized &, &:first-child {
-    display: block;
-  }
 
   &--product {
     height: 240px;
@@ -119,11 +115,17 @@
     outline: none;
   }
 
-  .slick-active & {
+  &.is-active {
     background-color: $color-brand-secondary;
   }
 }
 
+.splide__arrows {
+    @include mq($until: desktop) {
+        display: none;
+    }
+}
+
 .slider-pagination__arrow {
   border: none;
   background: transparent;
@@ -142,7 +144,7 @@
     outline: none;
   }
 
-  &.slick-disabled {
+  &[disabled] {
     opacity: 0.1;
   }
 
@@ -152,7 +154,7 @@
     transform: translateY(-50%);
 
     .slider--teasers & {
-      left: -2%;
+      left: -28px;
     }
   }
 
@@ -162,7 +164,7 @@
     transform: translateY(-50%);
 
     .slider--teasers & {
-      right: -2%;
+      right: -28px;
     }
   }
 }
@@ -183,13 +185,3 @@
     right: 0;
   }
 }
-
-// Avoid blue border in Chrome
-.slick-slider * {
-  outline: none;
-}
-
-// Avoid centering of items in incomplete rows
-.slick-track {
-  margin-left: 0;
-}

public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSlider.html

@@ -1,8 +1,16 @@
-{namespace v=FluidTYPO3\Vhs\ViewHelpers}
+<html data-namespace-typo3-fluid="true" lang="en"
+      xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
+
 <div class="pagehead">
-    <div class="slider slider--header{f:if(condition: '{slides -> f:count()} == 1', then: ' slider--disabled')}">
+    <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__track">
+            <ul class="splide__list">
                 <f:for each="{slides}" as="slide" iteration="iteration">
-            <div class="slider__item">
+                    <li class="splide__slide slider__item" data-slider-target="slide">
                         <div class="herounit">
                             <f:alias map="{image: slide.image.0}">
                                 <f:if condition="{image}">
@@ -51,7 +59,11 @@
                                 </f:alias>
                             </f:if>
                         </div>
-            </div>
+                    </li>
                 </f:for>
+            </ul>
+        </div>
     </div>
 </div>
+
+</html>

public/typo3conf/ext/ep_theme/Resources/Private/Partials/News/Detail/MediaContainer.html

@@ -2,16 +2,23 @@
       xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
       data-namespace-typo3-fluid="true">
 
-    <v:variable.set name="images" value="{media -> v:iterator.filter(propertyName: 'showinpreview', filter: 0)}"/>
+    <:variable.set name="images" value="{media -> v:iterator.filter(propertyName: 'showinpreview', filter: 0)}"/>
     <f:if condition="{images}">
-        <div class="slider slider--content">
+        <div data-controller="slider"
-            <div id="carousel-{id}" class="slider__items">
+             data-splide='{"perPage": 1, "rewind": true}'
+             data-slider-pagination-class="slider-pagination"
+             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">
+                        <li class="splide__slide">
                             <f:link.typolink parameter="{image.originalResource.link}" class="slider__item">
                                 <img src="{f:uri.image(image: image, width: '770', height: '430c+100')}"
                                      class="slider__image" alt="{image.alternative}" title="{image.title}">
                             </f:link.typolink>
+                        </li>
                     </f:for>
+                </ul>
             </div>
             <f:if condition="{images -> f:count()} > 1">
                 <div class="slider__thumbs hidden-sm hidden-xs">

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

@@ -3,15 +3,24 @@
 <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 class="slider slider--product">
+        <div data-controller="slider"
-            <div class="slider__items">
+             data-slider-preset="header-detail"
+             data-slider-pagination-class="slider-pagination"
+             class="splide slider slider--product">
+            <div class="splide__track">
+                <ul class="splide__list">
                     <f:for each="{product.images}" as="image" iteration="iteration">
-                    <div class="slider__item slider__item--product responsive-bg"
+                        <li class="splide__slide slider__item slider__item--product responsive-bg"
                              style="background-image: url({f:uri.image(image: image, width: '400')})"
                              data-mobile="{f:uri.image(image: image, width: '400')}"
                              data-desktop="{f:uri.image(image: image, width: '585')}">
-                    </div>
+                        </li>
                     </f:for>
+                </ul>
+            </div>
+            <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>
         </div>
     </div>
@@ -60,6 +69,10 @@
             </f:link.typolink>
         </f:if>
     </div>
-    <back-link></back-link>
+    <f:if condition="{referringUrl}">
+        <div class="ep-backlink">
+            <a href="{referringUrl}" class="button button--small">{backlinkLabel}</a>
+        </div>
+    </f:if>
     {v:render.template(file: 'EXT:ep_theme/Resources/Private/Partials/Breadcrumb.html')}
 </div>

public/typo3conf/ext/ep_theme/Resources/Private/Templates/Country/Detail.html

@@ -29,13 +29,21 @@
                     {country.description -> f:format.html()}
                     <f:if condition="{teasers}">
                         <a id="teasers" class="anchor"></a>
-                        <div class="slider slider--teasers in-column">
+                        <div data-controller="slider"
-                            <div class="row slider__items">
+                             data-slider-preset-value="teasers"
+                             class="splide slider slider--teasers in-column">
+                            <div class="splide__track slider__items">
+                                <ul class="splide__list">
                                     <f:for each="{teasers}" as="teaser">
-                                    <div class="col-md-4">
+                                        <li class="splide__slide">
                                             <f:render partial="Product/Teaser" section="Teaser" arguments="{teaser: teaser}"/>
-                                    </div>
+                                        </li>
                                     </f:for>
+                                </ul>
+                            </div>
+                            <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>
                         </div>
                         <f:if condition="{settings.showMoreLink}">

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

@@ -24,8 +24,21 @@
             <f:case value="epproducts_product_teasergroup">
                 <f:render section="Header" arguments="{_all}"/>
                 <div>
-                    <ep:container data="{data}" cssClasses="{f:if(condition: '{data.flexForm.settings.layout} == \'cols\'', then: 'slider slider--teasers')}">
+                    <ep:container data="{data}">
+                        <f:if condition="{data.flexForm.settings.layout} == 'cols'">
+                            <f:then>
+                                <div data-controller="slider" data-slider-preset-value="teasers" class="splide slider slider--teasers">
+                                    <div class="splide__track">
+                                        <ul class="splide__list">
                                             <f:cObject typoscriptObjectPath="tt_content.list.20.{data.list_type}" data="{data}"/>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </f:then>
+                            <f:else>
+                                <f:cObject typoscriptObjectPath="tt_content.list.20.{data.list_type}" data="{data}"/>
+                            </f:else>
+                        </f:if>
                     </ep:container>
                 </div>
             </f:case>
@@ -101,6 +114,7 @@
             </f:case>
             <f:comment>Default</f:comment>
             <f:defaultCase>
+                <f:render section="Header" arguments="{_all}"/>
                 <f:cObject typoscriptObjectPath="tt_content.list.20.{data.list_type}" data="{data}"/>
             </f:defaultCase>
         </f:switch>

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

@@ -251,11 +251,11 @@
                                 </div>
                             </div>
                         </div>
-                        <facebook-pixel :values="{ content_ids: [ busProId ], content_name: nameInternal, content_type: 'product' }"></facebook-pixel>
                     </div>
                 </div>
             </article>
         </product-detail>
+        <div data-controller="facebook-pixel" data-facebook-pixel-props-value='{ "content_ids": [ {product.busProId -> f:format.raw()} ], "content_name": "{product.nameInternal -> f:format.raw()}", "content_type": "product" }'></div>
         <f:render partial="Faq" arguments="{faqs: product.faqs, settings: settings}"/>
     </f:section>
 

public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Teasergroup.html

@@ -8,20 +8,18 @@
 
     <f:section name="Main">
         <f:if condition="{teasers}">
-            <div class="row slider__items">
             <f:for each="{teasers}" as="teaser">
                 <f:if condition="{settings.layout} == 'rows'">
                     <f:then>
                         <f:render partial="Product/TeaserWide" section="Teaser" arguments="{teaser: teaser, dateFrom: dateFrom, dateTo: dateTo}"/>
                     </f:then>
                     <f:else>
-                            <div class="col-md-3">
+                        <li class="splide__slide">
                             <f:render partial="Product/Teaser" section="Teaser" arguments="{teaser: teaser, dateFrom: dateFrom, dateTo: dateTo}"/>
-                            </div>
+                        </li>
                     </f:else>
                 </f:if>
             </f:for>
-            </div>
             <f:if condition="{settings.showMoreLink}">
                 <p class="text-right">
                     <f:link.action pageUid="{settings.defaultStaticSearchPageUid}" class="button"

public/typo3conf/ext/ep_theme/Resources/Private/Templates/Region/Detail.html

@@ -47,7 +47,7 @@
                 </div>
             </div>
         </div>
-        <facebook-pixel :values="{ content_ids: [ <f:format.raw>{region.uid}</f:format.raw> ], content_name: '<f:format.raw>{region.nameInternal}</f:format.raw>', content_type: 'product' }"></facebook-pixel>
+        <div data-controller="facebook-pixel" data-facebook-pixel-props-value='{ "content_ids": [ {region.uid -> f:format.raw()} ], "content_name": "{region.nameInternal -> f:format.raw()}", "content_type": "product" }'></div>
     </f:section>
 
 </html>

webpack.config.js

@@ -17,14 +17,23 @@ Encore
     .enableSourceMaps(!Encore.isProduction())
     .cleanupOutputBeforeBuild()
     .enablePostCssLoader()
+    .copyFiles([
+        { from: './public/typo3conf/ext/ep_theme/Resources/Private/Assets/images', to: 'images/[name].[ext]' },
+        { from: './public/typo3conf/ext/ep_theme/Resources/Private/Assets/images/icons', to: 'images/icons/[name].[ext]' },
+        { from: './node_modules/leaflet/dist/images', to: 'images/[name].[ext]' },
+    ])
     .configureFilenames({
         js: 'js/[name].js',
         css: 'css/[name].css',
-        images: 'images/[name].[ext]'
     })
     .configureBabel(function (babelConfig) {
         babelConfig.plugins = [ '@babel/plugin-proposal-object-rest-spread', '@babel/plugin-syntax-dynamic-import' ]
     })
+    .configureBabelPresetEnv((config) => {
+        config.shippedProposals = true
+        config.useBuiltIns = 'usage'
+        config.corejs = 3
+    })
     .configureWatchOptions(function (options) {
         options.poll = 500;
         options.ignored = /node_modules|vendor|fileadmin/;
@@ -54,7 +63,12 @@ Encore
     .configureFilenames({
         js: 'js/[name].js',
         css: 'css/[name].css',
-        images: 'images/[name].[ext]'
+    })
+    .configureImageRule({
+        filename: 'images/[name].[ext]',
+    })
+    .configureFontRule({
+        filename: 'fonts/[name].[ext]',
     })
     .configureBabel(function (babelConfig) {
         babelConfig.plugins = [ '@babel/plugin-proposal-object-rest-spread', '@babel/plugin-syntax-dynamic-import' ]