Remove slider in header of product detail page
This commit is contained in:
Björn Fromme
+73
-85
@@ -2,94 +2,82 @@
|
|||||||
xmlns="http://www.w3.org/1999/xhtml"
|
xmlns="http://www.w3.org/1999/xhtml"
|
||||||
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
||||||
|
|
||||||
<div class="splide"
|
<f:alias map="{image: product.images.0}">
|
||||||
data-controller="slider"
|
<div class="herounit h-80 lg:h-96 mb-8">
|
||||||
data-slider-preset-value="header">
|
<picture>
|
||||||
<div class="splide__track">
|
<source srcset="{f:uri.image(image: image, width: '1370c', height: '380c')}" media="(min-width: 768px)">
|
||||||
<ul class="splide__list">
|
<source srcset="{f:uri.image(image: image, height: '320c')}" media="(max-width: 767px)">
|
||||||
<f:for each="{product.images}" as="image" iteration="iteration">
|
<f:image class="block w-full h-full object-cover"
|
||||||
<li class="splide__slide">
|
image="{image}"
|
||||||
<div class="herounit h-80 lg:h-96 mb-8">
|
height="320c"
|
||||||
<picture>
|
alt="{image.alternative}"/>
|
||||||
<source srcset="{f:uri.image(image: image, width: '1370', cropVariant: 'sliderPageHeader')}" media="(min-width: 768px)">
|
</picture>
|
||||||
<source srcset="{f:uri.image(image: image, height: '320', cropVariant: 'sliderPageHeader')}" media="(max-width: 767px)">
|
<div class="absolute bottom-0 left-0 inset-x-0 px-8 md:bottom-1/2 md:transform md:translate-y-1/2">
|
||||||
<f:image class="block w-full h-full object-cover"
|
<div class="lg:container">
|
||||||
image="{image}"
|
<div class="p-4 bg-ep-primary-dark-80 sbw:bg-sbw-primary-80 mb-4 md:p-8 md:max-w-2xl">
|
||||||
height="320"
|
<span class="block text-xl md:text-2xl font-bold text-white uppercase">
|
||||||
cropVariant="sliderPageHeader"
|
{product.name}{f:if(condition: product.subline, then: ' {product.subline}')}
|
||||||
alt="{image.alternative}"/>
|
</span>
|
||||||
</picture>
|
<span class="block text-2xl md:text-3xl lg:text-4xl font-bold text-white uppercase">
|
||||||
<div class="absolute bottom-0 left-0 inset-x-0 px-8 md:bottom-1/2 md:transform md:translate-y-1/2">
|
{product.region.name}
|
||||||
<div class="lg:container">
|
</span>
|
||||||
<div class="p-4 bg-ep-primary-dark-80 sbw:bg-sbw-primary-80 mb-4 md:p-8 md:max-w-2xl">
|
<div class="flex items-center space-x-4 mt-4">
|
||||||
<span class="block text-xl md:text-2xl font-bold text-white uppercase">
|
<svg class="w-8 h-6 md:w-10 md:h-8">
|
||||||
{product.name}{f:if(condition: product.subline, then: ' {product.subline}')}
|
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-flag-{product.country.code -> f:format.case(mode: 'lower')}"></use>
|
||||||
</span>
|
</svg>
|
||||||
<span class="block text-2xl md:text-3xl lg:text-4xl font-bold text-white uppercase">
|
<f:if condition="{hotel}">
|
||||||
{product.region.name}
|
<f:then>
|
||||||
</span>
|
<a href="{ep:gmapsUrl(hotel: hotel)}" target="_blank" class="block bg-ep-primary-light px-2 py-1">
|
||||||
<div class="flex items-center space-x-4 mt-4">
|
<svg class="w-4 h-4 md:w-6 md:h-6 text-white">
|
||||||
<svg class="w-8 h-6 md:w-10 md:h-8">
|
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-location-marker"></use>
|
||||||
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-flag-{product.country.code -> f:format.case(mode: 'lower')}"></use>
|
</svg>
|
||||||
</svg>
|
</a>
|
||||||
<f:if condition="{hotel}">
|
</f:then>
|
||||||
<f:then>
|
<f:else>
|
||||||
<a href="{ep:gmapsUrl(hotel: hotel)}" target="_blank" class="block bg-ep-primary-light px-2 py-1">
|
<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">
|
<svg class="w-4 h-4 md:w-6 md:h-6 text-white">
|
||||||
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-location-marker"></use>
|
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-location-marker"></use>
|
||||||
</svg>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
</f:then>
|
</f:else>
|
||||||
<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="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-location-marker"></use>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
</f:else>
|
|
||||||
</f:if>
|
|
||||||
<f:if condition="{product.concept}">
|
|
||||||
<div class="bg-concept-{product.concept.code} flex items-center text-white font-semibold leading-none uppercase h-6 md:h-8 px-2">
|
|
||||||
{product.concept.name}
|
|
||||||
</div>
|
|
||||||
</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="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#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}">
|
|
||||||
<div class="herounit__badge-wrapper">
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</f:if>
|
</f:if>
|
||||||
<f:if condition="{slide.image.0.description}">
|
<f:if condition="{product.concept}">
|
||||||
<div class="absolute bottom-0 right-0 bg-overlay-white font-sm text-gray-700">
|
<div class="bg-concept-{product.concept.code} flex items-center text-white font-semibold leading-none uppercase h-6 md:h-8 px-2">
|
||||||
{slide.image.0.description -> f:format.htmlspecialchars()}
|
{product.concept.name}
|
||||||
</div>
|
</div>
|
||||||
</f:if>
|
</f:if>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
<f:if condition="{referringUrl}">
|
||||||
</f:for>
|
<a href="{referringUrl}" class="button button--small mt-8">
|
||||||
</ul>
|
<svg class="w-4 h-4 text-white">
|
||||||
|
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#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}">
|
||||||
|
<div class="herounit__badge-wrapper">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</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>
|
</div>
|
||||||
</div>
|
</f:alias>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user