WIP Adapt new teaser layout
This commit is contained in:
Björn Fromme
@@ -43,7 +43,7 @@ class ProductViewHelper extends AbstractViewHelper
|
||||
{
|
||||
parent::initializeArguments();
|
||||
|
||||
$this->registerArgument('product', 'array', 'The product');
|
||||
$this->registerArgument('product', 'mixed', 'The product');
|
||||
$this->registerArgument('hotel', 'array', 'The hotel');
|
||||
$this->registerArgument('dateFrom', 'string', 'Date to limit table on detail page by (Y-m-d)');
|
||||
$this->registerArgument('dateTo', 'string', 'Date to limit table on detail page by (Y-m-d)');
|
||||
@@ -70,8 +70,8 @@ class ProductViewHelper extends AbstractViewHelper
|
||||
|
||||
if ($arguments['forceHotelUid']) {
|
||||
$linkArguments = [
|
||||
'product' => $product['uid'],
|
||||
'hotel' => $hotel['uid'],
|
||||
'product' => is_array($product) ? $product['uid'] : $product,
|
||||
'hotel' => is_array($hotel) ? $hotel['uid'] : $hotel,
|
||||
];
|
||||
} elseif ($arguments['dateFrom'] || $arguments['dateTo']) {
|
||||
$linkArguments = [
|
||||
@@ -81,11 +81,12 @@ class ProductViewHelper extends AbstractViewHelper
|
||||
}
|
||||
|
||||
if (null !== $linkArguments) {
|
||||
$targetPageUid = is_array($product) ? $product['detailPage'] : $product->getDetailPage();
|
||||
$uri = $renderingContext
|
||||
->getControllerContext()
|
||||
->getUriBuilder()
|
||||
->reset()
|
||||
->setTargetPageUid($product['detailPage'])
|
||||
->setTargetPageUid($targetPageUid)
|
||||
->uriFor('detail', $linkArguments, 'Product', 'epproducts', 'product_detail')
|
||||
;
|
||||
} else {
|
||||
@@ -93,7 +94,7 @@ class ProductViewHelper extends AbstractViewHelper
|
||||
$contentObject = GeneralUtility::makeInstance(ContentObjectRenderer::class);
|
||||
$uri = $contentObject->typoLink_URL(
|
||||
[
|
||||
'parameter' => $product['detailPage'],
|
||||
'parameter' => is_array($product) ? $product['detailPage'] : $product->getUid(),
|
||||
]
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
.headerbar {
|
||||
@apply bg-ep-primary-light sbw:bg-sbw-primary text-white uppercase font-semibold py-2 px-4 mb-4;
|
||||
@apply bg-ep-primary-dark sbw:bg-sbw-primary text-white uppercase font-semibold py-2 px-4 mb-4;
|
||||
}
|
||||
|
||||
@@ -24,14 +24,14 @@
|
||||
</f:for>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="splide__arrows absolute z-10 top-1/2 left-0 transform -translate-y-1/2 w-full flex justify-between md:hidden">
|
||||
<div class="splide__arrows absolute z-10 top-1/2 left-0 transform -translate-y-1/2 w-full flex justify-between">
|
||||
<button class="splide__arrow splide__arrow--prev">
|
||||
<svg class="w-10 h-10 text-ep-secondary pointer-events-none">
|
||||
<svg class="w-10 h-10 text-white pointer-events-none">
|
||||
<use href="#icon-chevron-left"></use>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="splide__arrow splide__arrow--next">
|
||||
<svg class="w-10 h-10 text-ep-secondary pointer-events-none">
|
||||
<svg class="w-10 h-10 text-white pointer-events-none">
|
||||
<use href="#icon-chevron-right"></use>
|
||||
</svg>
|
||||
</button>
|
||||
@@ -81,8 +81,8 @@
|
||||
</a>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<a href="{ep:gmapsUrl(region: product.region)}" target="_blank" class="">
|
||||
<svg class="w-6 h-6">
|
||||
<a href="{ep:gmapsUrl(region: product.region)}" target="_blank" class="block bg-ep-primary-light px-2 py-1">
|
||||
<svg class="w-4 h-4 md:w-6 md:h-6 text-white">
|
||||
<use href="#icon-location-marker"></use>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
@@ -9,18 +9,18 @@
|
||||
<div class="bg-ep-primary p-2 mr-4 text-white">
|
||||
<f:alias map="{ icons: { bik: 'Mountainbike', akt: 'Walking', prg: 'Sportclub' } }">
|
||||
<svg class="product-teaser__icon text-white">
|
||||
<use href="#icon-{icons.{teaser.concept.code} -> f:format.case(mode: 'lower')}"></use>
|
||||
<use href="#icon-{icons.{concept.code} -> f:format.case(mode: 'lower')}"></use>
|
||||
</svg>
|
||||
</f:alias>
|
||||
</div>
|
||||
<span class="text-sm md:text-base text-white uppercase font-semibold">
|
||||
{teaser.concept.name}
|
||||
{concept.name}
|
||||
</span>
|
||||
</div>
|
||||
<button type="button"
|
||||
class="px-2"
|
||||
data-controller="watchlist-toggle"
|
||||
data-watchlist-toggle-key-value="{teaser.hotel.uid}:{teaser.product.uid}"
|
||||
data-watchlist-toggle-key-value="{hotel.uid}:{product.uid}"
|
||||
data-watchlist-toggle-target="ariaLabel"
|
||||
data-action="watchlist-toggle#toggle"
|
||||
data-cooltipz-dir="top-right"
|
||||
@@ -29,8 +29,8 @@
|
||||
<svg class="w-6 h-6 text-white" data-watchlist-toggle-target="icon" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
<a href="{ep:uri.product(forceHotelUid: teaser.forceHotelUid, product: teaser.product, hotel: teaser.hotel, dateFrom: dateFrom, dateTo: dateTo, slug: slug)}"
|
||||
title="{teaser.region.name} {teaser.product.name} Details und Buchen"
|
||||
<a href="{ep:uri.product(forceHotelUid: forceHotelUid, product: product, hotel: hotel, dateFrom: dateFrom, dateTo: dateTo)}"
|
||||
title="{region.name} {product.name} Details und Buchen"
|
||||
class="flex flex-col h-full bg-white">
|
||||
<f:render section="TeaserImage" arguments="{_all}"/>
|
||||
<f:render section="TeaserContent" arguments="{_all}"/>
|
||||
@@ -41,24 +41,24 @@
|
||||
<f:section name="TeaserImage">
|
||||
<img class="block w-full h-auto lazyload"
|
||||
src="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/lazy.png')}"
|
||||
data-src="{f:uri.image(image: teaser.product.images.original.0, width: '640', height: '480c')}"
|
||||
alt="{teaser.product.name}"
|
||||
data-src="{f:uri.image(image: productImage, width: '640c', height: '480c')}"
|
||||
alt="{product.name}"
|
||||
width="640" height="480" />
|
||||
</f:section>
|
||||
|
||||
<f:section name="TeaserContent">
|
||||
<div class="flex-1 flex flex-col space-y-1 px-2 py-4 md:p-4">
|
||||
<div class="text-gray-800 leading-none pl-8 md:pl-10">
|
||||
{teaser.product.name}
|
||||
{product.name}
|
||||
</div>
|
||||
<div class="relative h-16 md:h-24 text-gray-800 text-lg md:text-3xl leading-none font-bold pl-8 md:pl-10">
|
||||
{teaser.region.name}
|
||||
{region.name}
|
||||
<svg class="w-6 h-4 md:w-8 md:h-6 absolute top-0 left-0 md:mt-1">
|
||||
<use href="#icon-flag-{teaser.country.code -> f:format.case(mode: 'lower')}"/>
|
||||
<use href="#icon-flag-{country.code -> f:format.case(mode: 'lower')}"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="pb-2 text-gray-800 text-lg md:text-xl font-bold leading-none pl-8 md:pl-10">
|
||||
{ep:nightsOptions(options: teaser.nights, daytrip: teaser.daytrip)} inkl.
|
||||
{ep:nightsOptions(options: nights, daytrip: daytrip)} inkl.
|
||||
</div>
|
||||
<ul class="flex-1 list-none m-0 text-gray-800 divide-y divide-gray-400 pl-8 md:pl-10">
|
||||
<li class="flex items-center space-x-1 py-1">
|
||||
@@ -66,26 +66,26 @@
|
||||
<use href="#icon-check"></use>
|
||||
</svg>
|
||||
<span class="block flex-1 leading-none">
|
||||
{f:if(condition: '{teaser.season} == "s"', then: 'Bergbahnticket', else: 'Skipass')}
|
||||
{f:if(condition: '{season} == "s"', then: 'Bergbahnticket', else: 'Skipass')}
|
||||
</span>
|
||||
</li>
|
||||
<f:if condition="{teaser.product.feature}">
|
||||
<f:if condition="{product.feature}">
|
||||
<li class="flex items-center space-x-1 py-1">
|
||||
<svg class="w-6 h-6 text-ep-primary">
|
||||
<use href="#icon-check"></use>
|
||||
</svg>
|
||||
<span class="block flex-1 leading-none">
|
||||
{teaser.product.feature}
|
||||
{product.feature}
|
||||
</span>
|
||||
</li>
|
||||
</f:if>
|
||||
<f:if condition="{teaser.board}">
|
||||
<f:if condition="{board}">
|
||||
<li class="flex items-center space-x-1 py-1">
|
||||
<svg class="w-6 h-6 text-ep-primary">
|
||||
<use href="#icon-check"></use>
|
||||
</svg>
|
||||
<span class="block flex-1 leading-none">
|
||||
{teaser.board}
|
||||
{board}
|
||||
</span>
|
||||
</li>
|
||||
</f:if>
|
||||
@@ -93,10 +93,10 @@
|
||||
<div class="pt-8 pl-8 md:pl-10">
|
||||
<div class="bg-ep-primary text-white font-bold px-4 py-1">
|
||||
<div class="lg:inline-block">
|
||||
ab <span class="text-xl md:text-3xl mx-1">{teaser.minPrice} €</span>
|
||||
ab <span class="text-xl md:text-3xl mx-1">{minPrice} €</span>
|
||||
</div>
|
||||
<div class="text-sm md:text-base lg:inline-block">
|
||||
p. P. / inkl. {f:if(condition: '{teaser.season} == "s"', then: 'Bergbahnticket', else: 'Skipass')}
|
||||
p. P. / inkl. {f:if(condition: '{season} == "s"', then: 'Bergbahnticket', else: 'Skipass')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -5,31 +5,60 @@
|
||||
<f:layout name="Default"/>
|
||||
|
||||
<f:section name="Main">
|
||||
<div class="container">
|
||||
<f:render partial="Product/HeaderDetail" arguments="{_all}"/>
|
||||
<f:render partial="Header/Header" arguments="{layout: 8, subheader: product.name, header: product.headline}"/>
|
||||
{product.teaserLong -> f:format.html()}
|
||||
<div class="headerbar">
|
||||
Wähle deine Unterkunft
|
||||
<f:render partial="Product/HeaderDetail" arguments="{_all}"/>
|
||||
<div class="container grid grid-cols-3 gap-8">
|
||||
<div class="col-span-3 lg:col-span-2">
|
||||
<f:render partial="Header/Header" arguments="{layout: 8, subheader: product.name, header: product.headline}"/>
|
||||
<div data-rte-content>
|
||||
{product.teaserLong -> f:format.html()}
|
||||
</div>
|
||||
<div class="headerbar">
|
||||
Wähle deine Unterkunft
|
||||
</div>
|
||||
<f:if condition="{hotels}">
|
||||
<f:then>
|
||||
<div class="grid grid-cols-2 gap-4 md:gap-8">
|
||||
<f:for each="{hotels}" as="item">
|
||||
<f:render partial="Product/Teaser" section="Teaser" arguments="{
|
||||
concept: product.concept,
|
||||
hotel: item.hotel,
|
||||
product: product,
|
||||
country: product.country,
|
||||
region: product.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
|
||||
}"/>
|
||||
</f:for>
|
||||
</div>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<div class="alert alert-info">
|
||||
Die von dir gewählte Reise ist aktuell nicht buchbar, aber wir helfen dir gerne dabei,
|
||||
eine andere Reise zu finden. Ruf uns an unter <a href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}" title="Service Telefon anrufen" rel="nofollow">{settings.phoneNumber}</a>
|
||||
oder schreibe an <f:link.email email="[email protected]"/>.
|
||||
</div>
|
||||
</f:else>
|
||||
</f:if>
|
||||
</div>
|
||||
<div class="col-span-3 lg:col-span-1">
|
||||
<f:alias map="{region: product.region}">
|
||||
<f:if condition="{region.winter}">
|
||||
<f:render partial="Facts" arguments="{facts: region.facts, title: region.name}"/>
|
||||
<f:render partial="Snowreport" arguments="{snowreport: region.snowreport}"/>
|
||||
<f:render partial="Regioninfo" arguments="{region: region}"/>
|
||||
<f:render partial="Region/Webcam" arguments="{region: region}"/>
|
||||
<f:render partial="RegionMaps" arguments="{region: region}"/>
|
||||
<f:render partial="RegionAward" arguments="{region: region}"/>
|
||||
</f:if>
|
||||
</f:alias>
|
||||
</div>
|
||||
<f:if condition="{hotels}">
|
||||
<f:then>
|
||||
<f:for each="{hotels}" as="item">
|
||||
<f:render partial="Hotel/TeaserWide" section="Teaser" arguments="{
|
||||
item: item,
|
||||
product: product,
|
||||
referringPageUrl: referringPageUrl
|
||||
}"/>
|
||||
</f:for>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<div class="alert alert-info">
|
||||
Die von dir gewählte Reise ist aktuell nicht buchbar, aber wir helfen dir gerne dabei,
|
||||
eine andere Reise zu finden. Ruf uns an unter <a href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}" title="Service Telefon anrufen" rel="nofollow">{settings.phoneNumber}</a>
|
||||
oder schreibe an <f:link.email email="[email protected]"/>.
|
||||
</div>
|
||||
</f:else>
|
||||
</f:if>
|
||||
</div>
|
||||
</f:section>
|
||||
|
||||
|
||||
@@ -34,7 +34,22 @@
|
||||
<div class="grid grid-cols-2 lg:grid-cols-3 gap-4 md:gap-8"
|
||||
data-teasergrid-target="container">
|
||||
<f:for each="{teasers}" as="teaser">
|
||||
<f:render partial="Product/Teaser" section="Teaser" arguments="{teaser: teaser, dateFrom: dateFrom, dateTo: dateTo}"/>
|
||||
<f:render partial="Product/Teaser" section="Teaser" arguments="{
|
||||
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
|
||||
}"/>
|
||||
</f:for>
|
||||
</div>
|
||||
<f:if condition="{settings.showMoreLink}">
|
||||
|
||||
Reference in New Issue
Block a user