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

Migrate mobile search

Browse Source
This commit is contained in:
Björn Fromme
2021-10-25 14:41:27 +02:00
parent d8b50379b5
commit 8228c0d153
11 changed files with 198 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/mobile_search_controller.js
+9 -3
View File
@@ -13,8 +13,10 @@ export default class extends Controller {
static values = {
optionsUri: String,
initialOptionsUri: String,
searchUri: String,
loading: Boolean,
loaded: Boolean,
show: Boolean,
}
@@ -25,13 +27,14 @@ export default class extends Controller {
open(e) {
if (e.detail === 'mobile-search') {
this.showValue = true
this.load()
if (false === this.loadedValue) {
this.load()
}
}
}
close() {
this.showValue = false
this.containerTarget.innerHTML = ''
}
filter() {
@@ -46,12 +49,14 @@ export default class extends Controller {
}
load(options) {
let uri = this.loadedValue ? this.optionsUriValue : this.initialOptionsUriValue
this.loadingValue = true
fetch(this.optionsUriValue, options)
fetch(uri, options)
.then(this.checkStatus)
.then(this.parseHTML)
.then(html => {
this.containerTarget.innerHTML = html
this.loadedValue = true
})
.finally(() => {
this.loadingValue = false
@@ -73,6 +78,7 @@ export default class extends Controller {
}
selectDateRange(e) {
e.stopPropagation()
this.dateFromTarget.value = e.detail.from
this.dateToTarget.value = e.detail.to
this.filter()
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/FilterPanel.html
+10 -11
View File
@@ -34,8 +34,7 @@
data-action="click->collapse#toggle"
class="w-full px-0 bg-transparent border-0 ring-0 focus:ring-0 text-white uppercase cursor-pointer placeholder-white"
placeholder="Zeitraum"
value="{ep:dateRange(dateFrom: filterSettings.dateFrom, dateTo: filterSettings.dateTo, includeLabel: 0)}"
data-searchbar-target="dateRangeLabel"/>
value="{ep:dateRange(dateFrom: filterSettings.dateFrom, dateTo: filterSettings.dateTo, includeLabel: 0)}"/>
<svg class="w-6 h-6 text-white absolute right-0 top-0 mt-2 cursor-pointer"
data-action="click->collapse#toggle">
<use href="#icon-calendar"></use>
@@ -106,7 +105,7 @@
<label>
<f:form.checkbox class="mr-2 rounded-full w-5 h-5 border-white ring-0 bg-transparent focus:ring-0 focus:border-none text-ep-primary"
property="conceptUids"
data="{action: 'search#filter mobile-search#filter'}"
data="{action: '{stimulusController}#filter'}"
value="{concept.uid}"/>
<span class="inline-block py-1 px-2 bg-concept-{concept.code} text-white">
{concept.name}
@@ -141,7 +140,7 @@
<label class="flex items-start">
<f:form.checkbox class="w-5 h-5 border-ep-primary ring-0 bg-transparent focus:ring-0 focus:border-none text-ep-primary"
property="countryUids"
data="{action: 'search#filter mobile-search#filter'}"
data="{action: '{stimulusController}#filter'}"
value="{destination.country.uid}"/>
<span class="pl-2 leading-none">
<strong>{destination.country.label}</strong>
@@ -157,7 +156,7 @@
<label class="flex items-start">
<f:form.checkbox class="w-5 h-5 border-ep-primary ring-0 bg-transparent focus:ring-0 focus:border-none text-ep-primary"
property="regionUids"
data="{action: 'search#filter mobile-search#filter'}"
data="{action: '{stimulusController}#filter'}"
value="{region.uid}"/>
<span class="leading-none pl-2">
{region.label}
@@ -194,7 +193,7 @@
<label class="flex items-start">
<f:form.checkbox class="w-5 h-5 border-ep-primary ring-0 bg-transparent focus:ring-0 focus:border-none text-ep-primary"
property="priceRanges"
data="{action: 'search#filter mobile-search#filter'}"
data="{action: '{stimulusController}#filter'}"
value="{range.uid}"/>
<span class="leading-none pl-2">
{ep:priceRange(min: range.min, max: range.max)}
@@ -224,7 +223,7 @@
<f:form.select class="w-full border-0 focus:ring-0 bg-right mt-2 p-0"
property="pax"
options="{filterOptions.pax}"
data="{action: 'search#filter mobile-search#filter'}"/>
data="{action: '{stimulusController}#filter'}"/>
</div>
</div>
@@ -256,7 +255,7 @@
<label class="flex items-start">
<f:form.checkbox class="w-5 h-5 border-ep-primary ring-0 bg-transparent focus:ring-0 focus:border-none text-ep-primary"
property="hotelTypes"
data="{action: 'search#filter mobile-search#filter'}"
data="{action: '{stimulusController}#filter'}"
value="{type}"/>
<span class="leading-none pl-2">
{hotelTypes.{type}}
@@ -290,7 +289,7 @@
<label class="flex items-start">
<f:form.checkbox class="w-5 h-5 border-ep-primary ring-0 bg-transparent focus:ring-0 focus:border-none text-ep-primary"
property="boardTypes"
data="{action: 'search#filter mobile-search#filter'}"
data="{action: '{stimulusController}#filter'}"
value="{type.uid}"/>
<span class="pl-2 leading-none">
{type.label}
@@ -332,7 +331,7 @@
<label class="flex items-start">
<f:form.checkbox class="w-5 h-5 border-ep-primary ring-0 bg-transparent focus:ring-0 focus:border-none text-ep-primary"
property="roomTypes"
data="{action: 'search#filter mobile-search#filter'}"
data="{action: '{stimulusController}#filter'}"
value="{type}"/>
<span class="leading-none pl-2">
{roomTypes.{type}}
@@ -365,7 +364,7 @@
<label class="flex items-start">
<f:form.checkbox class="w-5 h-5 border-ep-primary ring-0 bg-transparent focus:ring-0 focus:border-none text-ep-primary"
property="bus"
data="{action: 'search#filter mobile-search#filter'}"
data="{action: '{stimulusController}#filter'}"
value="1"/>
<span class="leading-none pl-2">
Busanreise
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/Main.html
+1 -32
View File
@@ -22,42 +22,11 @@
</button>
</div>
</div>
<div class="fixed lg:hidden top-0 left-0 inset-0 w-screen h-screen pt-14 pb-10 z-50 bg-gray-700 hidden"
data-controller="mobile-search"
data-mobile-search-options-uri-value="{ep:uri.ajax(controller: 'AjaxFilterPanel', action: 'options', pageUid: settings.defaultAjaxUid, arguments: '{filterSettings: filterSettings}', format: 'html')}"
data-action="overlay-toggle:toggle@window->mobile-search#open">
<div class="fixed top-0 left-0 z-100 inset-x-0 px-4 py-2 flex justify-between bg-white shadow-md">
<a href="{f:uri.typolink(parameter: settings.defaultHomeUid)}"
class="block lg:pb-4"
title="{settings.defaultTitle}">
<img class="block h-10 lg:h-12 w-auto" src="{f:uri.image(src: settings.logoImage)}" alt="{settings.defaultTitle}">
</a>
<button type="button"
class="focus:outline-none" data-action="mobile-search#close">
<svg class="w-8 h-8">
<use href="#icon-close"></use>
</svg>
</button>
</div>
<div data-mobile-search-target="container"
class="h-full w-full overflow-y-scroll p-4 bg-white">
</div>
<div class="fixed top-0 left-0 z-20 w-full h-full hidden"
data-mobile-search-target="loadingIndicator">
<div class="absolute top-1/2 left-1/2 transform -translate-xy-1/2 flex items-center space-x-4 bg-ep-secondary text-white text-lg p-4 rounded">
<svg class="w-6 h-6">
<use href="#icon-spinner"></use>
</svg>
<span>Suche wird geladen...</span>
</div>
</div>
</div>
</div>
<div class="col-span-3 lg:col-span-2 relative">
<f:render partial="Search/Result" arguments="{_all}"/>
</div>
<f:render partial="Search/MobileSearch" arguments="{_all}"/>
</div>
</html>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/MobileSearch.html
+4 -2
View File
@@ -1,12 +1,14 @@
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"
<html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers">
<div class="fixed lg:hidden top-0 left-0 inset-0 w-screen h-screen pt-14 pb-10 z-50 bg-gray-700 hidden"
data-controller="mobile-search"
data-mobile-search-options-uri-value="{ep:uri.ajax(controller: 'AjaxFilterPanel', action: 'options', pageUid: settings.defaultAjaxUid, format: 'html')}"
data-mobile-search-initial-options-uri-value="{ep:uri.ajax(controller: 'AjaxFilterPanel', action: 'options', pageUid: settings.defaultAjaxUid, arguments: '{filterSettings: filterSettings}', format: 'html')}"
data-mobile-search-search-uri-value="{ep:uri.ajax(controller: 'AjaxFilterPanel', action: 'search', pageUid: settings.defaultAjaxUid, format: 'json')}"
data-action="overlay-toggle:toggle@window->mobile-search#open">
data-action="overlay-toggle:toggle@window->mobile-search#open datepicker:range-select->mobile-search#selectDateRange">
<div class="fixed top-0 left-0 z-100 inset-x-0 px-4 py-2 flex justify-between bg-white shadow-md">
<a href="{f:uri.typolink(parameter: settings.defaultHomeUid)}"
class="block lg:pb-4"