<div class="overview">
<div class="overview__container">
<div class="overview__row">
<div class="overview__column">
<div class="overview__column-container" data-information-column>
<div class="overview__title-container">
<h3 class="overview__title" data-title>Helmo Milano Jet Helm VAPENSIERO Helmo Milano Jet Helm VAPENSIERO Helmo Milano Jet Helm VAPENSIERO</h3>
</div>
<div class="overview__price">
<div class="price--large">
<div class="price__row">
<div class="price__column--regular-price">
<div class="price-regular">
<div class="price-regular__current">
<div class="price-regular__current-price-inner">
<div class="price-regular__current-currency">CHF</div>
</div>
<div class="price-regular__current-price-inner">
<div class="price-regular__current-value">189.90</div>
</div>
</div>
</div>
<div class="price-regular__note">UVP inkl. 7.7% MwSt.</div>
</div>
</div>
</div>
</div>
<div class="overview__metadata-container">
<div class="overview__attributes">
<div class="attributes--large-bold">
<ul class="attributes__list">
<li class="attributes__list-item">
<div class="attributes__name">Art.-Nr.</div>
<div class="attributes__value " title="8547625">
8547625
</div>
</li>
<li class="attributes__list-item">
<div class="attributes__name">Marke</div>
<div class="attributes__value has-single-line-ellipsis" title="UYN">
<a class="attributes__attribute-link" href="#" title="UYN">UYN</a>
</div>
</li>
<li class="attributes__list-item">
<div class="attributes__name">Einsatzbereich</div>
<div class="attributes__value has-single-line-ellipsis" title="Outdoor">
<a class="attributes__attribute-link" href="#" title="Outdoor">Outdoor</a>
</div>
</li>
<li class="attributes__list-item">
<div class="attributes__name">Kategorie</div>
<div class="attributes__value has-single-line-ellipsis" title="Schuhe">
<a class="attributes__attribute-link" href="#" title="Schuhe">Schuhe</a>
</div>
</li>
<li class="attributes__list-item">
<div class="attributes__name">Kurzbezeichnung</div>
<div class="attributes__value " title="XM1 run">
XM1 run
</div>
</li>
<li class="attributes__list-item">
<div class="attributes__name">Lager</div>
<div class="attributes__value ">
<div class="stock">
<button type="button" class="stock__toggle--available" data-info-tooltip-content="Verfügbar ab Juli 2020">
<span class="visually-hidden">Verfügbar ab Juli 2020</span>
</button>
</div>
</div>
</li>
<li class="attributes__list-item">
<div class="attributes__name">Radgrösse</div>
<div class="attributes__value " title="26 zoll">
26 zoll
</div>
</li>
<li class="attributes__list-item">
<div class="attributes__name">Farbe</div>
<div class="attributes__value " title="8/97 Hell-Lichtblond Cendré-Mahagoni">
8/97 Hell-Lichtblond Cendré-Mahagoni
</div>
</li>
<li class="attributes__list-item">
<div class="attributes__name">Grösse</div>
<div class="attributes__value " title="60ml">
60ml
</div>
</li>
<li class="attributes__list-item">
<div class="attributes__name">ANZAHL LIST ITEMS</div>
<div class="attributes__value " title="10 Stk">
10 Stk
</div>
</li>
<li class="attributes__list-item">
<div class="attributes__name">Overflow</div>
<div class="attributes__value " title="11 Stk">
11 Stk
</div>
</li>
</ul>
<button type="button" class="button-content-toggle is-hidden" data-show-more-label="mehr anzeigen" data-show-less-label="weniger anzeigen" data-attributes-toggle-button="true">mehr anzeigen</button>
</div>
</div>
</div>
<div class="overview__features" data-features>
<div class="wysiwyg-content">
<ul>
<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</li>
</ul>
</div>
</div>
<button type="button" class="button-content-toggle is-hidden" data-show-more-label="mehr anzeigen" data-show-less-label="weniger anzeigen" data-overview-features-toggle-button="true">mehr anzeigen</button>
</div>
</div>
<div class="overview__column">
<div class="overview__column-container" data-slider-column>
<div class="overview__specials-and-logos">
<div class="overview__specials">
<div class="specials">
<div class="specials--large-horizontally ">
<button type="button" class="specials__toggle" data-info-tooltip-content="Sale" style="background-color: #e30a24;">
<span class="visually-hidden">Sale</span>
<span class="image ">
<picture>
<img src="/example-assets/images/specials/sale.svg" class="image__img specials__toggle-image is-loading" alt="" onload="this.classList.remove('is-loading')" />
</picture>
</span>
</button>
<button type="button" class="specials__toggle" data-info-tooltip-content="New" style="background-color: #333333;">
<span class="visually-hidden">New</span>
<span class="image ">
<picture>
<img src="/example-assets/images/specials/new.svg" class="image__img specials__toggle-image is-loading" alt="" onload="this.classList.remove('is-loading')" />
</picture>
</span>
</button>
<button type="button" class="specials__toggle" data-info-tooltip-content="Bestseller" style="background-color: #ef5800;">
<span class="visually-hidden">Bestseller</span>
<span class="image ">
<picture>
<img src="/example-assets/images/specials/fire.svg" class="image__img specials__toggle-image is-loading" alt="" onload="this.classList.remove('is-loading')" />
</picture>
</span>
</button>
<button type="button" class="specials__toggle" data-info-tooltip-content="Kauftipp" style="background-color: #44a0d9;">
<span class="visually-hidden">Kauftipp</span>
<span class="image ">
<picture>
<img src="/example-assets/images/specials/tip.svg" class="image__img specials__toggle-image is-loading" alt="" onload="this.classList.remove('is-loading')" />
</picture>
</span>
</button>
</div>
</div>
</div>
<div class="overview__logos">
<div class="logos">
<div class="image ">
<picture>
<img src="/example-assets/images/logos/brand-logo.png" class="image__img logos__brand--large is-loading" alt="alt" srcset="/example-assets/images/logos/brand-logo.png 1x, /example-assets/images/logos/brand-logo.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
<div class="image ">
<picture>
<img src="/example-assets/images/logos/product-line-logo.jpg" class="image__img logos__productline--large is-loading" alt="alt" srcset="/example-assets/images/logos/product-line-logo.jpg 1x, /example-assets/images/logos/product-line-logo.jpg 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
</div>
<div class="detail-slider">
<div class="detail-slider__container">
<div class="detail-slider__top-slider">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="image ">
<picture>
<img src="/example-assets/images/detail-slider/image.jpg" class="image__img detail-slider__top-slider-image is-loading" alt="Test Produkt" srcset="/example-assets/images/detail-slider/image.jpg 1x, /example-assets/images/detail-slider/image.jpg 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
<div class="swiper-slide">
<div class="detail-slider__top-slider-video">
<div class="video-player">
<div class="video-player__thumbnail-container" data-modal-id="video-modal-601709256">
<div class="image ">
<picture>
<img src="https://img.youtube.com/vi/X6OByqtMDIo/maxresdefault.jpg" class="image__img video-player__thumbnail-image is-loading" alt="" onload="this.classList.remove('is-loading')" />
</picture>
</div>
<div class="video-player__thumbnail-play-button"></div>
</div>
</div>
<script type="text/html" class="modal__placeholder" id="video-modal-601709256-placeholder"></script>
</div>
</div>
<div class="swiper-slide">
<div class="detail-slider__top-slider-video">
<div class="video-player">
<div class="video-player__thumbnail-container" data-modal-id="video-modal-1577343818">
<div class="image ">
<picture>
<img src="/example-assets/images/video-player/poster.jpg" class="image__img video-player__thumbnail-image is-loading" alt="" onload="this.classList.remove('is-loading')" />
</picture>
</div>
<div class="video-player__thumbnail-play-button"></div>
</div>
</div>
<script type="text/html" class="modal__placeholder" id="video-modal-1577343818-placeholder"></script>
</div>
</div>
<div class="swiper-slide">
<div class="detail-slider__top-slider-video">
<div class="video-player">
<div class="video-player__thumbnail-container" data-modal-id="video-modal-169434941">
<div class="image ">
<picture>
<img src="/example-assets/images/video-player/poster.jpg" class="image__img video-player__thumbnail-image is-loading" alt="Test Produkt" onload="this.classList.remove('is-loading')" />
</picture>
</div>
<div class="video-player__thumbnail-play-button"></div>
</div>
</div>
<script type="text/html" class="modal__placeholder" id="video-modal-169434941-placeholder">
<aside class="modal modal--slide" id="video-modal-169434941" aria-hidden="true" data-modal>
<div class="modal__overlay" tabindex="-1" data-modal-close data-modal-overlay>
<div class="modal__container--medium" role="dialog" aria-modal="true" aria-labelledby="video-modal-169434941-title">
<div class="modal__container-inner">
<header class="modal__header">
<h3 class="modal__title" id="video-modal-169434941-title"></h3>
<div class="modal__close">
<button class="button-icon--icon-regular -icon-close" type="button" name="close" value="close" data-modal-close="">
<span class="visually-hidden"></span>
</button>
</div>
</header>
<main class="modal__content" id="video-modal-169434941-content">
<div class="video-player">
<span class="visually-hidden">Test Produkt</span>
<p class="visually-hidden">Test Description</p>
<video class="video-player__video" preload="auto" playsinline controls autoplay muted data-config="{'controls':true,'autoplay':true,'muted':true,'loop':{'active':false}}" poster="/example-assets/images/video-player/poster.jpg">
<source src="/example-assets/videos/video-player/video.mp4" type="video/mp4">
</video>
</div>
</main>
</div>
</div>
</div>
</aside>
</script>
</div>
</div>
<div class="swiper-slide">
<div class="image ">
<picture>
<img src="/example-assets/images/detail-slider/image.jpg" class="image__img detail-slider__top-slider-image is-loading" alt="Test Produkt" srcset="/example-assets/images/detail-slider/image.jpg 1x, /example-assets/images/detail-slider/image.jpg 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
<div class="swiper-slide">
<div class="image ">
<picture>
<img src="/example-assets/images/detail-slider/image.jpg" class="image__img detail-slider__top-slider-image is-loading" alt="Test Produkt" srcset="/example-assets/images/detail-slider/image.jpg 1x, /example-assets/images/detail-slider/image.jpg 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
<div class="swiper-slide">
<div class="image ">
<picture>
<img src="/example-assets/images/detail-slider/image.jpg" class="image__img detail-slider__top-slider-image is-loading" alt="Test Produkt" srcset="/example-assets/images/detail-slider/image.jpg 1x, /example-assets/images/detail-slider/image.jpg 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
<div class="swiper-slide">
<div class="image ">
<picture>
<img src="/example-assets/images/detail-slider/image.jpg" class="image__img detail-slider__top-slider-image is-loading" alt="Test Produkt" srcset="/example-assets/images/detail-slider/image.jpg 1x, /example-assets/images/detail-slider/image.jpg 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
<div class="swiper-slide">
<div class="image ">
<picture>
<img src="/example-assets/images/detail-slider/image.jpg" class="image__img detail-slider__top-slider-image is-loading" alt="Test Produkt" srcset="/example-assets/images/detail-slider/image.jpg 1x, /example-assets/images/detail-slider/image.jpg 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
</div>
<div class="detail-slider__top-slider-next"></div>
<div class="detail-slider__top-slider-prev"></div>
</div>
<div class="detail-slider__bottom-slider">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="detail-slider__bottom-slider-image-container">
<div class="image ">
<picture>
<img src="/example-assets/images/detail-slider/thumb.png" class="image__img detail-slider__bottom-slider-image is-loading" alt="Test Produkt" srcset="/example-assets/images/detail-slider/thumb.png 1x, /example-assets/images/detail-slider/thumb.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="detail-slider__bottom-slider-image-container--video">
<div class="image ">
<picture>
<img src="https://img.youtube.com/vi/X6OByqtMDIo/maxresdefault.jpg" class="image__img detail-slider__bottom-slider-image is-loading" alt="Test Produkt" onload="this.classList.remove('is-loading')" />
</picture>
</div>
<div class="detail-slider__bottom-slider-thumbnail-play-button"></div>
</div>
</div>
<div class="swiper-slide">
<div class="detail-slider__bottom-slider-image-container--video">
<div class="image ">
<picture>
<img src="/example-assets/images/detail-slider/thumb.png" class="image__img detail-slider__bottom-slider-image is-loading" alt="Test Produkt" onload="this.classList.remove('is-loading')" />
</picture>
</div>
<div class="detail-slider__bottom-slider-thumbnail-play-button"></div>
</div>
</div>
<div class="swiper-slide">
<div class="detail-slider__bottom-slider-image-container--video">
<div class="image ">
<picture>
<img src="/example-assets/images/detail-slider/thumb.png" class="image__img detail-slider__bottom-slider-image is-loading" alt="Test Produkt" srcset="/example-assets/images/detail-slider/thumb.png 1x, /example-assets/images/detail-slider/thumb.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
<div class="detail-slider__bottom-slider-thumbnail-play-button"></div>
</div>
</div>
<div class="swiper-slide">
<div class="detail-slider__bottom-slider-image-container">
<div class="image ">
<picture>
<img src="/example-assets/images/detail-slider/thumb.png" class="image__img detail-slider__bottom-slider-image is-loading" alt="Test Produkt" srcset="/example-assets/images/detail-slider/thumb.png 1x, /example-assets/images/detail-slider/thumb.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="detail-slider__bottom-slider-image-container">
<div class="image ">
<picture>
<img src="/example-assets/images/detail-slider/thumb.png" class="image__img detail-slider__bottom-slider-image is-loading" alt="Test Produkt" srcset="/example-assets/images/detail-slider/thumb.png 1x, /example-assets/images/detail-slider/thumb.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="detail-slider__bottom-slider-image-container">
<div class="image ">
<picture>
<img src="/example-assets/images/detail-slider/thumb.png" class="image__img detail-slider__bottom-slider-image is-loading" alt="Test Produkt" srcset="/example-assets/images/detail-slider/thumb.png 1x, /example-assets/images/detail-slider/thumb.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="detail-slider__bottom-slider-image-container">
<div class="image ">
<picture>
<img src="/example-assets/images/detail-slider/thumb.png" class="image__img detail-slider__bottom-slider-image is-loading" alt="Test Produkt" srcset="/example-assets/images/detail-slider/thumb.png 1x, /example-assets/images/detail-slider/thumb.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="detail-slider__bottom-slider-image-container">
<div class="image ">
<picture>
<img src="/example-assets/images/detail-slider/thumb.png" class="image__img detail-slider__bottom-slider-image is-loading" alt="Test Produkt" srcset="/example-assets/images/detail-slider/thumb.png 1x, /example-assets/images/detail-slider/thumb.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
</div>
</div>
<div class="detail-slider__bottom-slider-next"></div>
<div class="detail-slider__bottom-slider-prev"></div>
</div>
<div class="detail-slider__meta--videos-and-images">
<div class="detail-slider__meta-left">6 Bilder</div>
<div class="detail-slider__meta-right">3 Videos</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Product",
"name": "Helmo Milano Jet Helm VAPENSIERO Helmo Milano Jet Helm VAPENSIERO Helmo Milano Jet Helm VAPENSIERO",
"description": "<ul><li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</li></ul>",
"image": ["/example-assets/images/detail-slider/image.jpg", "/example-assets/images/detail-slider/image.jpg", "/example-assets/images/detail-slider/image.jpg", "/example-assets/images/detail-slider/image.jpg", "/example-assets/images/detail-slider/image.jpg", "/example-assets/images/detail-slider/image.jpg"],
"offers": {
"@type": "Offer",
"price": "189.90",
"priceCurrency": "CHF"
}
}
</script>
</div>
{% include '@SharedComponents/modules/b2b-product-detail/components/overview/overview.twig' %}
{
"headingLevel": "3",
"title": "Helmo Milano Jet Helm VAPENSIERO Helmo Milano Jet Helm VAPENSIERO Helmo Milano Jet Helm VAPENSIERO",
"slider": {
"labels": {
"amountOfImages": "6 Bilder",
"amountOfVideos": "3 Videos"
},
"items": [
{
"thumbnail": {
"alt": "Test Produkt",
"src": "/example-assets/images/detail-slider/thumb.png",
"src2x": "/example-assets/images/detail-slider/thumb.png"
},
"image": {
"alt": "Test Produkt",
"src": "/example-assets/images/detail-slider/image.jpg",
"src2x": "/example-assets/images/detail-slider/image.jpg"
}
},
{
"thumbnail": {
"alt": "Test Produkt",
"src": "https://img.youtube.com/vi/X6OByqtMDIo/maxresdefault.jpg"
},
"youtube": {
"id": "X6OByqtMDIo",
"poster": "https://img.youtube.com/vi/X6OByqtMDIo/maxresdefault.jpg",
"autoplay": false,
"overlay": true
}
},
{
"thumbnail": {
"alt": "Test Produkt",
"src": "/example-assets/images/detail-slider/thumb.png"
},
"vimeo": {
"id": "229479141",
"poster": "/example-assets/images/video-player/poster.jpg",
"autoplay": false,
"overlay": true
}
},
{
"thumbnail": {
"alt": "Test Produkt",
"src": "/example-assets/images/detail-slider/thumb.png",
"src2x": "/example-assets/images/detail-slider/thumb.png"
},
"video": {
"title": "Test Produkt",
"description": "Test Description",
"mp4": "/example-assets/videos/video-player/video.mp4",
"poster": "/example-assets/images/video-player/poster.jpg",
"autoplay": false,
"overlay": true
}
},
{
"thumbnail": {
"alt": "Test Produkt",
"src": "/example-assets/images/detail-slider/thumb.png",
"src2x": "/example-assets/images/detail-slider/thumb.png"
},
"image": {
"alt": "Test Produkt",
"src": "/example-assets/images/detail-slider/image.jpg",
"src2x": "/example-assets/images/detail-slider/image.jpg"
}
},
{
"thumbnail": {
"alt": "Test Produkt",
"src": "/example-assets/images/detail-slider/thumb.png",
"src2x": "/example-assets/images/detail-slider/thumb.png"
},
"image": {
"alt": "Test Produkt",
"src": "/example-assets/images/detail-slider/image.jpg",
"src2x": "/example-assets/images/detail-slider/image.jpg"
}
},
{
"thumbnail": {
"alt": "Test Produkt",
"src": "/example-assets/images/detail-slider/thumb.png",
"src2x": "/example-assets/images/detail-slider/thumb.png"
},
"image": {
"alt": "Test Produkt",
"src": "/example-assets/images/detail-slider/image.jpg",
"src2x": "/example-assets/images/detail-slider/image.jpg"
}
},
{
"thumbnail": {
"alt": "Test Produkt",
"src": "/example-assets/images/detail-slider/thumb.png",
"src2x": "/example-assets/images/detail-slider/thumb.png"
},
"image": {
"alt": "Test Produkt",
"src": "/example-assets/images/detail-slider/image.jpg",
"src2x": "/example-assets/images/detail-slider/image.jpg"
}
},
{
"thumbnail": {
"alt": "Test Produkt",
"src": "/example-assets/images/detail-slider/thumb.png",
"src2x": "/example-assets/images/detail-slider/thumb.png"
},
"image": {
"alt": "Test Produkt",
"src": "/example-assets/images/detail-slider/image.jpg",
"src2x": "/example-assets/images/detail-slider/image.jpg"
}
}
]
},
"logos": {
"size": "large",
"logos": {
"brand": {
"alt": "alt",
"src": "/example-assets/images/logos/brand-logo.png",
"src2x": "/example-assets/images/logos/brand-logo.png"
},
"productLine": {
"alt": "alt",
"src": "/example-assets/images/logos/product-line-logo.jpg",
"src2x": "/example-assets/images/logos/product-line-logo.jpg"
}
}
},
"specials": {
"variant": "large-horizontally",
"items": [
{
"value": "Sale",
"color": "#e30a24",
"icon": "/example-assets/images/specials/sale.svg"
},
{
"value": "New",
"color": "#333333",
"icon": "/example-assets/images/specials/new.svg"
},
{
"value": "Bestseller",
"color": "#ef5800",
"icon": "/example-assets/images/specials/fire.svg"
},
{
"value": "Kauftipp",
"color": "#44a0d9",
"icon": "/example-assets/images/specials/tip.svg"
}
]
},
"price": {
"variant": "large",
"labels": {
"from": "ab",
"instead": "statt"
},
"price": {
"currency": "CHF",
"price": "189.90",
"note": "UVP inkl. 7.7% MwSt."
}
},
"attributes": {
"variant": "large-bold",
"labels": {
"more": "mehr anzeigen",
"less": "weniger anzeigen"
},
"attributes": [
{
"type": "text",
"name": "Art.-Nr.",
"value": "8547625"
},
{
"type": "link",
"name": "Marke",
"value": "UYN",
"href": "#"
},
{
"type": "link",
"name": "Einsatzbereich",
"value": "Outdoor",
"href": "#"
},
{
"type": "link",
"name": "Kategorie",
"value": "Schuhe",
"href": "#"
},
{
"type": "text",
"name": "Kurzbezeichnung",
"value": "XM1 run"
},
{
"type": "stock",
"name": "Lager",
"status": "available",
"tooltip": "Verfügbar ab Juli 2020"
},
{
"type": "text",
"name": "Radgrösse",
"value": "26 zoll"
},
{
"type": "text",
"name": "Farbe",
"value": "8/97 Hell-Lichtblond Cendré-Mahagoni"
},
{
"type": "text",
"name": "Grösse",
"value": "60ml"
},
{
"type": "text",
"name": "ANZAHL LIST ITEMS",
"value": "10 Stk"
},
{
"type": "text",
"name": "Overflow",
"value": "11 Stk"
}
]
},
"features": {
"value": "<ul><li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</li></ul>",
"toggle": {
"more": "mehr anzeigen",
"less": "weniger anzeigen"
}
}
}
import './overview.scss';
import Overview, {selector as sel} from 'cando-cx-components-library/components/modules/b2b-product-detail/components/overview/overview';
export default Overview;
export const selector = sel;
@import "~shared/base";
@import "~cando-cx-components-library/components/modules/b2b-product-detail/components/overview/overview";
No notes defined.