Merge branch 'feature/ep-events-offerlist' into develop

public/typo3conf/ext/ep_events/Classes/Controller/AjaxOfferController.php

@@ -0,0 +1,139 @@
+<?php
+namespace EP\EpEvents\Controller;
+
+use EP\EpEvents\Domain\Dto\FilterSettings;
+use EP\EpEvents\Domain\Model\Offer;
+use EP\EpEvents\Domain\Repository\OfferRepository;
+use EP\EpEvents\Service\FilterOptionsCollector;
+use EP\EpEvents\Service\SectionCssClassService;
+use EP\EpEvents\Service\SoftHyphenService;
+use TYPO3\CMS\Core\Imaging\ImageManipulation\CropVariantCollection;
+use TYPO3\CMS\Core\Resource\FileReference;
+use TYPO3\CMS\Core\Resource\FileRepository;
+use TYPO3\CMS\Extbase\Mvc\Controller\ActionController;
+use TYPO3\CMS\Extbase\Service\ImageService;
+
+class AjaxOfferController extends ActionController
+{
+    /**
+     * @var OfferRepository
+     */
+    protected $offerRepository;
+
+    /**
+     * @var FileRepository
+     */
+    protected $fileRepository;
+
+    /**
+     * @var ImageService
+     */
+    protected $imageService;
+
+    /**
+     * @param OfferRepository $offerRepository
+     * @param FileRepository $fileRepository
+     * @param ImageService $imageService
+     */
+    public function __construct(
+        OfferRepository $offerRepository,
+        FileRepository $fileRepository,
+        ImageService $imageService
+    ) {
+        parent::__construct();
+
+        $this->offerRepository = $offerRepository;
+        $this->fileRepository = $fileRepository;
+        $this->imageService = $imageService;
+    }
+
+    public function initializeListAction()
+    {
+        if (!$this->request->hasArgument('filterSettings')) {
+            $filterSettings = new FilterSettings();
+            $this->request->setArgument('filterSettings', $filterSettings);
+        } else {
+            $propertyMappingConfiguration = $this->arguments['filterSettings']->getPropertyMappingConfiguration();
+            $propertyMappingConfiguration->allowAllProperties();
+        }
+    }
+
+    /**
+     * @param \EP\EpEvents\Domain\Dto\FilterSettings $filterSettings
+     * @return string
+     */
+    public function listAction(FilterSettings $filterSettings)
+    {
+        $offers = $this->offerRepository->findByFilterSettings($filterSettings);
+        $filterOptions = FilterOptionsCollector::process($offers);
+        $listData = [];
+
+        foreach ($offers as $uid => $offer) {
+            /** @var Offer $offer */
+            $offerDetailPageUri = $this->getDetailPageUri($offer['detailPageUid']);
+
+            $teaserImageUri = $this->getTeaserImageUri($uid);
+            if (!$teaserImageMobileUri = $this->getTeaserImageUri($uid, 'image_teaser_m', 'mobile')) {
+                $teaserImageMobileUri = $this->getTeaserImageUri($uid, 'image_teaser', 'mobile');
+            }
+
+            $listData[] = [
+                'name' => SoftHyphenService::replace($offer['name']),
+                'cssClass' => SectionCssClassService::getClass($offer['configuratorType']),
+                'detailPageUri' => $offerDetailPageUri,
+                'locationName' => $offer['locationName'],
+                'teaserImage' => $teaserImageUri,
+                'teaserImageMobile' => $teaserImageMobileUri,
+            ];
+        }
+
+        return json_encode([
+            'offers' => $listData,
+            'filterSettings' => $filterSettings,
+            'filterOptions' => $filterOptions,
+        ]);
+    }
+
+    /**
+     * @param int $detailPageUid
+     * @return string
+     */
+    protected function getDetailPageUri($detailPageUid)
+    {
+        return $this
+            ->uriBuilder
+            ->reset()
+            ->setCreateAbsoluteUri(true)
+            ->setTargetPageUid($detailPageUid)
+            ->buildFrontendUri();
+    }
+
+    /**
+     * @param int $offerUid
+     * @param string $field
+     * @param string $cropVariant
+     * @return string
+     */
+    protected function getTeaserImageUri($offerUid, $field = 'image_teaser', $cropVariant = 'default')
+    {
+        $teaserImages = $this->fileRepository->findByRelation(
+            'tx_epevents_domain_model_offer',
+            $field,
+            $offerUid
+        );
+
+        if (count($teaserImages) === 0) {
+            return null;
+        }
+
+        $teaserImage = reset($teaserImages);
+
+        $instructions = ['width' => '500'];
+        $cropVariantCollection = CropVariantCollection::create((string)$teaserImage->getProperty('crop'));
+        $cropArea = $cropVariantCollection->getCropArea($cropVariant);
+        $instructions['crop'] = $cropArea->isEmpty() ? null : $cropArea->makeAbsoluteBasedOnFile($teaserImage);
+        $processedTeaserImage = $this->imageService->applyProcessingInstructions($teaserImage, $instructions);
+
+        return $this->imageService->getImageUri($processedTeaserImage, true);
+    }
+}

public/typo3conf/ext/ep_events/Classes/Controller/OfferController.php

