Use teasergroups in searchresult with toggle option

This commit is contained in:
Björn Fromme
2022-03-14 10:26:11 +01:00
parent f68368adbb
commit 1b70090d25
2 changed files with 44 additions and 22 deletions
@@ -39,27 +39,49 @@
<h4 class="headline headline--tertiary headline--underlined"> <h4 class="headline headline--tertiary headline--underlined">
{section.concept.name} {section.concept.name}
</h4> </h4>
<div class="flex flex-col space-y-4 md:space-y-8 mb-8"> <div class="pb-4 md:pb-8"
<f:for each="{section.items}" as="item"> data-controller="teasergrid"
<f:render partial="Product/Teaser" section="Teaser" arguments="{ data-teasergrid-grid-class="grid-cols-2"
concept: section.concept, data-teasergrid-disabled-value="false">
hotel: item.hotel, <div class="flex items-center space-x-1 mb-2 sm:hidden">
product: item.product, <button type="button"
country: item.country, class="opacity-50"
region: item.region, data-action="teasergrid#grid"
productImage: item.hotel.images.original.0, data-teasergrid-target="button">
nights: item.nights, <svg class="w-5 h-5 text-ep-primary">
board: item.board, <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-teaser-grid"></use>
minPrice: item.minPrice, </svg>
daytrip: product.daytrip, </button>
season: product.season, <button type="button"
dateFrom: item.minDateStart, data-action="teasergrid#block"
dateTo: item.maxDateEnd, data-teasergrid-target="button">
forceHotelUid: 1, <svg class="w-5 h-5 text-ep-primary">
landscape: 1, <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-teaser-single"></use>
referringPageUri: referringPageUri </svg>
}"/> </button>
</f:for> </div>
<div class="grid grid-cols-2 xl:grid-cols-3 gap-4 md:gap-8"
data-teasergrid-target="container">
<f:for each="{section.items}" as="item">
<f:render partial="Product/Teaser" section="Teaser" arguments="{
concept: section.concept,
hotel: item.hotel,
product: item.product,
country: item.country,
region: item.region,
productImage: item.hotel.images.original.0,
nights: item.nights,
board: item.board,
minPrice: item.minPrice,
daytrip: product.daytrip,
season: product.season,
dateFrom: item.minDateStart,
dateTo: item.maxDateEnd,
forceHotelUid: 1,
referringPageUri: referringPageUri
}"/>
</f:for>
</div>
</div> </div>
</div> </div>
</f:for> </f:for>
@@ -15,7 +15,7 @@
<f:if condition="{filterOptions.resultsUri}"> <f:if condition="{filterOptions.resultsUri}">
<div class="mt-4"> <div class="mt-4">
<a href="{filterOptions.resultsUri}" <a href="{filterOptions.resultsUri}"
class="button button--primary w-full"> class="button text-white bg-badge-gradient w-full">
{filterOptions.resultCount} Treffer anzeigen {filterOptions.resultCount} Treffer anzeigen
</a> </a>
</div> </div>