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

feat: render included services conditionally in product teaser

Browse Source
This commit is contained in:
Björn Fromme
2024-02-22 11:44:26 +01:00
parent d7e44a94ab
commit 135e19a9e3
1 changed files with 28 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/Teaser.html
+28 -19
View File
@@ -1,6 +1,7 @@
<html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:section name="Teaser">
@@ -70,6 +71,7 @@
</f:section>
<f:section name="TeaserContent">
{f:variable(name: 'including', value: '{f:render(section: \'Including\', arguments: \'{_all}\') -> v:format.trim()}')}
<a href="{ep:uri.product(forceHotelUid: forceHotelUid, product: product, hotel: hotel, dateFrom: dateFrom, dateTo: dateTo)}{f:if(condition: referringPageUri, then: '?ref={referringPageUri -> f:format.urlencode()}')}"
title="{region.name} {product.name} Details und Buchen"
class="flex-1 flex flex-col space-y-1 px-2 py-4 md:p-4">
@@ -80,26 +82,13 @@
{region.name}
</div>
<div class="product-teaser__label-included">
{ep:nightsOptions(options: nights, daytrip: daytrip)} inkl.
{ep:nightsOptions(options: nights, daytrip: daytrip)}{f:if(condition: including, then: ' inkl.')}
</div>
<ul class="product-teaser__list-included flex-1 list-none m-0 text-zinc-800 divide-y divide-zinc-400">
<li class="flex items-center space-x-1 py-1">
{ep:icon(class: 'w-6 h-6 text-ep-primary-light', icon: 'check')}
<span class="block flex-1 leading-none">{f:if(condition: '{season} == "s"', then: 'Bergbahnticket', else: 'Skipass')}</span>
</li>
<f:if condition="{product.feature}">
<li class="flex items-center space-x-1 py-1">
{ep:icon(class: 'w-6 h-6 text-ep-primary-light', icon: 'check')}
<span class="block flex-1 leading-tight">{product.feature}</span>
</li>
</f:if>
<f:if condition="{board} != '' && {board} != 'keine Verpflegung'">
<li class="flex items-center space-x-1 py-1">
{ep:icon(class: 'w-6 h-6 text-ep-primary-light', icon: 'check')}
<span class="block flex-1 leading-tight">Verpflegung</span>
</li>
</f:if>
</ul>
<f:if condition="{including}">
<ul class="product-teaser__list-included flex-1 list-none m-0 text-zinc-800 divide-y divide-zinc-400">
{including -> f:format.raw()}
</ul>
</f:if>
<div class="pt-8">
<div class="bg-button text-white font-bold px-4 py-1 group-hover:bg-button transition-colors">
<div class="lg:inline-block">
@@ -113,4 +102,24 @@
</a>
</f:section>
<f:section name="Including">
<f:if condition="{season} == 'w'">
<li class="flex items-center space-x-1 py-1">
{ep:icon(class: 'w-6 h-6 text-ep-primary-light', icon: 'check')}
<span class="block flex-1 leading-none">Skipass</span>
</li>
</f:if>
<f:if condition="{product.feature}">
<li class="flex items-center space-x-1 py-1">
{ep:icon(class: 'w-6 h-6 text-ep-primary-light', icon: 'check')}
<span class="block flex-1 leading-tight">{product.feature}</span>
</li>
</f:if>
<f:if condition="{board} != '' && {board} != 'keine Verpflegung'">
<li class="flex items-center space-x-1 py-1">
{ep:icon(class: 'w-6 h-6 text-ep-primary-light', icon: 'check')}
<span class="block flex-1 leading-tight">Verpflegung</span>
</li>
</f:if>
</f:section>
</html>