@@ -31,6 +31,7 @@ use EP\EpEvents\Domain\Model\Offer;
 use EP\EpEvents\Domain\Repository\OfferRepository;
 use TYPO3\CMS\Core\Utility\GeneralUtility;
 use TYPO3\CMS\Extbase\Mvc\Controller\ActionController;
+use TYPO3\CMS\Extbase\Utility\LocalizationUtility;
 
 class OfferController extends ActionController
 {
@@ -65,6 +66,22 @@ class OfferController extends ActionController
         $this->view->assign('content', $content);
     }
 
+    public function listAction()
+    {
+        $content = $this->configurationManager->getContentObject()->data;
+        $language = [
+            'type' => LocalizationUtility::translate('tx_epevents.label.configurator_travel_type', 'ep_events'),
+            'destination' => LocalizationUtility::translate('tx_epevents.label.configurator_destination', 'ep_events'),
+            'distance' => LocalizationUtility::translate('tx_epevents.label.configurator_distance', 'ep_events'),
+            'hotel' => LocalizationUtility::translate('tx_epevents.label.configurator_accommodation', 'ep_events'),
+            'programme' => LocalizationUtility::translate('tx_epevents.label.configurator_programme', 'ep_events'),
+            'noSelection' => LocalizationUtility::translate('tx_epevents.label.configurator_please_select', 'ep_events'),
+            'reset' => LocalizationUtility::translate('tx_epevents.label.reset', 'ep_events'),
+        ];
+        $this->view->assign('content', $content);
+        $this->view->assign('language', json_encode($language));
+    }
+
     /**
      * @param Offer $offer
      */

public/typo3conf/ext/ep_events/Classes/Domain/Dto/FilterSettings.php

@@ -0,0 +1,110 @@
+<?php
+namespace EP\EpEvents\Domain\Dto;
+
+class FilterSettings
+{
+    /**
+     * @var int
+     */
+    protected $travelType;
+
+    /**
+     * @var int
+     */
+    protected $locationType;
+
+    /**
+     * @var int
+     */
+    protected $locationDistance;
+
+    /**
+     * @var int
+     */
+    protected $hotelType;
+
+    /**
+     * @var int
+     */
+    protected $activityType;
+
+    /**
+     * @return int
+     */
+    public function getTravelType()
+    {
+        return $this->travelType;
+    }
+
+    /**
+     * @param int $travelType
+     */
+    public function setTravelType($travelType)
+    {
+        $this->travelType = $travelType;
+    }
+
+    /**
+     * @return int
+     */
+    public function getLocationType()
+    {
+        return $this->locationType;
+    }
+
+    /**
+     * @param int $locationType
+     */
+    public function setLocationType($locationType)
+    {
+        $this->locationType = $locationType;
+    }
+
+    /**
+     * @return int
+     */
+    public function getLocationDistance()
+    {
+        return $this->locationDistance;
+    }
+
+    /**
+     * @param int $locationDistance
+     */
+    public function setLocationDistance($locationDistance)
+    {
+        $this->locationDistance = $locationDistance;
+    }
+
+    /**
+     * @return int
+     */
+    public function getHotelType()
+    {
+        return $this->hotelType;
+    }
+
+    /**
+     * @param int $hotelType
+     */
+    public function setHotelType($hotelType)
+    {
+        $this->hotelType = $hotelType;
+    }
+
+    /**
+     * @return int
+     */
+    public function getActivityType()
+    {
+        return $this->activityType;
+    }
+
+    /**
+     * @param int $activityType
+     */
+    public function setActivityType($activityType)
+    {
+        $this->activityType = $activityType;
+    }
+}

public/typo3conf/ext/ep_events/Classes/Domain/Repository/OfferRepository.php

@@ -27,8 +27,10 @@ namespace EP\EpEvents\Domain\Repository;
  *  This copyright notice MUST APPEAR in all copies of the script!
  ***************************************************************/
 
+use EP\EpEvents\Domain\Dto\FilterSettings;
 use EP\EpEvents\Domain\Model\Activity;
 use EP\EpEvents\Domain\Model\Offer;
+use TYPO3\CMS\Core\Database\ConnectionPool;
 use TYPO3\CMS\Extbase\Persistence\QueryInterface;
 
 class OfferRepository extends AbstractRepository
@@ -74,6 +76,72 @@ class OfferRepository extends AbstractRepository
         return $query->matching($query->logicalAnd($constraints))->execute();
     }
 
