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

feat: render product teasers in landscape mode when less than 3

Browse Source 
addresses #86965w98p
This commit is contained in:
Björn Fromme
2026-06-16 12:11:48 +02:00
parent 9933a0d3f7
commit fbe5a882c7
5 changed files with 378 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Resources/Private/Partials/City/Details.html
+31 -1
View File
@@ -23,6 +23,32 @@
<div data-controller="teasergrid"
data-teasergrid-grid-class="grid-cols-2"
data-teasergrid-disabled-value="false">
<f:if condition="{teasers -> f:count()} <= 2">
<f:then>
<div class="grid gap-4 md:gap-8">
<f:for each="{teasers}" as="teaser" iteration="iteration">
<f:render partial="Product/Teaser" section="Teaser" arguments="{
landscape: 1,
concept: teaser.concept,
hotel: teaser.hotel,
product: teaser.product,
country: teaser.country,
region: teaser.region,
productImage: teaser.product.images.original.0,
nights: teaser.nights,
board: teaser.board,
minPrice: teaser.minPrice,
daytrip: teaser.daytrip,
season: teaser.season,
forceHotelUid: teaser.forceHotelUid,
dateFrom: teaser.minDateStart,
dateTo: teaser.maxDateEnd,
index: iteration.index
}"/>
</f:for>
</div>
</f:then>
<f:else>
<div class="flex items-center space-x-1 mb-2 sm:hidden">
<button type="button"
class="opacity-50"
@@ -64,15 +90,19 @@
}"/>
</f:for>
</div>
</f:else>
</f:if>
</div>
<f:if condition="{settings.hideMoreLink}">
<f:else>
<f:link.typolink class="button bg-button ml-4"
<div class="text-right mt-4">
<f:link.typolink class="button bg-button"
parameter="{settings.defaultSearchPageUid}"
additionalParams="f={filterSettings -> ep:filterSettingsEncoder()}"
additionalAttributes="{rel: 'nofollow'}">
Alle anzeigen
</f:link.typolink>
</div>
</f:else>
</f:if>
</div>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/Details.html
+28 -2
View File
@@ -36,7 +36,32 @@
data-controller="teasergrid"
data-teasergrid-grid-class="grid-cols-2"
data-teasergrid-disabled-value="false">
<f:if condition="{teasers}">
<f:if condition="{teasers -> f:count() <= 2}">
<f:then>
<div class="grid gap-4 md:gap-8">
<f:for each="{teasers}" as="teaser" iteration="iteration">
<f:render partial="Product/Teaser" section="Teaser" arguments="{
landscape: 1,
concept: teaser.concept,
hotel: teaser.hotel,
product: teaser.product,
country: teaser.country,
region: teaser.region,
productImage: teaser.product.images.original.0,
nights: teaser.nights,
board: teaser.board,
minPrice: teaser.minPrice,
daytrip: teaser.daytrip,
season: teaser.season,
forceHotelUid: teaser.forceHotelUid,
dateFrom: teaser.minDateStart,
dateTo: teaser.maxDateEnd,
index: iteration.index
}"/>
</f:for>
</div>
</f:then>
<f:else>
<div class="flex items-center space-x-1 mb-2 sm:hidden">
<button type="button"
class="opacity-50"
@@ -74,6 +99,8 @@
}"/>
</f:for>
</div>
</f:else>
</f:if>
<f:if condition="{settings.hideMoreLink}">
<f:else>
<div class="text-right mt-4">
@@ -85,7 +112,6 @@
</div>
</f:else>
</f:if>
</f:if>
</div>
</f:then>
<f:else>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Region/Details.html
+30 -3
View File
@@ -53,11 +53,37 @@
<f:if condition="{teasers}">
<f:then>
<a id="teasers" class="anchor"></a>
<div class="bg-zinc-50 p-4 mb-4"
<div class="even:bg-zinc-50 even:p-4 mb-4"
data-controller="teasergrid"
data-teasergrid-grid-class="grid-cols-2"
data-teasergrid-disabled-value="false">
<f:if condition="{teasers}">
<f:if condition="{teasers -> f:count()} <= 2">
<f:then>
<div class="grid gap-4 md:gap-8">
<f:for each="{teasers}" as="teaser" iteration="iteration">
<f:render partial="Product/Teaser" section="Teaser" arguments="{
landscape: 1,
concept: teaser.concept,
hotel: teaser.hotel,
product: teaser.product,
country: teaser.country,
region: teaser.region,
productImage: teaser.product.images.original.0,
nights: teaser.nights,
board: teaser.board,
minPrice: teaser.minPrice,
daytrip: teaser.daytrip,
season: teaser.season,
forceHotelUid: teaser.forceHotelUid,
dateFrom: teaser.minDateStart,
dateTo: teaser.maxDateEnd,
index: iteration.index,
skiPassIncluded: teaser.skiPassIncluded
}"/>
</f:for>
</div>
</f:then>
<f:else>
<div class="flex items-center space-x-1 mb-2 sm:hidden">
<button type="button"
class="opacity-50"
@@ -96,6 +122,8 @@
}"/>
</f:for>
</div>
</f:else>
</f:if>
<f:if condition="{settings.hideMoreLink}">
<f:else>
<div class="text-right mt-4">
@@ -107,7 +135,6 @@
</div>
</f:else>
</f:if>
</f:if>
</div>
</f:then>
<f:else>
public/typo3conf/ext/ep_theme/Resources/Private/Templates/Country/Detail.html
+30
View File
@@ -34,6 +34,34 @@
data-controller="teasergrid"
data-teasergrid-grid-class="grid-cols-2"
data-teasergrid-disabled-value="false">
<f:if condition="{teasers -> f:count()} <= 2">
<f:then>
<div class="grid gap-4 md:gap-8">
<f:for each="{teasers}" as="teaser" iteration="iteration">
<f:render partial="Product/Teaser" section="Teaser" arguments="{
landscape: 1,
concept: teaser.concept,
hotel: teaser.hotel,
product: teaser.product,
country: teaser.country,
region: teaser.region,
productImage: teaser.product.images.original.0,
nights: teaser.nights,
board: teaser.board,
minPrice: teaser.minPrice,
daytrip: teaser.daytrip,
season: teaser.season,
forceHotelUid: teaser.forceHotelUid,
dateFrom: dateFrom,
dateTo: dateTo,
index: iteration.index,
globalConceptCode: settings.globalConceptCode,
skiPassIncluded: teaser.skiPassIncluded
}"/>
</f:for>
</div>
</f:then>
<f:else>
<div class="flex items-center space-x-1 mb-2 sm:hidden">
<button type="button"
class="opacity-50"
@@ -77,6 +105,8 @@
}"/>
</f:for>
</div>
</f:else>
</f:if>
<f:if condition="{settings.hideMoreLink}">
<f:else>
<div class="text-right mt-4">
public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Teasergroup.html
+31
View File
@@ -14,6 +14,35 @@
arguments="{header: data.header, subheader: data.subheader, layout: data.header_layout, link: data.header_link, default: settings.defaultHeaderType}" />
<f:if condition="{teasers}">
<f:then>
<f:if condition="{teasers -> f:count()} <= 2">
<f:then>
<f:for each="{teasers}" as="teaser" iteration="iteration">
<div class="grid gap-y-4 md:gap-y-8">
<f:render partial="Product/Teaser" section="Teaser" arguments="{
landscape: 1,
concept: teaser.concept,
hotel: teaser.hotel,
product: teaser.product,
country: teaser.country,
region: teaser.region,
productImage: teaser.product.images.original.0,
nights: teaser.nights,
board: teaser.board,
minPrice: teaser.minPrice,
daytrip: teaser.daytrip,
season: teaser.season,
forceHotelUid: teaser.forceHotelUid,
dateFrom: dateFrom,
dateTo: dateTo,
new: teaser.new,
index: iteration.index,
globalConceptCode: settings.globalConceptCode,
skiPassIncluded: teaser.skiPassIncluded
}"/>
</div>
</f:for>
</f:then>
<f:else>
<div class="flex items-center space-x-1 mb-2 sm:hidden">
<button type="button"
class="opacity-50"
@@ -58,6 +87,8 @@
}"/>
</f:for>
</div>
</f:else>
</f:if>
<f:if condition="{settings.hideMoreLink}">
<f:else>
<div class="text-right mt-4">