<article class="product-snippet" data-initcolor="0">
<div class="product-snippet__header">
<div class="product-snippet__visual">
<a href="https://pioneerdj.com" class="product-snippet__image">
<picture class="visual">
<img data-sizes="auto" data-src="/graphics/product-snippet.png" class="lazyload" alt="">
</picture>
</a>
</div>
</div>
<div class="product-snippet__content">
<h4 class="product-snippet__heading heading">
<a href="" class="link link--default">
<span class="link__label">CDJ-2000NXS2</span>
</a>
</h4>
<span class="product-snippet__price">€ 1999</span>
<div class="product-snippet__description">
Pro-DJ multi player with high-res audio support
</div>
</div>
<div class="product-snippet__actions actions actions--start">
<div class="actions__item">
<a href="" class="link link--colored">
<span class="link__label">Buy now</span>
</a>
</div>
</div>
</article>
<article class="product-snippet{{#if multicolor}} product-snippet--multicolor{{/if}}" data-initcolor="0">
<div class="product-snippet__header">
{{#unless multicolor}}
<div class="product-snippet__visual">
<a href="https://pioneerdj.com" class="product-snippet__image">
{{render '@visual' visual merge=true }}
</a>
</div>
{{else}}
<div class="product-snippet__slider swiper-container">
<div class="swiper-wrapper">
{{#each multicolor}}
<div class="swiper-slide">
<div class="product-snippet__visual">
<a href="{{ this.url }}" class="product-snippet__image">
{{render '@visual' this merge=true }}
</a>
</div>
</div>
{{/each}}
</div>
<div class="product-snippet__arrows">
<span class="product-snippet__arrow product-snippet__arrow--prev">
{{render '@icon-chevron' }}
<span class="screen-reader-text">Previous</span>
</span>
<span class="product-snippet__arrow product-snippet__arrow--next">
{{render '@icon-chevron' }}
<span class="screen-reader-text">Next</span>
</span>
</div>
</div>
<div class="product-snippet__colors">
{{#each multicolor}}
<span class="product-snippet__color">
{{render '@radio-color' this.radio-color }}
</span>
{{/each}}
</div>
{{/unless}}
</div>
<div class="product-snippet__content">
<h4 class="product-snippet__heading heading">
{{#if multicolor}}
{{#each multicolor}}
<span class="product-snippet__label">
{{render '@link' this merge=true }}
</span>
{{/each}}
{{else}}
{{render '@link' heading merge=true }}
{{/if}}
</h4>
{{#if price}}
<span class="product-snippet__price">{{ price }}</span>
{{/if}}
{{#if description}}
<div class="product-snippet__description">
{{ description }}
</div>
{{/if}}
</div>
{{#if action }}
<div class="product-snippet__actions actions actions--start">
<div class="actions__item">
{{render '@link--colored' action merge=true }}
</div>
</div>
{{/if}}
</article>
visual:
src: /graphics/product-snippet.png
heading:
url: ''
label: CDJ-2000NXS2
modifier: default
price: € 1999
description: Pro-DJ multi player with high-res audio support
action:
url: ''
label: Buy now
const PRODUCTSNIPPET = ((w, d, undefined) => {
'use strict';
const selectors = {
theWrap: '.product-snippet--multicolor',
theSlider: '.product-snippet__slider',
theArrowPrev: '.product-snippet__arrow--prev',
theArrowNext: '.product-snippet__arrow--next',
theColor: '.product-snippet__color',
theLabel: '.product-snippet__label',
};
const classes = {
isActive: 'is-active',
};
const els = {};
const s = {};
const init = () => {
els.theWraps = d.querySelectorAll(selectors.theWrap);
[...els.theWraps].forEach((theWrap) => {
const theSlider = theWrap.querySelector(selectors.theSlider);
const theColors = theWrap.querySelectorAll(selectors.theColor);
const theLabels = theWrap.querySelectorAll(selectors.theLabel);
const theSwiper = new Swiper(theSlider, {
loop: true,
simulateTouch: false,
initialSlide: ~~theWrap.dataset.initcolor || 0,
navigation: {
prevEl: selectors.theArrowPrev,
nextEl: selectors.theArrowNext,
},
on: {
activeIndexChange: (swiper) => {
[...theColors].forEach((theColor, index) => {
if (swiper.realIndex === index) {
theColor.classList.add(classes.isActive);
theLabels[index].classList.add(classes.isActive);
return;
}
theColor.classList.remove(classes.isActive);
theLabels[index].classList.remove(classes.isActive);
});
},
},
});
[...theColors].forEach((theColor, index) => {
theColor.addEventListener('click', () => {
theSwiper.slideTo(index + 1, 0);
});
});
});
};
d.addEventListener('DOMContentLoaded', init);
})(window, window.document);
.product-snippet {
display: flex;
flex: 1 1 auto;
flex-direction: column;
user-select: none;
}
.product-snippet__header {
.product-snippet--multicolor & {
position: relative;
overflow: hidden;
background-color: #F7F7F7;
}
}
.product-snippet__visual {
flex: 0 0 auto;
padding: var(--gap--8);
.product-snippet:not(.product-snippet--multicolor) & {
padding: 0 var(--gap--1);
background-color: #F7F7F7;
@media (min-width: 1100px) {
padding: 0 var(--gap--2);
}
}
}
.product-snippet__image {
transition: transform 700ms;
position: relative;
display: block;
width: 100%;
height: 0;
padding-top: 100%;
backface-visibility: hidden;
.product-snippet__visual:hover & {
@media (hover:hover) {
transform: scale(1.05);
}
}
img {
object-fit: contain !important;
}
}
.product-snippet__arrow {
transform: translate(0, -50%);
position: absolute;
top: 50%;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
}
.product-snippet__arrow--prev {
transform: translate(0, -50%) rotate(-180deg);
left: calc((var(--gap--8) - 18px) / 2);
cursor: pointer;
}
.product-snippet__arrow--next {
right: calc((var(--gap--8) - 18px) / 2);
cursor: pointer;
}
.product-snippet__colors {
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
display: flex;
align-items: center;
padding: var(--gap--3);
}
.product-snippet__color {
display: block;
margin-left: var(--gap--2);
cursor: pointer;
&:first-child {
margin-left: 0;
}
}
.product-snippet__content {
flex: 1 1 auto;
margin-top: var(--gap--6);
}
.product-snippet__heading {
position: relative;
display: inline-block;
width: auto;
font-size: 1em;
font-weight: 700;
}
.product-snippet__heading:after {
.product-snippet__inner:hover & {
transform: translate(-50%, .75em);
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 100%;
height: 1px;
background-color: currentColor;
content: '' !important;
backface-visibility: hidden;
}
}
.product-snippet__label {
display: none;
&.is-active {
display: block;
}
}
.product-snippet__price {
display: block;
margin: var(--gap--1) 0 var(--gap--2);
color: var(--color--neutrals-6);
font-size: .85714286em;
}
.product-snippet__description {
width: 85%;
font-size: .85714286em;
}
.product-snippet__actions {
flex: 0 0 auto;
margin-top: var(--gap--3);
font-size: .85714286em;
}
No notes defined.