+    /**
+     * @param FilterSettings $filterSettings
+     * @return array
+     */
+    public function findByFilterSettings(FilterSettings $filterSettings)
+    {
+        /** @var ConnectionPool $connectionPool */
+        $connectionPool = $this->objectManager->get(ConnectionPool::class);
+        $qb = $connectionPool->getQueryBuilderForTable('tx_epevents_domain_model_offer');
+
+        $qb->select(
+            'o.uid AS uid', 'o.name AS name', 'o.configurator_type AS configuratorType',
+                'o.detail_page AS detailPageUid',
+                'l.name AS locationName', 'l.configurator_type AS locationType',
+                'l.configurator_distance AS locationDistance', 'h.configurator_type AS hotelType',
+                'a.configurator_type AS activityType'
+            )
+            ->from('tx_epevents_domain_model_offer', 'o')
+            ->join('o', 'tx_epevents_domain_model_location', 'l', 'o.location = l.uid')
+            ->join('o', 'tx_epevents_domain_model_hotel', 'h', 'o.hotel = h.uid')
+            ->join('o', 'tx_epevents_offer_activity_mm', 'mm', 'mm.uid_local = o.uid')
+            ->join('mm', 'tx_epevents_domain_model_activity', 'a', 'mm.uid_foreign = a.uid')
+            ->where($qb->expr()->neq('o.type', Offer::TYPE_CLIENT))
+            ->orderBy('l.name', 'ASC')
+            ->addOrderBy('o.name', 'ASC');
+
+        if ($filterSettings->getTravelType() > 0) {
+            $qb->andWhere($qb->expr()->eq(
+                'o.configurator_type', $qb->createNamedParameter($filterSettings->getTravelType())
+            ));
+        }
+        if ($filterSettings->getLocationDistance() > 0) {
+            $qb->andWhere($qb->expr()->eq('l.configurator_distance', $filterSettings->getLocationDistance()));
+        }
+        if ($filterSettings->getLocationType() > 0) {
+            $qb->andWhere($qb->expr()->eq('l.configurator_type', $filterSettings->getLocationType()));
+        }
+        if ($filterSettings->getHotelType() > 0) {
+            $qb->andWhere($qb->expr()->eq('h.configurator_type', $filterSettings->getHotelType()));
+        }
+        if ($filterSettings->getActivityType() > 0) {
+            $qb->andWhere($qb->expr()->eq('a.configurator_type', $filterSettings->getActivityType()));
+        }
+
+        $result = $qb->execute()->fetchAll();
+        $offers = [];
+
+        foreach ($result as $row) {
+            if (!array_key_exists($row['uid'], $offers)) {
+                $offers[$row['uid']] = [
+                    'name' => $row['name'],
+                    'configuratorType' => $row['configuratorType'],
+                    'detailPageUid' => $row['detailPageUid'],
+                    'locationType' => $row['locationType'],
+                    'locationName' => $row['locationName'],
+                    'locationDistance' => $row['locationDistance'],
+                    'hotelType' => $row['hotelType'],
+                    'activityTypes' => [],
+                ];
+            }
+            $offers[$row['uid']]['activityTypes'][] = $row['activityType'];
+        }
+
+        return $offers;
+    }
+
     /**
      * @param Activity $activity
      * @return array|\TYPO3\CMS\Extbase\Persistence\QueryResultInterface

public/typo3conf/ext/ep_events/Classes/Service/FilterOptionsCollector.php

@@ -0,0 +1,67 @@
+<?php
+namespace EP\EpEvents\Service;
+
+use EP\EpEvents\Domain\Model\Offer;
+use TYPO3\CMS\Extbase\Utility\LocalizationUtility;
+
+class FilterOptionsCollector
+{
+    /**
+     * @param array $offers
+     * @return array
+     */
+    public static function process(array $offers)
+    {
+        $settings = [
+            'travelTypes' => [],
+            'locationTypes' => [],
+            'locationDistances' => [],
+            'hotelTypes' => [],
+            'activityTypes' => [],
+        ];
+
+        foreach ($offers as $offer) {
+            /** @var Offer $offer */
+            if (!array_key_exists($offer['configuratorType'], $settings['travelTypes'])) {
+                $settings['travelTypes'][$offer['configuratorType']] = [
+                    'type' => $offer['configuratorType'],
+                    'label' => LocalizationUtility::translate(sprintf('tx_epevents_domain_model_traveltype.configurator_label.%d', $offer['configuratorType']), 'ep_events'),
+                ];
+            }
+            if (!array_key_exists($offer['locationType'], $settings['locationTypes'])) {
+                $settings['locationTypes'][$offer['locationType']] = [
+                    'type' => $offer['locationType'],
+                    'label' => LocalizationUtility::translate(sprintf('tx_epevents_domain_model_location.configurator_label.%d', $offer['locationType']), 'ep_events'),
+                ];
+            }
+            if (!array_key_exists($offer['locationDistance'], $settings['locationDistances'])) {
+                $settings['locationDistances'][$offer['locationDistance']] = [
+                    'type' => $offer['locationDistance'],
+                    'label' => LocalizationUtility::translate(sprintf('tx_epevents_domain_model_distance.configurator_label.%d', $offer['locationDistance']), 'ep_events'),
+                ];
+            }
+            if (!array_key_exists($offer['hotelType'], $settings['hotelTypes'])) {
+                $settings['hotelTypes'][$offer['hotelType']] = [
+                    'type' => $offer['hotelType'],
+                    'label' => LocalizationUtility::translate(sprintf('tx_epevents_domain_model_hotel.configurator_label.%d', $offer['hotelType']), 'ep_events'),
+                ];
+            }
+            foreach ($offer['activityTypes'] as $activityType) {
+                if (!array_key_exists($activityType, $settings['activityTypes'])) {
+                    $settings['activityTypes'][$activityType] = [
+                        'type' => $activityType,
+                        'label' => LocalizationUtility::translate(sprintf('tx_epevents_domain_model_activity.configurator_label.%d', $activityType), 'ep_events'),
+                    ];
+                }
+            }
+        }
+
+        sort($settings['travelTypes']);
+        sort($settings['locationTypes']);
+        sort($settings['locationDistances']);
+        sort($settings['hotelTypes']);
+        sort($settings['activityTypes']);
+
+        return $settings;
+    }
+}

