Replace header on product detail page
This commit is contained in:
Björn Fromme
+78
-102
@@ -1,111 +1,87 @@
|
||||
<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">
|
||||
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
||||
|
||||
<div class="bg-cover bg-center bg-header-season-{product.region.season} mb-4">
|
||||
<div class="md:container">
|
||||
<div class="md:flex md:flex-row-reverse md:items-stretch">
|
||||
<div class="md:w-5/12 md:py-4 splide"
|
||||
data-controller="slider"
|
||||
data-slider-preset-value="content">
|
||||
<div class="splide__track">
|
||||
<ul class="splide__list">
|
||||
<f:for each="{product.images}" as="image" iteration="iteration">
|
||||
<li class="splide__slide h-64 md:h-auto">
|
||||
<picture class="w-full h-full">
|
||||
<source srcset="{f:uri.image(image: image, width: '585')}" media="(min-width: 768px)">
|
||||
<source srcset="{f:uri.image(image: image, width: '400')}" media="(max-width: 767px)">
|
||||
<img class="block w-full h-full object-cover"
|
||||
src="{f:uri.image(image: image, width: '400')}"
|
||||
alt="{image.alternative}">
|
||||
</picture>
|
||||
</li>
|
||||
</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">
|
||||
<button type="button"
|
||||
class="splide__arrow splide__arrow--prev">
|
||||
<svg class="w-10 h-10 text-white pointer-events-none">
|
||||
<use href="#icon-chevron-left"></use>
|
||||
</svg>
|
||||
</button>
|
||||
<button type="button"
|
||||
class="splide__arrow splide__arrow--next">
|
||||
<svg class="w-10 h-10 text-white pointer-events-none">
|
||||
<use href="#icon-chevron-right"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden md:flex md:flex-col md:justify-between md:items-center md:w-2/12 md:px-8">
|
||||
<f:if condition="{settings.showSkipassBadge} && {product.skipassIncluded}">
|
||||
<f:link.typolink parameter="{settings.skipassPageUid}"
|
||||
title="Skipass inklusive">
|
||||
<f:if condition="{product.badge}">
|
||||
<f:then>
|
||||
<f:image src="EXT:ep_theme/Resources/Public/images/badge_skipass.png"
|
||||
class="block w-20 h-auto mx-auto"
|
||||
alt="Skipass inklusive" />
|
||||
</f:then>
|
||||
<f:else>
|
||||
<f:image src="EXT:ep_theme/Resources/Public/images/badge_skipass.png"
|
||||
class="block w-20 xl:w-auto h-auto mx-auto"
|
||||
alt="Skipass inklusive" />
|
||||
</f:else>
|
||||
</f:if>
|
||||
</f:link.typolink>
|
||||
</f:if>
|
||||
</div>
|
||||
<div class="px-4 md:px-0 md:w-5/12 md:self-center py-4">
|
||||
<div class="relative z-10 max-w-md shadow-md -mt-16 md:mt-0">
|
||||
<div class="bg-concept-{product.concept.code} text-white text-xl px-4 py-2 leading-none">
|
||||
{product.concept.name}
|
||||
</div>
|
||||
<div class="bg-white p-4">
|
||||
<span class="headline--3">
|
||||
{product.name}{f:if(condition: product.subline, then: ' {product.subline}')}
|
||||
</span>
|
||||
<span class="block">
|
||||
{product.region.name}
|
||||
</span>
|
||||
<div class="flex space-x-4 mt-4">
|
||||
<svg class="w-8 h-6 md:w-10 md:h-8">
|
||||
<use href="#icon-flag-{product.country.code -> f:format.case(mode: 'lower')}"></use>
|
||||
</svg>
|
||||
<f:if condition="{hotel}">
|
||||
<f:then>
|
||||
<a href="{ep:gmapsUrl(hotel: hotel)}" 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>
|
||||
<div class="splide"
|
||||
data-controller="slider"
|
||||
data-slider-preset-value="header">
|
||||
<div class="splide__track">
|
||||
<ul class="splide__list">
|
||||
<f:for each="{product.images}" as="image" iteration="iteration">
|
||||
<li class="splide__slide">
|
||||
<div class="relative max-w-screen-2xl mx-auto h-80 lg:h-96 mb-8">
|
||||
<picture>
|
||||
<source srcset="{f:uri.image(image: image, width: '1370', cropVariant: 'sliderPageHeader')}" media="(min-width: 768px)">
|
||||
<source srcset="{f:uri.image(image: image, height: '320', cropVariant: 'sliderPageHeader')}" media="(max-width: 767px)">
|
||||
<img class="block w-full h-full object-cover"
|
||||
src="{f:uri.image(image: image, height: '320', cropVariant: 'sliderPageHeader')}"
|
||||
alt="{image.alternative}">
|
||||
</picture>
|
||||
<div class="absolute bottom-0 left-0 inset-x-0 px-8 md:bottom-1/2 md:transform md:translate-y-1/2">
|
||||
<div class="lg:container">
|
||||
<div class="p-4 bg-ep-primary-dark-80 sbw:bg-sbw-primary-80 mb-4 md:p-8 md:max-w-2xl">
|
||||
<span class="block text-xl md:text-2xl font-bold text-white uppercase">
|
||||
{product.name}{f:if(condition: product.subline, then: ' {product.subline}')}
|
||||
</span>
|
||||
<span class="block text-2xl md:text-3xl lg:text-4xl font-bold text-white uppercase">
|
||||
{product.region.name}
|
||||
</span>
|
||||
<div class="flex space-x-4 mt-4">
|
||||
<svg class="w-8 h-6 md:w-10 md:h-8">
|
||||
<use href="#icon-flag-{product.country.code -> f:format.case(mode: 'lower')}"></use>
|
||||
</svg>
|
||||
</a>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<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>
|
||||
</f:else>
|
||||
</f:if>
|
||||
<f:if condition="{hotel}">
|
||||
<f:then>
|
||||
<a href="{ep:gmapsUrl(hotel: hotel)}" 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>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<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>
|
||||
</f:else>
|
||||
</f:if>
|
||||
</div>
|
||||
<f:if condition="{referringUrl}">
|
||||
<a href="{referringUrl}" class="button button--small mt-8">
|
||||
<svg class="w-4 h-4 text-white">
|
||||
<use href="#icon-chevron-left"></use>
|
||||
</svg>
|
||||
<span>
|
||||
{backlinkLabel}
|
||||
</span>
|
||||
</a>
|
||||
</f:if>
|
||||
</div>
|
||||
</div>
|
||||
<f:render partial="Badge" arguments="{badge: product.badge}"/>
|
||||
</div>
|
||||
<f:if condition="{settings.showSkipassBadge} && {product.skipassIncluded}">
|
||||
<f:link.typolink parameter="{settings.skipassPageUid}"
|
||||
title="Skipass inklusive"
|
||||
class="herounit__badge herounit__badge--skipass">
|
||||
<p class="uppercase text-4xl font-bold leading-7 mb-2">
|
||||
Ski-<br>Pass
|
||||
</p>
|
||||
<p class="uppercase">
|
||||
inklusive
|
||||
</p>
|
||||
</f:link.typolink>
|
||||
</f:if>
|
||||
<f:if condition="{slide.image.0.description}">
|
||||
<div class="absolute bottom-0 right-0 bg-overlay-white font-sm text-gray-700">
|
||||
{slide.image.0.description -> f:format.htmlspecialchars()}
|
||||
</div>
|
||||
</f:if>
|
||||
</div>
|
||||
<f:render partial="Badge" arguments="{badge: product.badge}"/>
|
||||
</div>
|
||||
<f:if condition="{referringUrl}">
|
||||
<a href="{referringUrl}" class="button button--small mt-8">
|
||||
<svg class="w-4 h-4 text-white">
|
||||
<use href="#icon-chevron-left"></use>
|
||||
</svg>
|
||||
<span>
|
||||
{backlinkLabel}
|
||||
</span>
|
||||
</a>
|
||||
</f:if>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</f:for>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
<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">
|
||||
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
||||
|
||||
<f:layout name="Default"/>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user