<div class="multi-column-slider ">
<div class="multi-column-slider__container">
<div class="multi-column-slider__inner-container">
<div class="multi-column-slider__loader is-visible">
<div class="loading-spinner">
<div class="loading-spinner__spinner--large"></div>
</div>
</div>
<div class="multi-column-slider__slider">
<div class="swiper">
<ul class="swiper-wrapper centered">
<li class="swiper-slide">
<article class="tile" data-location="/some-location/">
<div class="tile__row">
<div class="tile__column">
<h3 class="tile__title">
<a href="/some-location/" class="tile__link" title="Test Product 1">Test Product 1</a>
</h3>
<div class="tile__attributes">
<div class="attributes--small">
<ul class="attributes__list">
<li class="attributes__list-item">
<div class="attributes__name">Artikelnr.</div>
<div class="attributes__value " title="8547625">
8547625
</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">Kategorie</div>
<div class="attributes__value has-single-line-ellipsis" title="Testkategorie">
<a class="attributes__attribute-link" href="#" title="Testkategorie">Testkategorie</a>
</div>
</li>
</ul>
</div>
</div>
<div class="tile__price-actions-container">
<div class="tile__price">
<div class="price--regular">
<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-prefix">ab</div>
<div class="price-regular__current-currency">CHF</div>
</div>
<div class="price-regular__current-price-inner">
<div class="price-regular__current-value">9.90</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tile__actions-container">
<form class="wishlist-cart-actions">
<div class="wishlist-cart-actions__button-add-to-cart-wrapper">
<button class="button--primary" name="add-to-cart-submit" type="submit"> <span class="wishlist-cart-actions__button">
<span class="visually-hidden"></span>
<span class="wishlist-cart-actions__button-icon"></span>
</span>
</button>
</div>
</form>
</div>
</div>
</div>
<div class="tile__column">
<a href="/some-location/" class="tile__link">
<div class="image ">
<picture>
<img src="/example-assets/images/tile/product.png" class="image__img tile__image is-loading" alt="Test Product" srcset="/example-assets/images/tile/product.png 1x, /example-assets/images/tile/product@2x.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</a>
<div class="tile__logo">
<div class="logos">
<div class="image ">
<picture>
<img src="/example-assets/images/logos/brand-logo.png" class="image__img logos__brand--medium 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>
</div>
</div>
</div>
</article>
</li>
<li class="swiper-slide">
<article class="tile" data-location="/some-location/">
<div class="tile__row">
<div class="tile__column">
<h3 class="tile__title">
<a href="/some-location/" class="tile__link" title="Test Product 2">Test Product 2</a>
</h3>
<div class="tile__attributes">
<div class="attributes--small">
<ul class="attributes__list">
<li class="attributes__list-item">
<div class="attributes__name">Artikelnr.</div>
<div class="attributes__value " title="8547625">
8547625
</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">Kategorie</div>
<div class="attributes__value has-single-line-ellipsis" title="Testkategorie">
<a class="attributes__attribute-link" href="#" title="Testkategorie">Testkategorie</a>
</div>
</li>
</ul>
</div>
</div>
<div class="tile__price-actions-container">
<div class="tile__price">
<div class="price--regular">
<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-prefix--offer">ab</div>
<div class="price-regular__current-currency--offer">CHF</div>
</div>
<div class="price-regular__current-price-inner">
<div class="price-regular__current-value--offer">9.90</div>
</div>
</div>
<div class="price-regular__list-price">
<div class="price-regular__list-price-prefix">
<del>statt</del>
</div>
<div class="price-regular__list-price-inner">
<div class="price-regular__list-price-currency">
<del>CHF</del>
</div>
<div class="price-regular__list-price-value">
<del>15.90</del>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tile__actions-container">
<form class="wishlist-cart-actions">
<div class="wishlist-cart-actions__button-add-to-cart-wrapper">
<button class="button--primary" name="add-to-cart-submit" type="submit"> <span class="wishlist-cart-actions__button">
<span class="visually-hidden"></span>
<span class="wishlist-cart-actions__button-icon"></span>
</span>
</button>
</div>
</form>
</div>
</div>
</div>
<div class="tile__column">
<a href="/some-location/" class="tile__link">
<div class="image ">
<picture>
<img src="/example-assets/images/tile/product.png" class="image__img tile__image is-loading" alt="Test Product" srcset="/example-assets/images/tile/product.png 1x, /example-assets/images/tile/product@2x.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</a>
<div class="tile__logo">
<div class="logos">
<div class="image ">
<picture>
<img src="/example-assets/images/logos/brand-logo.png" class="image__img logos__brand--medium 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>
</div>
</div>
</div>
</article>
</li>
</ul>
<div class="multi-column-slider__pagination"></div>
</div>
<div class="multi-column-slider__navigation-next"></div>
<div class="multi-column-slider__navigation-prev"></div>
</div>
</div>
</div>
</div>
{% include '@SharedComponents/modules/shared-product/components/multi-column-slider/multi-column-slider.twig' %}
{
"items": [
{
"headingLevel": "3",
"name": "Test Product 1",
"image": {
"alt": "Test Product",
"src": "/example-assets/images/tile/product.png",
"src2x": "/example-assets/images/tile/product@2x.png"
},
"href": "/some-location/",
"logos": {
"size": "medium",
"logos": {
"brand": {
"alt": "alt",
"src": "/example-assets/images/logos/brand-logo.png",
"src2x": "/example-assets/images/logos/brand-logo.png"
}
}
},
"attributes": {
"variant": "small",
"attributes": [
{
"type": "text",
"name": "Artikelnr.",
"value": "8547625"
},
{
"type": "stock",
"name": "Lager",
"status": "available",
"tooltip": "Verfügbar ab Juli 2020"
},
{
"type": "link",
"name": "Kategorie",
"value": "Testkategorie",
"href": "#"
}
]
},
"price": {
"variant": "regular",
"labels": {
"from": "ab",
"instead": "statt"
},
"price": {
"currency": "CHF",
"price": "9.90",
"from": true
}
},
"cartButton": {
"action": "http://localhost:3005/add-to-cart/",
"method": "post",
"variant": "large-without-amount",
"buttonTitle": "In den Warenkorb",
"quantity": {
"id": "quantity",
"name": "qty",
"label": "Quantity",
"min": "1",
"max": "99",
"value": "5",
"required": true,
"disabled": false,
"autocomplete": ""
},
"identifier": {
"name": "productId",
"value": "abcdefghijk-123"
}
}
},
{
"headingLevel": "3",
"name": "Test Product 2",
"image": {
"alt": "Test Product",
"src": "/example-assets/images/tile/product.png",
"src2x": "/example-assets/images/tile/product@2x.png"
},
"href": "/some-location/",
"logos": {
"size": "medium",
"logos": {
"brand": {
"alt": "alt",
"src": "/example-assets/images/logos/brand-logo.png",
"src2x": "/example-assets/images/logos/brand-logo.png"
}
}
},
"attributes": {
"variant": "small",
"attributes": [
{
"type": "text",
"name": "Artikelnr.",
"value": "8547625"
},
{
"type": "stock",
"name": "Lager",
"status": "available",
"tooltip": "Verfügbar ab Juli 2020"
},
{
"type": "link",
"name": "Kategorie",
"value": "Testkategorie",
"href": "#"
}
]
},
"price": {
"variant": "regular",
"labels": {
"from": "ab",
"instead": "statt"
},
"price": {
"currency": "CHF",
"price": "9.90",
"from": true,
"listPrice": "15.90"
}
},
"cartButton": {
"action": "http://localhost:3005/add-to-cart/",
"method": "post",
"variant": "large-without-amount",
"buttonTitle": "In den Warenkorb",
"quantity": {
"id": "quantity",
"name": "qty",
"label": "Quantity",
"min": "1",
"max": "99",
"value": "5",
"required": true,
"disabled": false,
"autocomplete": ""
},
"identifier": {
"name": "productId",
"value": "abcdefghijk-123"
}
}
}
],
"centered": true
}
import './multi-column-slider.scss';
import MultiColumnSlider, {selector as sel} from 'cando-cx-components-library/components/modules/shared-product/components/multi-column-slider/multi-column-slider';
export default MultiColumnSlider;
export const selector = sel;
@import "~shared/base";
@import "~cando-cx-components-library/components/modules/shared-product/components/multi-column-slider/multi-column-slider";
No notes defined.