public/typo3conf/ext/ep_events/Classes/Service/SectionCssClassService.php

@@ -0,0 +1,28 @@
+<?php
+namespace EP\EpEvents\Service;
+
+class SectionCssClassService
+{
+    /**
+     * @var array
+     */
+    protected static $cssClasses = [
+        1 => 'incentives',
+        2 => 'teambuilding',
+        3 => 'meetings',
+        4 => 'events',
+    ];
+
+    /**
+     * @param int $sectionValue
+     * @return string
+     */
+    public static function getClass($sectionValue = null)
+    {
+        if (array_key_exists($sectionValue, static::$cssClasses)) {
+            return 'section-' . static::$cssClasses[$sectionValue];
+        }
+
+        return 'section-default';
+    }
+}

public/typo3conf/ext/ep_events/Classes/Service/SoftHyphenService.php

@@ -0,0 +1,14 @@
+<?php
+namespace EP\EpEvents\Service;
+
+class SoftHyphenService
+{
+    /**
+     * @param $string
+     * @return string
+     */
+    public static function replace($string)
+    {
+        return str_replace('--', '&shy;', $string);
+    }
+}

public/typo3conf/ext/ep_events/Classes/ViewHelpers/SectionCssClassViewHelper.php

@@ -27,6 +27,7 @@ namespace EP\EpEvents\ViewHelpers;
  *  This copyright notice MUST APPEAR in all copies of the script!
  ***************************************************************/
 
+use EP\EpEvents\Service\SectionCssClassService;
 use TYPO3Fluid\Fluid\Core\Rendering\RenderingContextInterface;
 use TYPO3Fluid\Fluid\Core\ViewHelper\AbstractViewHelper;
 use TYPO3Fluid\Fluid\Core\ViewHelper\Traits\CompileWithRenderStatic;
@@ -35,16 +36,6 @@ class SectionCssClassViewHelper extends AbstractViewHelper
 {
     use CompileWithRenderStatic;
 
-    /**
-     * @var array
-     */
-    protected static $cssClasses = [
-        1 => 'incentives',
-        2 => 'teambuilding',
-        3 => 'meetings',
-        4 => 'events',
-    ];
-
     public function initializeArguments()
     {
         parent::initializeArguments();
@@ -68,11 +59,8 @@ class SectionCssClassViewHelper extends AbstractViewHelper
         if ($sectionValue === null) {
             $sectionValue = $arguments['sectionValue'];
         }
-        if (array_key_exists($sectionValue, static::$cssClasses)) {
-            return 'section-' . static::$cssClasses[$sectionValue];
-        }
 
-        return 'section-default';
+        return SectionCssClassService::getClass($sectionValue);
     }
 
 }

public/typo3conf/ext/ep_events/Classes/ViewHelpers/SoftHyphenViewHelper.php

@@ -27,6 +27,7 @@ namespace EP\EpEvents\ViewHelpers;
  *  This copyright notice MUST APPEAR in all copies of the script!
  ***************************************************************/
 
+use EP\EpEvents\Service\SoftHyphenService;
 use TYPO3Fluid\Fluid\Core\Rendering\RenderingContextInterface;
 use TYPO3Fluid\Fluid\Core\ViewHelper\AbstractViewHelper;
 use TYPO3Fluid\Fluid\Core\ViewHelper\Traits\CompileWithRenderStatic;
@@ -64,7 +65,7 @@ class SoftHyphenViewHelper extends AbstractViewHelper
             $string = $arguments['string'];
         }
 
-        return str_replace('--', '­', $string);
+        return SoftHyphenService::replace($string);
     }
 
 }

public/typo3conf/ext/ep_events/Configuration/TCA/Overrides/tt_content.php

