EP/website-typo3
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP Complete overhaul of all js

Browse Source
This commit is contained in:
Björn Fromme
2021-07-27 14:06:11 +02:00
parent a6834e0e8c
commit 7168e05852
22 changed files with 3152 additions and 5813 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+2828 -5466
View File
File diff suppressed because it is too large Load Diff
package.json
+15 -10
View File
@@ -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",
"repository": "https://gitlab.com/dreipunktnull/ep_theme.git",
"license": "proprietary",
"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": "^8.6.5",
"autoprefixer": "^9.4.6",
"core-js": "^3.15.0",
"file-loader": "^6.2.0",
"node-sass": "^4.14.1",
"postcss-loader": "^3.0.0",
"sass-loader": "^7.3.1",
"postcss": "^8.3.5",
"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
+7
View File
@@ -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
+58 -104
View File
@@ -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 initCallback = this.initTeaserSlider;
$.each($carouselItemWrappers, function () {
initCallback($(this));
});
$carouselItemWrappers = $('.slider--thirds > .slider__items').not('.slick-initialized');
$.each($carouselItemWrappers, function () {
let numberOfSlides = $(this).children().length;
$(this).slick({
accessibility: false, // This is a hack to avoid a slick carousel bug. see: https://github.com/kenwheeler/slick/issues/1407#issuecomment-325228683
mobileFirst: true,
infinite: false,
slidesToShow: 1.15,
slidesToScroll: 1,
arrows: false,
dots: false,
responsive: [
{
breakpoint: 1200,
settings: {
slidesToShow: 3,
arrows: numberOfSlides > 3,
prevArrow: sliderPrevArrow,
nextArrow: sliderNextArrow
}
},
{
breakpoint: 992,
settings: {
slidesToShow: 2.75,
}
},
{
breakpoint: 640,
settings: {
slidesToShow: 2.5,
}
},
{
breakpoint: 384,
settings: {
slidesToShow: 1.75,
}
}
]
});
});
// let $carouselItemWrappers = $('.slider--teasers > .slider__items').not('.slick-initialized');
// let initCallback = this.initTeaserSlider;
// $.each($carouselItemWrappers, function () {
// initCallback($(this));
// });
// $carouselItemWrappers = $('.slider--thirds > .slider__items').not('.slick-initialized');
// $.each($carouselItemWrappers, function () {
// let numberOfSlides = $(this).children().length;
// $(this).slick({
// accessibility: false, // This is a hack to avoid a slick carousel bug. see: https://github.com/kenwheeler/slick/issues/1407#issuecomment-325228683
// mobileFirst: true,
// infinite: false,
// slidesToShow: 1.15,
// slidesToScroll: 1,
// arrows: false,
// dots: false,
// responsive: [
// {
// breakpoint: 1200,
// settings: {
// slidesToShow: 3,
// arrows: numberOfSlides > 3,
// prevArrow: sliderPrevArrow,
// nextArrow: sliderNextArrow
// }
// },
// {
// breakpoint: 992,
// settings: {
// slidesToShow: 2.75,
// }
// },
// {
// breakpoint: 640,
// settings: {
// slidesToShow: 2.5,
// }
// },
// {
// breakpoint: 384,
// settings: {
// 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
-59
View File
@@ -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
-31
View File
@@ -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
-18
View File
@@ -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
-2
View File
@@ -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
-4
View File
@@ -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
+10
View File
@@ -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
+60
View File
@@ -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
-3
View File
@@ -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
+12 -20
View File
@@ -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
+62 -50
View File
@@ -1,57 +1,69 @@
{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')}">
<f:for each="{slides}" as="slide" iteration="iteration">
<div class="slider__item">
<div class="herounit">
<f:alias map="{image: slide.image.0}">
<f:if condition="{image}">
<div class="herounit__image responsive-bg" style="background-image: url({f:uri.image(image: image, height: '240', cropVariant: 'sliderPageHeaderHome')})"
data-mobile="{f:uri.image(image: image, height: '240', cropVariant: 'sliderPageHeaderHome')}"
data-desktop="{f:uri.image(image: image, width: '1370', cropVariant: 'sliderPageHeaderHome')}"></div>
</f:if>
</f:alias>
<div class="herounit__main">
<div class="herounit__inner">
<div class="header-caption">
<span class="header-caption__headline">{slide.headline}</span>
<span class="header-caption__subline">{slide.subline}</span>
<f:if condition="{slide.button}">
<f:link.typolink parameter="{slide.page_uid}" class="button header-caption__button">{slide.button}</f:link.typolink>
<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">
<li class="splide__slide slider__item" data-slider-target="slide">
<div class="herounit">
<f:alias map="{image: slide.image.0}">
<f:if condition="{image}">
<div class="herounit__image responsive-bg" style="background-image: url({f:uri.image(image: image, height: '240', cropVariant: 'sliderPageHeaderHome')})"
data-mobile="{f:uri.image(image: image, height: '240', cropVariant: 'sliderPageHeaderHome')}"
data-desktop="{f:uri.image(image: image, width: '1370', cropVariant: 'sliderPageHeaderHome')}"></div>
</f:if>
</f:alias>
<div class="herounit__main">
<div class="herounit__inner">
<div class="header-caption">
<span class="header-caption__headline">{slide.headline}</span>
<span class="header-caption__subline">{slide.subline}</span>
<f:if condition="{slide.button}">
<f:link.typolink parameter="{slide.page_uid}" class="button header-caption__button">{slide.button}</f:link.typolink>
</f:if>
</div>
<f:if condition="{slide.button}">
<f:link.typolink parameter="{slide.page_uid}" class="button header__button">{slide.button}</f:link.typolink>
</f:if>
</div>
</div>
<f:if condition="{slide.button}">
<f:link.typolink parameter="{slide.page_uid}" class="button header__button">{slide.button}</f:link.typolink>
<f:if condition="{slide.skipass}">
<f:link.typolink parameter="{settings.skipassPageUid}" title="Skipass inklusive">
<f:image src="EXT:ep_theme/Resources/Public/images/badge_skipass.png"
alt="Skipass inklusive" class="herounit__badge herounit__badge--skipass" />
</f:link.typolink>
</f:if>
<f:if condition="{badge}">
<f:alias map="{badgeData: badge.0.data}">
<f:link.typolink parameter="{badgeData.link}" title="{badgeData.title}">
<div class="herounit__badge herounit__badge--custom custom-badge">
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet"
viewBox="0 0 200 200" class="custom-badge__background">
<g>
<circle id="bgouter" cx="100" cy="100" r="100"></circle>
<circle id="bginner" cx="100" cy="100" r="70"></circle>
</g>
</svg>
<div class="custom-badge__content">
<span class="custom-badge__title">{badgeData.title -> f:format.raw()}</span>
<span class="custom-badge__subtitle">{badgeData.subtitle -> f:format.raw()}</span>
</div>
</div>
</f:link.typolink>
</f:alias>
</f:if>
</div>
</div>
<f:if condition="{slide.skipass}">
<f:link.typolink parameter="{settings.skipassPageUid}" title="Skipass inklusive">
<f:image src="EXT:ep_theme/Resources/Public/images/badge_skipass.png"
alt="Skipass inklusive" class="herounit__badge herounit__badge--skipass" />
</f:link.typolink>
</f:if>
<f:if condition="{badge}">
<f:alias map="{badgeData: badge.0.data}">
<f:link.typolink parameter="{badgeData.link}" title="{badgeData.title}">
<div class="herounit__badge herounit__badge--custom custom-badge">
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet"
viewBox="0 0 200 200" class="custom-badge__background">
<g>
<circle id="bgouter" cx="100" cy="100" r="100"></circle>
<circle id="bginner" cx="100" cy="100" r="70"></circle>
</g>
</svg>
<div class="custom-badge__content">
<span class="custom-badge__title">{badgeData.title -> f:format.raw()}</span>
<span class="custom-badge__subtitle">{badgeData.subtitle -> f:format.raw()}</span>
</div>
</div>
</f:link.typolink>
</f:alias>
</f:if>
</div>
</div>
</f:for>
</li>
</f:for>
</ul>
</div>
</div>
</div>
</html>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/News/Detail/MediaContainer.html
+16 -9
View File
@@ -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 id="carousel-{id}" class="slider__items">
<f:for each="{images}" as="image" iteration="iteration">
<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>
</f:for>
<div data-controller="slider"
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
+23 -10
View File
@@ -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 class="slider__items">
<f:for each="{product.images}" as="image" iteration="iteration">
<div class="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>
</f:for>
<div data-controller="slider"
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">
<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')}">
</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
+15 -7
View File
@@ -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 class="row slider__items">
<f:for each="{teasers}" as="teaser">
<div class="col-md-4">
<f:render partial="Product/Teaser" section="Teaser" arguments="{teaser: teaser}"/>
</div>
</f:for>
<div data-controller="slider"
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">
<li class="splide__slide">
<f:render partial="Product/Teaser" section="Teaser" arguments="{teaser: teaser}"/>
</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
+16 -2
View File
@@ -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')}">
<f:cObject typoscriptObjectPath="tt_content.list.20.{data.list_type}" data="{data}"/>
<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
+1 -1
View File
@@ -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
+12 -14
View File
@@ -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">
<f:render partial="Product/Teaser" section="Teaser" arguments="{teaser: teaser, dateFrom: dateFrom, dateTo: dateTo}"/>
</div>
</f:else>
</f:if>
</f:for>
</div>
<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>
<li class="splide__slide">
<f:render partial="Product/Teaser" section="Teaser" arguments="{teaser: teaser, dateFrom: dateFrom, dateTo: dateTo}"/>
</li>
</f:else>
</f:if>
</f:for>
<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
+1 -1
View File
@@ -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
+16 -2
View File
@@ -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' ]