@@ -59,6 +59,12 @@ call_user_func(function() {
         'EP Events: Reisebeispiele Slider'
     );
 
+    \TYPO3\CMS\Extbase\Utility\ExtensionUtility::registerPlugin(
+        'EP.EpEvents',
+        'OfferList',
+        'EP Events: Reisebeispiele Übersicht'
+    );
+
     \TYPO3\CMS\Extbase\Utility\ExtensionUtility::registerPlugin(
         'EP.EpEvents',
         'Testimonials',

public/typo3conf/ext/ep_events/Configuration/TypoScript/Page/Ajax.typoscript

@@ -24,6 +24,9 @@ ajax_page_json {
                 1 = processInquiryForm
                 2 = processConfiguratorForm
             }
+            AjaxOffer {
+                1 = list
+            }
         }
         features.requireCHashArgumentForActionArguments = 0
         settings =< plugin.tx_epevents.settings

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

@@ -6,6 +6,9 @@ import Vue from 'vue'
 import $ from 'jquery'
 import VueSession from 'vue-session'
 
+import 'lazysizes';
+import 'lazysizes/plugins/attrchange/ls.attrchange';
+
 const slick = require('slick-carousel');
 const Sticky = require('sticky-js');
 const $window = $(window);
@@ -15,6 +18,7 @@ Vue.use(VueSession);
 import InquiryForm from './components/InquiryForm.vue'
 import Configurator from './components/Configurator.vue'
 import TeaserCarousel from './components/TeaserCarousel.vue'
+import OfferTeasers from './components/OfferTeasers.vue'
 
 const carouselArrowLeft = '<svg class="carousel__arrow carousel__arrow--prev" viewBox="0 0 56 56"><polyline points="40,5 16,28 40,51"></polyline></svg>';
 const carouselArrowRight = '<svg class="carousel__arrow carousel__arrow--next" viewBox="0 0 56 56"><polyline points="16,5 40,28 16,51"></polyline></svg>';
@@ -24,7 +28,8 @@ new Vue({
     components: {
         InquiryForm,
         Configurator,
-        TeaserCarousel
+        TeaserCarousel,
+        OfferTeasers
     },
     data () {
         return {

public/typo3conf/ext/ep_events/Resources/Private/Assets/js/components/OfferTeasers.vue

@@ -0,0 +1,131 @@
+<template>
+    <div class="offerlist">
+        <div class="offerlist__filterpanel">
+            <form class="form form--horizontal">
+                <div class="form__item">
+                    <label>{{ language.type }}</label>
+                    <select v-model="filterSettings.travelType" @change="load" class="form__field">
+                        <option value="0">{{ language.noSelection }}</option>
+                        <option v-for="item in filterOptions.travelTypes" :value="item.type">{{ item.label }}</option>
+                    </select>
+                </div>
+                <div class="form__item">
+                    <label>{{ language.destination }}</label>
+                    <select v-model="filterSettings.locationType" @change="load" class="form__field">
+                        <option value="0">{{ language.noSelection }}</option>
+                        <option v-for="item in filterOptions.locationTypes" :value="item.type">{{ item.label }}</option>
+                    </select>
+                </div>
+                <div class="form__item">
+                    <label>{{ language.distance }}</label>
+                    <select v-model="filterSettings.locationDistance" @change="load" class="form__field">
+                        <option value="0">{{ language.noSelection }}</option>
+                        <option v-for="item in filterOptions.locationDistances" :value="item.type">{{ item.label }}
+                        </option>
+                    </select>
+                </div>
+                <div class="form__item">
+                    <label>{{ language.hotel }}</label>
+                    <select v-model="filterSettings.hotelType" @change="load" class="form__field">
+                        <option value="0">{{ language.noSelection }}</option>
+                        <option v-for="item in filterOptions.hotelTypes" :value="item.type">{{ item.label }}</option>
+                    </select>
+                </div>
+                <div class="form__item">
+                    <label>{{ language.programme }}</label>
+                    <select v-model="filterSettings.activityType" @change="load" class="form__field">
+                        <option value="0">{{ language.noSelection }}</option>
+                        <option v-for="item in filterOptions.activityTypes" :value="item.type">{{ item.label }}</option>
+                    </select>
+                </div>
+                <div class="form__item form__item--no-label">
+                    <button type="submit" @click.prevent="init" class="form__button">{{ language.reset }}</button>
+                </div>
+            </form>
+        </div>
+        <div class="offerlist__teasers">
+            <a v-for="offer in offers"
+               :href="offer.detailPageUri"
+               class="offerlist-item"
+               :class="offer.cssClass"
+               :title="'Beispielangebot ' + offer.name + offer.locationName">
+                <div class="card card--no-form offerlist-item__card">
+                    <div class="card__inner">
+                        <picture>
+                            <source media="(max-width: 512px)" :data-srcset="offer.teaserImageMobile +  ' 500w'"/>
+                            <img class="card__image scale lazyload" data-sizes="auto"
+                                 :data-src="offer.teaserImage" alt="">
+                        </picture>
+                        <div class="card__caption">
+                            <span class="card__subtitle" v-html="offer.name"></span>
+                            <span class="card__title">{{ offer.locationName }}</span>
+                        </div>
+                    </div>
+                </div>
+            </a>
+        </div>
+        <div class="offerlist__overlay" v-show="loading"></div>
+    </div>
+</template>
+
+<script>
+    import axios from 'axios';
+    import $ from 'jquery';
+
+    export default {
+        name: 'OfferTeasers',
+        data() {
+            return {
+                offers: [],
+                filterSettings: {},
+                filterOptions: {},
+                loading: false,
+            }
+        },
+        props: {
+            endpointUri: {
+                type: String,
+                required: true
+            },
+            language: {
+                type: Object,
+                required: true
+            }
+        },
+        methods: {
+            load() {
+                this.loading = true;
+                sessionStorage.setItem('filterSettings', JSON.stringify(this.filterSettings));
+                axios({
+                    url: this.endpointUri,
+                    method: 'post',
+                    data: $.param({'tx_epevents_ajax[filterSettings]': this.filterSettings})
+                }).then(response => {
+                    this.offers = response.data.offers;
+                    this.filterOptions = response.data.filterOptions;
+                    this.loading = false;
+                }).catch(() => {
+                    this.loading = false;
+                });
+            },
+            init() {
+                this.filterSettings = {
+                    travelType: 0,
+                    locationType: 0,
+                    locationDistance: 0,
+                    hotelType: 0,
+                    activityType: 0
+                };
+                this.load();
+            }
+        },
+        mounted() {
+            if (sessionStorage.getItem('filterSettings')) {
+                this.filterSettings = JSON.parse(sessionStorage.getItem('filterSettings'));
+                this.load();
+            } else {
+                this.init();
+            }
+        }
+    }
+</script>

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

@@ -10,7 +10,7 @@ require('cookieconsent/build/cookieconsent.min.css');
 require('flatpickr/dist/flatpickr.css');
 
 // Require main app
-require('./app');
+require('./_app');
 
 // Require main styles
 require('../scss/main.scss');

public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_forms.scss

@@ -1,122 +1,147 @@
 .form {
-    margin: 0;
+  margin: 0;
-    padding: 0;
+  padding: 0;
-    position: relative;
+  position: relative;
+  max-width: 100%;
+
+  @include mq($from: desktop) {
+    &:not(&--horizontal) {
+      max-width: 75%;
+    }
+  }
+
+  &--box {
     max-width: 100%;
+  }
 
-    @include mq($from: desktop) {
+  &--horizontal {
-        max-width: 75%;
+    width: 100%;
-    }
+    @include mq($from: tablet) {
-
+      display: flex;
-    &--box {
+      justify-content: space-between;
-        max-width: 100%;
+      align-items: center;
+      flex-wrap: wrap;
     }
+  }
 }
 
 .form__item {
+  display: block;
+  margin-bottom: 8px;
+
+  &--textarea {
+    padding-top: 16px;
+  }
+
+  &--button {
+    padding-top: 16px;
+  }
+
+  &--radios {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    background-color: $color-brand-light;
+    color: white;
+    border-radius: 8px;
+  }
+
+  &--mobile {
     display: block;
-    margin-bottom: 8px;
 
-    &--textarea {
+    @include mq($from: tablet) {
-        padding-top: 16px;
+      display: none;
+    }
+  }
+
+  &--tablet {
+    display: none;
+
+    @include mq($from: tablet, $until: desktop) {
+      display: block;
+    }
+  }
+
+  &--desktop {
+    display: none;
+
+    @include mq($from: desktop) {
+      display: block;
+    }
+  }
+
+  .form--horizontal & {
+    width: 100%;
+    padding: 0 8px;
+
+    &--no-label {
+      padding-top: 20px;
     }
 
-    &--button {
+    @include mq($from: tablet) {
-        padding-top: 16px;
+      width: 33.3333%;
-    }
-
-    &--radios {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        justify-content: space-between;
-        background-color: $color-brand-light;
-        color: white;
-        border-radius: 8px;
-    }
-
-    &--mobile {
-        display: block;
-
-        @include mq($from: tablet) {
-            display: none;
-        }
-    }
-
-    &--tablet {
-        display: none;
-
-        @include mq($from: tablet, $until: desktop) {
-            display: block;
-        }
-    }
-
-    &--desktop {
-        display: none;
-
-        @include mq($from: desktop) {
-            display: block;
-        }
     }
+  }
 }
 
 .form__item__error {
-    padding: 8px;
+  padding: 8px;
-    font-size: 90%;
+  font-size: 90%;
 }
 
 .form__field {
-    @include nooutline;
+  @include nooutline;
-    border: none;
+  border: none;
-    border-radius: 8px;
+  border-radius: 8px;
-    width: 100%;
+  width: 100%;
-    padding: 8px 16px;
+  padding: 8px 16px;
-    color: white;
+  color: white;
+  background-color: $color-brand-light;
+
+  .form--box & {
     background-color: $color-brand-light;
+    color: white;
+  }
 
-    .form--box & {
+  &--textarea {
-        background-color: $color-brand-light;
+    resize: vertical;
-        color: white;
+  }
-    }
 
-    &--textarea {
+  &--radio {
-        resize: vertical;
+    background-color: transparent;
+    display: block;
+    padding: 8px;
+    width: 100%;
+    @include mq($from: tablet) {
+      width: 50%;
     }
+    @include mq($from: desktop) {
+      width: 25%;
+    }
+  }
 
-    &--radio {
+  &--configurator {
-        background-color: transparent;
+    background-color: rgba(white, 0.6);
-        display: block;
+  }
-        padding: 8px;
-        width: 100%;
-        @include mq($from: tablet) {
-            width: 50%;
-        }
-        @include mq($from: desktop) {
-            width: 25%;
-        }
-    }
 
-    &--configurator {
+  .has-errors & {
-        background-color: rgba(white, 0.6);
+    border: 1px solid $color-formerror;
-    }
+  }
-
-    .has-errors & {
-        border: 1px solid $color-formerror;
-    }
 }
 
 .form__link {
-    display: block;
+  display: block;
-    font-size: 80%;
+  font-size: 80%;
 
-    &--indent {
+  &--indent {
-        text-align: right;
+    text-align: right;
-    }
+  }
 
-    .configurator & {
+  .configurator & {
-        color: white;
+    color: white;
-        padding-top: 16px;
+    padding-top: 16px;
-    }
+  }
 }
 
 .form__text {
@@ -128,101 +153,101 @@
 }
 
 .form__button {
-    outline: none;
+  outline: none;
-    display: block;
+  display: block;
+  width: 100%;
+  color: white;
+  background-color: $color-brand-secondary;
+  border: none;
+  font-weight: 700;
+  text-decoration: none;
+  text-align: center;
+  padding: 8px 32px;
+  margin-bottom: 16px;
+
+  @include mq($from: tablet) {
+    display: inline-block;
+    width: auto;
+    margin-bottom: 0;
+  }
+
+  .form--box & {
     width: 100%;
-    color: white;
+    font-size: 20px;
-    background-color: $color-brand-secondary;
+    padding: 8px 0;
-    border: none;
+  }
-    font-weight: 700;
-    text-decoration: none;
-    text-align: center;
-    padding: 8px 32px;
-    margin-bottom: 16px;
-
-    @include mq($from: tablet) {
-        display: inline-block;
-        width: auto;
-        margin-bottom: 0;
-    }
-
-    .form--box & {
-        width: 100%;
-        font-size: 20px;
-        padding: 8px 0;
-    }
 }
 
 .form__overlay {
-    @include size(100%);
+  @include size(100%);
-    position: absolute;
+  position: absolute;
-    top: 0;
+  top: 0;
-    left: 0;
+  left: 0;
-    display: flex;
+  display: flex;
-    flex-wrap: wrap;
+  flex-wrap: wrap;
-    justify-content: center;
+  justify-content: center;
-    align-items: center;
+  align-items: center;
-    background-color: rgba($color-divider, 0.75);
+  background-color: rgba($color-divider, 0.75);
 
-    .form--box & {
+  .form--box & {
-        background-color: rgba($color-brand-primary, 0.75);
+    background-color: rgba($color-brand-primary, 0.75);
-    }
+  }
 }
 
 .form__overlay__text {
-    text-align: center;
+  text-align: center;
 }
 
 ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
-    color: white;
+  color: white;
-    text-transform: uppercase;
+  text-transform: uppercase;
-    font-size: 90%;
+  font-size: 90%;
 }
 
 :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
-    color: white;
+  color: white;
-    opacity: 1;
+  opacity: 1;
-    text-transform: uppercase;
+  text-transform: uppercase;
-    font-size: 90%;
+  font-size: 90%;
 }
 
 ::-moz-placeholder { /* Mozilla Firefox 19+ */
-    color: white;
+  color: white;
-    opacity: 1;
+  opacity: 1;
-    text-transform: uppercase;
+  text-transform: uppercase;
-    font-size: 90%;
+  font-size: 90%;
 }
 
 :-ms-input-placeholder { /* Internet Explorer 10-11 */
-    color: white;
+  color: white;
-    text-transform: uppercase;
+  text-transform: uppercase;
-    font-size: 90%;
+  font-size: 90%;
 }
 
 ::-ms-input-placeholder { /* Microsoft Edge */
-    color: white;
+  color: white;
-    text-transform: uppercase;
+  text-transform: uppercase;
-    font-size: 90%;
+  font-size: 90%;
 }
 
 .form--box {
-    ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
+  ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
-        color: white;
+    color: white;
-    }
+  }
 
-    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+  :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
-        color: white;
+    color: white;
-    }
+  }
 
-    ::-moz-placeholder { /* Mozilla Firefox 19+ */
+  ::-moz-placeholder { /* Mozilla Firefox 19+ */
-        color: white;
+    color: white;
-    }
+  }
 
-    :-ms-input-placeholder { /* Internet Explorer 10-11 */
+  :-ms-input-placeholder { /* Internet Explorer 10-11 */
-        color: white;
+    color: white;
-    }
+  }
 
-    ::-ms-input-placeholder { /* Microsoft Edge */
+  ::-ms-input-placeholder { /* Microsoft Edge */
-        color: white;
+    color: white;
-    }
+  }
 }

public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_offerlist.scss

@@ -0,0 +1,35 @@
+.offerlist {
+  position: relative;
+}
+
+.offerlist__overlay {
+  @include size(100%);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  background: rgba(white, 0.85) url(../images/spinner_default.gif) no-repeat 50% 5%;
+}
+
+.offerlist__teasers {
+  @include mq($from: tablet) {
+    display: flex;
+    flex-wrap: wrap;
+  }
+}
+
+.offerlist-item {
+  width: 100%;
+  text-decoration: none;
+  margin-bottom: 32px;
+  display: block;
+  @include mq($from: mobile) {
+    display: flex;
+  }
+  @include mq($from: tablet) {
+    width: 50%;
+  }
+  @include mq($from: desktop) {
+    width: 33.3333%;
+  }
+}

public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/main.scss

@@ -35,6 +35,7 @@ $output-bourbon-deprecation-warnings: false;
 @import "team";
 @import "cookieconsent";
 @import "search";
+@import "offerlist";
 @import "paginator";
 @import "news";
 @import "datepicker";

public/typo3conf/ext/ep_events/Resources/Private/Language/de.locallang.xlf

@@ -58,6 +58,15 @@
 			<trans-unit id="tx_epevents_domain_model_location.configurator_label.4">
 				<target>Spezial</target>
 			</trans-unit>
+			<trans-unit id="tx_epevents_domain_model_distance.configurator_label.1">
+				<target>Deutschland</target>
+			</trans-unit>
+			<trans-unit id="tx_epevents_domain_model_distance.configurator_label.2">
+				<target>Europa</target>
+			</trans-unit>
+			<trans-unit id="tx_epevents_domain_model_distance.configurator_label.3">
+				<target>Welt</target>
+			</trans-unit>
 			<trans-unit id="tx_epevents_domain_model_activity.configurator_label.1">
 				<target>Outdoor &amp; Action</target>
 			</trans-unit>
@@ -220,6 +229,9 @@
 			<trans-unit id="tx_epevents.label.search">
 				<target>Suchen</target>
 			</trans-unit>
+			<trans-unit id="tx_epevents.label.reset">
+				<target>Reset</target>
+			</trans-unit>
 			<trans-unit id="tx_epevents.label.search_intro">
 				<target><![CDATA[Ihre Suche nach <i>%s</i> ergab %d Treffer:]]></target>
 			</trans-unit>

public/typo3conf/ext/ep_events/Resources/Private/Language/locallang.xlf

@@ -58,6 +58,15 @@
 			<trans-unit id="tx_epevents_domain_model_location.configurator_label.4">
 				<source>Special</source>
 			</trans-unit>
+			<trans-unit id="tx_epevents_domain_model_distance.configurator_label.1">
+				<source>Germany</source>
+			</trans-unit>
+			<trans-unit id="tx_epevents_domain_model_distance.configurator_label.2">
+				<source>Europe</source>
+			</trans-unit>
+			<trans-unit id="tx_epevents_domain_model_distance.configurator_label.3">
+				<source>World</source>
+			</trans-unit>
 			<trans-unit id="tx_epevents_domain_model_activity.configurator_label.1">
 				<source>Outdoor &amp; Action</source>
 			</trans-unit>
@@ -220,6 +229,9 @@
 			<trans-unit id="tx_epevents.label.search">
 				<source>Search</source>
 			</trans-unit>
+			<trans-unit id="tx_epevents.label.reset">
+				<source>Reset</source>
+			</trans-unit>
 			<trans-unit id="tx_epevents.label.search_intro">
 				<source><![CDATA[Your search for <i>%s</i> results in %d findings:]]></source>
 			</trans-unit>

public/typo3conf/ext/ep_events/Resources/Private/Partials/OfferTeasers.html

@@ -19,14 +19,14 @@
                                     <f:if condition="{offer.imageTeaserMobile}">
                                         <f:then>
                                             <source media="(max-width: 512px)"
-                                                    srcset="{f:uri.image(image: offer.imageTeaserMobile, width: '500', cropVariant: 'default')} 500w"/>
+                                                    srcset="{f:uri.image(image: offer.imageTeaserMobile, width: '500')} 500w"/>
                                         </f:then>
                                         <f:else>
                                             <source media="(max-width: 512px)"
                                                     srcset="{f:uri.image(image: offer.imageTeaser, width: '500', cropVariant: 'mobile')} 500w"/>
                                         </f:else>
                                     </f:if>
-                                    <img class="card__image scale" data-lazy="{f:uri.image(image: offer.imageTeaser, cropVariant: 'default', width: '500')}" alt="{offer.imageTeaser.alternative}">
+                                    <img class="card__image scale" data-lazy="{f:uri.image(image: offer.imageTeaser, width: '500')}" alt="{offer.imageTeaser.alternative}">
                                 </picture>
                             </f:then>
                             <f:else>

public/typo3conf/ext/ep_events/Resources/Private/Templates/Offer/List.html

@@ -0,0 +1,10 @@
+<div xmlns="http://www.w3.org/1999/xhtml" lang="en"
+      xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
+
+    <f:layout name="Default"/>
+
+    <f:section name="Main">
+        <offer-teasers endpoint-uri="{f:uri.action(pageUid: settings.ajaxPageUid, action: 'list', controller: 'AjaxOffer', pluginName: 'ajax', pageType: '1703')}" :language='{language}'></offer-teasers>
+    </f:section>
+
+</div>

public/typo3conf/ext/ep_events/ext_localconf.php

@@ -26,6 +26,17 @@ call_user_func(function() {
         ]
     );
 
+    \TYPO3\CMS\Extbase\Utility\ExtensionUtility::configurePlugin(
+        'EP.EpEvents',
+        'OfferList',
+        [
+            'Offer' => 'list',
+        ],
+        [
+            'Offer' => '',
+        ]
+    );
+
     \TYPO3\CMS\Extbase\Utility\ExtensionUtility::configurePlugin(
         'EP.EpEvents',
         'Testimonials',
@@ -130,9 +141,11 @@ call_user_func(function() {
         'Ajax',
         [
             'AjaxForm' => 'processInquiryForm, processConfiguratorForm',
+            'AjaxOffer' => 'list',
         ],
         [
             'AjaxForm' => 'processInquiryForm, processConfiguratorForm',
+            'AjaxOffer' => 'list',
         ]
     );
 
@@ -168,4 +181,9 @@ call_user_func(function() {
         '# cat=plugin.tx_epevents//a; type=string; label=Configurator period options',
         'plugin.tx_epevents.settings.configurator.periodOptions = ' . $extensionConfiguration['periodOptions']
     ]));
+
+    $GLOBALS['TYPO3_CONF_VARS']['FE']['cacheHash']['excludedParameters'][] = 'gclid';
+    $GLOBALS['TYPO3_CONF_VARS']['FE']['cacheHash']['excludedParameters'][] = 'ref';
+    $GLOBALS['TYPO3_CONF_VARS']['FE']['cacheHash']['excludedParameters'][] = 'tx_epevents_configurator[travelType]';
+    $GLOBALS['TYPO3_CONF_VARS']['FE']['cacheHash']['excludedParameters'][] = 'tx_epevents_configurator[locationType]';
 });