<section class="listing" data-filter-list-off-canvas-id="listing-335671113">
<div class="listing__container">
<div class="listing__row">
<div class="listing__column--content">
<div class="listing__header">
<div class="listing__title-container">
<h3 class="listing__title">Koleston</h3>
<p class="listing__subtitle">(130 Resultate)</p>
</div>
<div class="listing__settings">
<div class="filter-settings">
<form action="/" method="get" class="filter-settings__container">
<div class="filter-settings__sort-by">
<div class="select--light is-initialized is-filled-in with-label">
<div class="select__wrapper">
<select class="select__select" id="sort-by" name="sort-by" required>
<option value="" disabled>Please choose</option>
<option value="bestAsc">Beste Ergebnisse</option>
<option value="priceAsc">Preis aufsteigend</option>
<option value="priceDesc" selected="selected">Preis absteigend</option>
</select>
<label class="select__label" for="sort-by">Sort by
*
</label>
</div>
</div>
</div>
<div class="filter-settings__items-per-page">
<div class="select--light is-initialized is-filled-in with-label">
<div class="select__wrapper">
<select class="select__select" id="items-per-page" name="items-per-page" required>
<option value="" disabled>Please choose</option>
<option value="30">30</option>
<option value="60" selected="selected">60</option>
<option value="120">120</option>
</select>
<label class="select__label" for="items-per-page">Items per page
*
</label>
</div>
</div>
</div>
</form>
<div class="filter-settings__filter-view">
<div class="filter-view">
<div class="filter-view__title">Ansicht:</div>
<div class="filter-view__button is-active">
<button class="button-icon--icon-regular -icon-list-rows" type="button">
<span class="visually-hidden">Listenansicht</span>
</button>
</div>
<div class="filter-view__button">
<button class="button-icon--icon-regular -icon-list-tiles" type="button">
<span class="visually-hidden">Kachelansicht</span>
</button>
</div>
</div>
</div>
<div class="filter-settings__filters" data-filter-list-off-canvas-open>
<button class="button--primary-small" type="button">Filters</button>
</div>
</div>
</div>
</div>
<div class="listing__content">
<div class="list-rows">
<div class="responsive-table--first-column-mobile-full-height -spacing-large">
<div class="responsive-table__container--auto-scrollbar">
<table class="responsive-table__table" data-responsive-table-filter-context>
<colgroup>
<col style="">
<col style="">
<col style="">
<col style="">
<col style="">
<col style="">
</colgroup>
<thead>
<tr class="responsive-table__tr">
<th class="responsive-table__th">
</th>
<th class="responsive-table__th">
Art.-Nr.
</th>
<th class="responsive-table__th">
Artikel
</th>
<th class="responsive-table__th is-centered">
Lager
</th>
<th class="responsive-table__th">
UVP
</th>
<th class="responsive-table__th is-hidden-on-desktop">
Aktion
</th>
</tr>
</thead>
<tbody>
<tr class="responsive-table__tr">
<td class="responsive-table__td is-display-flex">
<div class="responsive-table__td-inner-container">
<a href="#" class="list-rows__image-link">
<div class="image ">
<picture>
<img src="/example-assets/images/responsive-table/thumb.png" class="image__img list-rows__image is-loading" alt="Alt" title="Title" srcset="/example-assets/images/responsive-table/thumb.png 1x, /example-assets/images/responsive-table/thumb.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</a>
<div class="list-rows__specials">
<div class="specials">
<div class="specials--medium-vertically-horizontally is-one-column ">
<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>
</div>
</div>
</div>
</div>
</td>
<td class="responsive-table__td">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Art.-Nr.</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<a href="#">10.80344</a>
</div>
</div>
</div>
</div>
</td>
<td class="responsive-table__td">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Artikel</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<h5 class="item-cell__title">
<a href="#" class="item-cell__title-link">Bosch Gepäckträgerakku PowerPack 500 Performance Anthrazit</a>
</h5>
</div>
</div>
</div>
</td>
<td class="responsive-table__td is-centered">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Lager</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="stock">
<button type="button" class="stock__toggle--available" data-info-tooltip-content="Verfügbar">
<span class="visually-hidden">Verfügbar</span>
</button>
</div>
</div>
</div>
</div>
</td>
<td class="responsive-table__td">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">UVP</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container--prevent-wrap">
<div class="price--small">
<div class="price__row">
<div class="price__column--regular-price">
<div class="price-regular__special--discount is-offset">AKTION</div>
<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">24.90</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
<td class="responsive-table__td is-right-aligned">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Aktion</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-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>
<div class="wishlist-cart-actions__button-add-to-wishlist-wrapper">
<button type="submit" name="add-to-wishlist-submit" class="wishlist-cart-actions__button-add-to-wishlist" data-add-to-wishlist>
<span class="visually-hidden"></span>
</button>
</div>
</form>
</div>
</div>
</div>
</td>
</tr>
<tr class="responsive-table__tr">
<td class="responsive-table__td is-display-flex">
<div class="responsive-table__td-inner-container">
<a href="#" class="list-rows__image-link">
<div class="image ">
<picture>
<img src="/example-assets/images/responsive-table/thumb.png" class="image__img list-rows__image is-loading" alt="Alt" title="Title" srcset="/example-assets/images/responsive-table/thumb.png 1x, /example-assets/images/responsive-table/thumb.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</a>
<div class="list-rows__specials">
<div class="specials">
<div class="specials--medium-vertically-horizontally is-one-column ">
<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>
</div>
</div>
</div>
</div>
</td>
<td class="responsive-table__td">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Art.-Nr.</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<a href="#">10.80344</a>
</div>
</div>
</div>
</div>
</td>
<td class="responsive-table__td">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Artikel</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<h5 class="item-cell__title">
<a href="#" class="item-cell__title-link">Bosch Gepäckträgerakku PowerPack 500 Performance Anthrazit</a>
</h5>
</div>
</div>
</div>
</td>
<td class="responsive-table__td is-centered">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Lager</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="stock">
<button type="button" class="stock__toggle--available" data-info-tooltip-content="Verfügbar">
<span class="visually-hidden">Verfügbar</span>
</button>
</div>
</div>
</div>
</div>
</td>
<td class="responsive-table__td">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">UVP</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container--prevent-wrap">
<div class="price--small">
<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">24.90</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
<td class="responsive-table__td is-right-aligned">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Aktion</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-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>
<div class="wishlist-cart-actions__button-add-to-wishlist-wrapper">
<button type="submit" name="add-to-wishlist-submit" class="wishlist-cart-actions__button-add-to-wishlist" data-add-to-wishlist>
<span class="visually-hidden"></span>
</button>
</div>
</form>
</div>
</div>
</div>
</td>
</tr>
<tr class="responsive-table__tr">
<td class="responsive-table__td is-display-flex">
<div class="responsive-table__td-inner-container">
<a href="#" class="list-rows__image-link">
<div class="image ">
<picture>
<img src="/example-assets/images/responsive-table/thumb.png" class="image__img list-rows__image is-loading" alt="Alt" title="Title" srcset="/example-assets/images/responsive-table/thumb.png 1x, /example-assets/images/responsive-table/thumb.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</a>
<div class="list-rows__specials">
<div class="specials">
<div class="specials--medium-vertically-horizontally is-one-column ">
<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>
</div>
</div>
</div>
</div>
</td>
<td class="responsive-table__td">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Art.-Nr.</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<a href="#">10.80344</a>
</div>
</div>
</div>
</div>
</td>
<td class="responsive-table__td">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Artikel</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<h5 class="item-cell__title">
<a href="#" class="item-cell__title-link">Bosch Gepäckträgerakku PowerPack 500 Performance Anthrazit</a>
</h5>
</div>
</div>
</div>
</td>
<td class="responsive-table__td is-centered">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Lager</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="stock">
<button type="button" class="stock__toggle--available" data-info-tooltip-content="Verfügbar">
<span class="visually-hidden">Verfügbar</span>
</button>
</div>
</div>
</div>
</div>
</td>
<td class="responsive-table__td">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">UVP</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container--prevent-wrap">
<div class="price--small">
<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">24.90</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
<td class="responsive-table__td is-right-aligned">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Aktion</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-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>
<div class="wishlist-cart-actions__button-add-to-wishlist-wrapper">
<button type="submit" name="add-to-wishlist-submit" class="wishlist-cart-actions__button-add-to-wishlist" data-add-to-wishlist>
<span class="visually-hidden"></span>
</button>
</div>
</form>
</div>
</div>
</div>
</td>
</tr>
<tr class="responsive-table__tr">
<td class="responsive-table__td is-display-flex">
<div class="responsive-table__td-inner-container">
<a href="#" class="list-rows__image-link">
<div class="image ">
<picture>
<img src="/example-assets/images/responsive-table/thumb.png" class="image__img list-rows__image is-loading" alt="Alt" title="Title" srcset="/example-assets/images/responsive-table/thumb.png 1x, /example-assets/images/responsive-table/thumb.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</a>
<div class="list-rows__specials">
<div class="specials">
<div class="specials--medium-vertically-horizontally is-one-column ">
<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>
</div>
</div>
</div>
</div>
</td>
<td class="responsive-table__td">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Art.-Nr.</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<a href="#">10.80344</a>
</div>
</div>
</div>
</div>
</td>
<td class="responsive-table__td">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Artikel</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<h5 class="item-cell__title">
<a href="#" class="item-cell__title-link">Bosch Gepäckträgerakku PowerPack 500 Performance Anthrazit</a>
</h5>
</div>
</div>
</div>
</td>
<td class="responsive-table__td is-centered">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Lager</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="stock">
<button type="button" class="stock__toggle--available" data-info-tooltip-content="Verfügbar">
<span class="visually-hidden">Verfügbar</span>
</button>
</div>
</div>
</div>
</div>
</td>
<td class="responsive-table__td">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">UVP</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container--prevent-wrap">
<div class="price--small">
<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">24.90</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
<td class="responsive-table__td is-right-aligned">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Aktion</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-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>
<div class="wishlist-cart-actions__button-add-to-wishlist-wrapper">
<button type="submit" name="add-to-wishlist-submit" class="wishlist-cart-actions__button-add-to-wishlist" data-add-to-wishlist>
<span class="visually-hidden"></span>
</button>
</div>
</form>
</div>
</div>
</div>
</td>
</tr>
<tr class="responsive-table__tr">
<td class="responsive-table__td is-display-flex">
<div class="responsive-table__td-inner-container">
<a href="#" class="list-rows__image-link">
<div class="image ">
<picture>
<img src="/example-assets/images/responsive-table/thumb.png" class="image__img list-rows__image is-loading" alt="Alt" title="Title" srcset="/example-assets/images/responsive-table/thumb.png 1x, /example-assets/images/responsive-table/thumb.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</a>
<div class="list-rows__specials">
<div class="specials">
<div class="specials--medium-vertically-horizontally is-one-column ">
<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>
</div>
</div>
</div>
</div>
</td>
<td class="responsive-table__td">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Art.-Nr.</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<a href="#">10.80344</a>
</div>
</div>
</div>
</div>
</td>
<td class="responsive-table__td">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Artikel</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<h5 class="item-cell__title">
<a href="#" class="item-cell__title-link">Bosch Gepäckträgerakku PowerPack 500 Performance Anthrazit</a>
</h5>
</div>
</div>
</div>
</td>
<td class="responsive-table__td is-centered">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Lager</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="stock">
<button type="button" class="stock__toggle--available" data-info-tooltip-content="Verfügbar">
<span class="visually-hidden">Verfügbar</span>
</button>
</div>
</div>
</div>
</div>
</td>
<td class="responsive-table__td">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">UVP</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container--prevent-wrap">
<div class="price--small">
<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">24.90</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
<td class="responsive-table__td is-right-aligned">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Aktion</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-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>
<div class="wishlist-cart-actions__button-add-to-wishlist-wrapper">
<button type="submit" name="add-to-wishlist-submit" class="wishlist-cart-actions__button-add-to-wishlist" data-add-to-wishlist>
<span class="visually-hidden"></span>
</button>
</div>
</form>
</div>
</div>
</div>
</td>
</tr>
<tr class="responsive-table__tr">
<td class="responsive-table__td is-display-flex">
<div class="responsive-table__td-inner-container">
<a href="#" class="list-rows__image-link">
<div class="image ">
<picture>
<img src="/example-assets/images/responsive-table/thumb.png" class="image__img list-rows__image is-loading" alt="Alt" title="Title" srcset="/example-assets/images/responsive-table/thumb.png 1x, /example-assets/images/responsive-table/thumb.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</a>
<div class="list-rows__specials">
<div class="specials">
<div class="specials--medium-vertically-horizontally is-one-column ">
<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>
</div>
</div>
</div>
</div>
</td>
<td class="responsive-table__td">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Art.-Nr.</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<a href="#">10.80344</a>
</div>
</div>
</div>
</div>
</td>
<td class="responsive-table__td">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Artikel</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<h5 class="item-cell__title">
<a href="#" class="item-cell__title-link">Bosch Gepäckträgerakku PowerPack 500 Performance Anthrazit</a>
</h5>
</div>
</div>
</div>
</td>
<td class="responsive-table__td is-centered">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Lager</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="stock">
<button type="button" class="stock__toggle--available" data-info-tooltip-content="Verfügbar">
<span class="visually-hidden">Verfügbar</span>
</button>
</div>
</div>
</div>
</div>
</td>
<td class="responsive-table__td">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">UVP</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container--prevent-wrap">
<div class="price--small">
<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">24.90</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
<td class="responsive-table__td is-right-aligned">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Aktion</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-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>
<div class="wishlist-cart-actions__button-add-to-wishlist-wrapper">
<button type="submit" name="add-to-wishlist-submit" class="wishlist-cart-actions__button-add-to-wishlist" data-add-to-wishlist>
<span class="visually-hidden"></span>
</button>
</div>
</form>
</div>
</div>
</div>
</td>
</tr>
<tr class="responsive-table__tr" data-responsive-table-filter-no-match hidden>
<td class="responsive-table__td" colspan="6">
<div class="wysiwyg-content">
<p class="responsive-table__no-match">Keine Ergebnisse gefunden</p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="pagination">
<div class="pagination__container">
<div class="pagination__prev">
<a href="#" class="button-navigation--prev">
<span class="visually-hidden">Vorherige Seite</span>
</a>
</div>
<ul class="pagination__pages">
<li class="pagination__page">
<a href="#" class="pagination__page-link">1</a>
</li>
<li class="pagination__page">
<a href="#" class="pagination__page-link--active">2</a>
</li>
<li class="pagination__page">
<a href="#" class="pagination__page-link">3</a>
</li>
<li class="pagination__page">
<span class="pagination__page-dots">…</span>
</li>
<li class="pagination__page">
<a href="#" class="pagination__page-link">32</a>
</li>
</ul>
<div class="pagination__next">
<a href="#" class="button-navigation--next">
<span class="visually-hidden">Nächste Seite</span>
</a>
</div>
</div>
</div>
</div>
<div class="listing__column--filter">
<form class="filter-list" method="get" action="/filter-page/" data-filter-list-off-canvas-id="filter-list-873932114">
<div class="off-canvas">
<div class="off-canvas__overlay"></div>
<div id="filter-list-873932114" class="off-canvas__panel--right" data-visible-width="767">
<div class="off-canvas__container">
<div class="off-canvas__header">
<button class="button-icon--icon-regular -icon-close" type="button" data-off-canvas-close="true">
<span class="visually-hidden">Schliessen</span>
</button>
<div class="filter-list__apply-button">
<button class="button--secondary-small" disabled type="button" data-filter-list-off-canvas-close="true">Anwenden</button>
</div>
</div>
<div class="off-canvas__content">
<aside class="filter-list__body">
<h3 class="filter-list__body-title">Kategorien</h3>
<div class="filter-category">
<h4 class="filter-category__title">
<a href="/de/shop/bekleidung--ausruestung-c1056" class="filter-category__title-link">Bekleidung & Ausrüstung</a>
</h4>
<ul class="filter-category__list">
<li class="filter-category__list-item">
<a href="/de/shop/bekleidung--ausruestung-c1056/helme-c1073" class="filter-category__list-item-link--bold">
<span class="filter-category__list-item-label">Helme</span>
<span class="filter-category__list-item-count">391</span>
</a>
<ul class="filter-category__list">
<li class="filter-category__list-item">
<a href="/de/shop/bekleidung--ausruestung-c1056/helme-c1073/modelle-c1074" class="filter-category__list-item-link">
<span class="filter-category__list-item-label">Modelle</span>
<span class="filter-category__list-item-count">303</span>
</a>
</li>
<li class="filter-category__list-item">
<a href="/de/shop/bekleidung--ausruestung-c1056/helme-c1073/zubehoer-c1272" class="filter-category__list-item-link">
<span class="filter-category__list-item-label">Zubehör</span>
<span class="filter-category__list-item-count">88</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
<h3 class="filter-list__body-title">Resultate filtern</h3>
<ul class="filter-list__list">
<li class="filter-list__list-item">
<h4 class="filter-list__list-item-title">Specials</h4>
<div class="filter-list__list-item-content">
<div class="filter-multi-relation">
<div class="checkbox--light is-initialized is-filled-in">
<div class="checkbox__wrapper">
<input class="checkbox__input" id="filter-new" type="checkbox" name="filter-new" value="selected" />
<label class="checkbox__label" for="filter-new">
<span>Neu
</span>
</label>
</div>
</div>
<div class="checkbox--light is-initialized is-filled-in">
<div class="checkbox__wrapper">
<input class="checkbox__input" id="filter-bestseller" type="checkbox" name="filter-bestseller" value="selected" checked />
<label class="checkbox__label" for="filter-bestseller">
<span>Bestseller
</span>
</label>
</div>
</div>
<div class="checkbox--light is-initialized is-filled-in">
<div class="checkbox__wrapper">
<input class="checkbox__input" id="filter-discount" type="checkbox" name="filter-discount" value="selected" />
<label class="checkbox__label" for="filter-discount">
<span>Reduziert
</span>
</label>
</div>
</div>
<div class="checkbox--light is-initialized is-filled-in">
<div class="checkbox__wrapper">
<input class="checkbox__input" id="filter-available-soon" type="checkbox" name="filter-available-soon" value="selected" />
<label class="checkbox__label" for="filter-available-soon">
<span>Demnächst verfügbar
</span>
</label>
</div>
</div>
</div>
</div>
</li>
<li class="filter-list__list-item">
<h4 class="filter-list__list-item-title">Preis</h4>
<div class="filter-list__list-item-content">
<div class="filter-multi-number-range">
<div class="text-field-range--light">
<div class="text-field-range__container">
<div class="text-field--light text-field-placeholder--light is-initialized is-filled-in">
<div class="text-field__wrapper text-field-placeholder__wrapper ">
<input class="text-field__input text-field-placeholder__input" id="text-field-range-from" type="number" name="text-field-range-from" value="10" required autocomplete="on" placeholder="ab *" />
<label class="visually-hidden" for="text-field-range-from">ab
*
</label>
</div>
</div>
<div class="text-field--light text-field-placeholder--light is-initialized">
<div class="text-field__wrapper text-field-placeholder__wrapper ">
<input class="text-field__input text-field-placeholder__input" id="text-field-range-to" type="number" name="text-field-range-to" required autocomplete="on" placeholder="bis *" />
<label class="visually-hidden" for="text-field-range-to">bis
*
</label>
</div>
</div>
</div>
</div> <button class="button--primary-small" type="button">Ok</button>
</div>
</div>
</li>
<li class="filter-list__list-item">
<h4 class="filter-list__list-item-title">Marke</h4>
<div class="filter-list__list-item-content">
<div class="filter-multi-relation">
<div class="checkbox--light is-initialized is-filled-in">
<div class="checkbox__wrapper">
<input class="checkbox__input" id="filter-brand-a" type="checkbox" name="filter-brand-a" value="selected" />
<label class="checkbox__label" for="filter-brand-a">
<span>Marke A
</span>
</label>
</div>
</div>
<div class="checkbox--light is-initialized is-filled-in">
<div class="checkbox__wrapper">
<input class="checkbox__input" id="filter-brand-b" type="checkbox" name="filter-brand-b" value="selected" />
<label class="checkbox__label" for="filter-brand-b">
<span>Marke B
</span>
</label>
</div>
</div>
<div class="checkbox--light is-initialized is-filled-in">
<div class="checkbox__wrapper">
<input class="checkbox__input" id="filter-brand-c" type="checkbox" name="filter-brand-c" value="selected" />
<label class="checkbox__label" for="filter-brand-c">
<span>Marke C
</span>
</label>
</div>
</div>
<div class="checkbox--light is-initialized is-filled-in">
<div class="checkbox__wrapper">
<input class="checkbox__input" id="filter-brand-d" type="checkbox" name="filter-brand-d" value="selected" checked />
<label class="checkbox__label" for="filter-brand-d">
<span>Marke D
</span>
</label>
</div>
</div>
</div>
</div>
</li>
</ul>
</aside>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
{% include '@SharedComponents/modules/b2b-product-listing/templates/listing/listing.twig' %}
{
"headingLevel": "3",
"title": "Koleston",
"subtitle": "(130 Resultate)",
"filters": {
"headingLevel": "3",
"labels": {
"categories": "Kategorien",
"filters": "Resultate filtern"
},
"action": "/filter-page/",
"applyButton": {
"variant": "secondary-small",
"type": "button",
"role": "button",
"title": "Anwenden",
"disabled": true,
"attributes": {
"data-filter-list-off-canvas-close": "true"
}
},
"offCanvasCloseButton": {
"variant": "icon-regular",
"title": "Schliessen",
"icon": "close",
"type": "button",
"role": "button"
},
"categories": {
"headingLevel": "4",
"parentCategory": {
"label": "Bekleidung & Ausrüstung",
"value": "1056",
"count": "391",
"link": "/de/shop/bekleidung--ausruestung-c1056"
},
"currentCategory": {
"label": "Helme",
"value": "1073",
"count": "391",
"link": "/de/shop/bekleidung--ausruestung-c1056/helme-c1073"
},
"subCategories": [
{
"label": "Modelle",
"value": "1074",
"count": "303",
"link": "/de/shop/bekleidung--ausruestung-c1056/helme-c1073/modelle-c1074"
},
{
"label": "Zubehör",
"value": "1272",
"count": "88",
"link": "/de/shop/bekleidung--ausruestung-c1056/helme-c1073/zubehoer-c1272"
}
]
},
"filters": [
{
"name": "multi-relation",
"label": "Specials",
"data": {
"options": [
{
"variant": "light",
"id": "filter-new",
"name": "filter-new",
"label": "Neu",
"value": "selected",
"required": false,
"disabled": false,
"checked": false,
"error": "",
"helper": ""
},
{
"variant": "light",
"id": "filter-bestseller",
"name": "filter-bestseller",
"label": "Bestseller",
"value": "selected",
"required": false,
"disabled": false,
"checked": true,
"error": "",
"helper": ""
},
{
"variant": "light",
"id": "filter-discount",
"name": "filter-discount",
"label": "Reduziert",
"value": "selected",
"required": false,
"disabled": false,
"checked": false,
"error": "",
"helper": ""
},
{
"variant": "light",
"id": "filter-available-soon",
"name": "filter-available-soon",
"label": "Demnächst verfügbar",
"value": "selected",
"required": false,
"disabled": false,
"checked": false,
"error": "",
"helper": ""
}
]
}
},
{
"name": "multi-number-range",
"label": "Preis",
"data": {
"range": {
"variant": "light",
"from": {
"variant": "light",
"id": "text-field-range-from",
"name": "text-field-range-from",
"label": "ab",
"required": true,
"value": "10",
"disabled": false,
"type": "number",
"autocomplete": "false",
"error": "",
"helper": ""
},
"to": {
"variant": "light",
"id": "text-field-range-to",
"name": "text-field-range-to",
"label": "bis",
"required": true,
"value": "",
"disabled": false,
"type": "number",
"autocomplete": "false"
}
},
"button": {
"variant": "primary-small",
"type": "button",
"role": "button",
"title": "Ok",
"disabled": false
}
}
},
{
"name": "multi-relation",
"label": "Marke",
"data": {
"options": [
{
"variant": "light",
"id": "filter-brand-a",
"name": "filter-brand-a",
"label": "Marke A",
"value": "selected",
"required": false,
"disabled": false,
"checked": false,
"error": "",
"helper": ""
},
{
"variant": "light",
"id": "filter-brand-b",
"name": "filter-brand-b",
"label": "Marke B",
"value": "selected",
"required": false,
"disabled": false,
"checked": false,
"error": "",
"helper": ""
},
{
"variant": "light",
"id": "filter-brand-c",
"name": "filter-brand-c",
"label": "Marke C",
"value": "selected",
"required": false,
"disabled": false,
"checked": false,
"error": "",
"helper": ""
},
{
"variant": "light",
"id": "filter-brand-d",
"name": "filter-brand-d",
"label": "Marke D",
"value": "selected",
"required": false,
"disabled": false,
"checked": true,
"error": "",
"helper": ""
}
]
}
}
]
},
"settings": {
"action": "/",
"sortBy": {
"variant": "light",
"id": "sort-by",
"name": "sort-by",
"label": "Sort by",
"required": true,
"disabled": false,
"selected": "priceDesc",
"options": {
"bestAsc": "Beste Ergebnisse",
"priceAsc": "Preis aufsteigend",
"priceDesc": "Preis absteigend"
},
"choose": "Please choose"
},
"itemsPerPage": {
"variant": "light",
"id": "items-per-page",
"name": "items-per-page",
"label": "Items per page",
"required": true,
"disabled": false,
"selected": "60",
"options": {
"30": "30",
"60": "60",
"120": "120"
},
"choose": "Please choose"
},
"filters": {
"variant": "primary-small",
"type": "button",
"role": "button",
"disabled": false,
"title": "Filters"
},
"filterView": {
"labels": {
"title": "Ansicht:"
},
"buttons": [
{
"button": {
"name": "list-rows",
"active": true
},
"context": {
"variant": "icon-regular",
"title": "Listenansicht",
"icon": "list-rows",
"type": "button",
"role": "button"
}
},
{
"button": {
"name": "list-tiles"
},
"context": {
"variant": "icon-regular",
"title": "Kachelansicht",
"icon": "list-tiles",
"type": "button",
"role": "button"
}
}
]
}
},
"listRows": {
"headingLevel": "4",
"table": {
"noMatchMessage": "Keine Ergebnisse gefunden",
"autoScrollbar": true,
"firstColumnMobileFullHeight": true,
"columnDefs": [
{
"name": "image"
},
{
"label": "Art.-Nr.",
"name": "articleNo"
},
{
"label": "Artikel",
"name": "item"
},
{
"label": "Lager",
"name": "stock",
"thClass": "is-centered"
},
{
"label": "UVP",
"name": "rrp",
"preventWrap": true
},
{
"label": "Aktion",
"name": "actions",
"thClass": "is-hidden-on-desktop"
}
],
"rowData": [
{
"image": {
"type": "text",
"tdClass": "is-display-flex",
"data": {
"href": "#",
"image": {
"src": "/example-assets/images/responsive-table/thumb.png",
"src2x": "/example-assets/images/responsive-table/thumb.png",
"alt": "Alt",
"title": "Title"
},
"specials": {
"variant": "medium-vertically-horizontally",
"items": [
{
"value": "Sale",
"color": "#e30a24",
"icon": "/example-assets/images/specials/sale.svg"
},
{
"value": "New",
"color": "#333333",
"icon": "/example-assets/images/specials/new.svg"
}
]
}
}
},
"articleNo": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<a href=\"#\">10.80344</a>"
}
},
"item": {
"type": "template",
"path": "modules/shared-product/components/cell-components/item-cell/item-cell",
"data": {
"heading": {
"level": "5"
},
"href": "#",
"title": "Bosch Gepäckträgerakku PowerPack 500 Performance Anthrazit"
}
},
"stock": {
"type": "template",
"path": "modules/shared-product/components/stock/stock",
"tdClass": "is-centered",
"data": {
"status": "available",
"tooltip": "Verfügbar"
}
},
"rrp": {
"type": "template",
"path": "modules/shared-product/components/price/price",
"data": {
"variant": "small",
"labels": {
"from": "ab",
"instead": "statt"
},
"price": {
"from": true,
"currency": "CHF",
"price": "24.90",
"special": {
"type": "discount",
"value": "AKTION",
"offset": true
}
}
}
},
"actions": {
"type": "template",
"path": "modules/shared-product/components/wishlist-cart-actions/wishlist-cart-actions",
"tdClass": "is-right-aligned",
"data": {
"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"
}
},
"wishlistButton": {
"addAction": "http://localhost:3005/wishlist-add/",
"buttonTitle": "Zur Merklist hinzufügen"
}
}
}
},
{
"image": {
"type": "text",
"tdClass": "is-display-flex",
"data": {
"href": "#",
"image": {
"src": "/example-assets/images/responsive-table/thumb.png",
"src2x": "/example-assets/images/responsive-table/thumb.png",
"alt": "Alt",
"title": "Title"
},
"specials": {
"variant": "medium-vertically-horizontally",
"items": [
{
"value": "Sale",
"color": "#e30a24",
"icon": "/example-assets/images/specials/sale.svg"
},
{
"value": "New",
"color": "#333333",
"icon": "/example-assets/images/specials/new.svg"
}
]
}
}
},
"articleNo": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<a href=\"#\">10.80344</a>"
}
},
"item": {
"type": "template",
"path": "modules/shared-product/components/cell-components/item-cell/item-cell",
"data": {
"heading": {
"level": "5"
},
"href": "#",
"title": "Bosch Gepäckträgerakku PowerPack 500 Performance Anthrazit"
}
},
"stock": {
"type": "template",
"path": "modules/shared-product/components/stock/stock",
"tdClass": "is-centered",
"data": {
"status": "available",
"tooltip": "Verfügbar"
}
},
"rrp": {
"type": "template",
"path": "modules/shared-product/components/price/price",
"data": {
"variant": "small",
"labels": {
"from": "ab",
"instead": "statt"
},
"price": {
"currency": "CHF",
"price": "24.90"
}
}
},
"actions": {
"type": "template",
"path": "modules/shared-product/components/wishlist-cart-actions/wishlist-cart-actions",
"tdClass": "is-right-aligned",
"data": {
"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"
}
},
"wishlistButton": {
"addAction": "http://localhost:3005/wishlist-add/",
"buttonTitle": "Zur Merklist hinzufügen"
}
}
}
},
{
"image": {
"type": "text",
"tdClass": "is-display-flex",
"data": {
"href": "#",
"image": {
"src": "/example-assets/images/responsive-table/thumb.png",
"src2x": "/example-assets/images/responsive-table/thumb.png",
"alt": "Alt",
"title": "Title"
},
"specials": {
"variant": "medium-vertically-horizontally",
"items": [
{
"value": "Sale",
"color": "#e30a24",
"icon": "/example-assets/images/specials/sale.svg"
},
{
"value": "New",
"color": "#333333",
"icon": "/example-assets/images/specials/new.svg"
}
]
}
}
},
"articleNo": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<a href=\"#\">10.80344</a>"
}
},
"item": {
"type": "template",
"path": "modules/shared-product/components/cell-components/item-cell/item-cell",
"data": {
"heading": {
"level": "5"
},
"href": "#",
"title": "Bosch Gepäckträgerakku PowerPack 500 Performance Anthrazit"
}
},
"stock": {
"type": "template",
"path": "modules/shared-product/components/stock/stock",
"tdClass": "is-centered",
"data": {
"status": "available",
"tooltip": "Verfügbar"
}
},
"rrp": {
"type": "template",
"path": "modules/shared-product/components/price/price",
"data": {
"variant": "small",
"labels": {
"from": "ab",
"instead": "statt"
},
"price": {
"currency": "CHF",
"price": "24.90"
}
}
},
"actions": {
"type": "template",
"path": "modules/shared-product/components/wishlist-cart-actions/wishlist-cart-actions",
"tdClass": "is-right-aligned",
"data": {
"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"
}
},
"wishlistButton": {
"addAction": "http://localhost:3005/wishlist-add/",
"buttonTitle": "Zur Merklist hinzufügen"
}
}
}
},
{
"image": {
"type": "text",
"tdClass": "is-display-flex",
"data": {
"href": "#",
"image": {
"src": "/example-assets/images/responsive-table/thumb.png",
"src2x": "/example-assets/images/responsive-table/thumb.png",
"alt": "Alt",
"title": "Title"
},
"specials": {
"variant": "medium-vertically-horizontally",
"items": [
{
"value": "Sale",
"color": "#e30a24",
"icon": "/example-assets/images/specials/sale.svg"
},
{
"value": "New",
"color": "#333333",
"icon": "/example-assets/images/specials/new.svg"
}
]
}
}
},
"articleNo": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<a href=\"#\">10.80344</a>"
}
},
"item": {
"type": "template",
"path": "modules/shared-product/components/cell-components/item-cell/item-cell",
"data": {
"heading": {
"level": "5"
},
"href": "#",
"title": "Bosch Gepäckträgerakku PowerPack 500 Performance Anthrazit"
}
},
"stock": {
"type": "template",
"path": "modules/shared-product/components/stock/stock",
"tdClass": "is-centered",
"data": {
"status": "available",
"tooltip": "Verfügbar"
}
},
"rrp": {
"type": "template",
"path": "modules/shared-product/components/price/price",
"data": {
"variant": "small",
"labels": {
"from": "ab",
"instead": "statt"
},
"price": {
"currency": "CHF",
"price": "24.90"
}
}
},
"actions": {
"type": "template",
"path": "modules/shared-product/components/wishlist-cart-actions/wishlist-cart-actions",
"tdClass": "is-right-aligned",
"data": {
"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"
}
},
"wishlistButton": {
"addAction": "http://localhost:3005/wishlist-add/",
"buttonTitle": "Zur Merklist hinzufügen"
}
}
}
},
{
"image": {
"type": "text",
"tdClass": "is-display-flex",
"data": {
"href": "#",
"image": {
"src": "/example-assets/images/responsive-table/thumb.png",
"src2x": "/example-assets/images/responsive-table/thumb.png",
"alt": "Alt",
"title": "Title"
},
"specials": {
"variant": "medium-vertically-horizontally",
"items": [
{
"value": "Sale",
"color": "#e30a24",
"icon": "/example-assets/images/specials/sale.svg"
},
{
"value": "New",
"color": "#333333",
"icon": "/example-assets/images/specials/new.svg"
}
]
}
}
},
"articleNo": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<a href=\"#\">10.80344</a>"
}
},
"item": {
"type": "template",
"path": "modules/shared-product/components/cell-components/item-cell/item-cell",
"data": {
"heading": {
"level": "5"
},
"href": "#",
"title": "Bosch Gepäckträgerakku PowerPack 500 Performance Anthrazit"
}
},
"stock": {
"type": "template",
"path": "modules/shared-product/components/stock/stock",
"tdClass": "is-centered",
"data": {
"status": "available",
"tooltip": "Verfügbar"
}
},
"rrp": {
"type": "template",
"path": "modules/shared-product/components/price/price",
"data": {
"variant": "small",
"labels": {
"from": "ab",
"instead": "statt"
},
"price": {
"currency": "CHF",
"price": "24.90"
}
}
},
"actions": {
"type": "template",
"path": "modules/shared-product/components/wishlist-cart-actions/wishlist-cart-actions",
"tdClass": "is-right-aligned",
"data": {
"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"
}
},
"wishlistButton": {
"addAction": "http://localhost:3005/wishlist-add/",
"buttonTitle": "Zur Merklist hinzufügen"
}
}
}
},
{
"image": {
"type": "text",
"tdClass": "is-display-flex",
"data": {
"href": "#",
"image": {
"src": "/example-assets/images/responsive-table/thumb.png",
"src2x": "/example-assets/images/responsive-table/thumb.png",
"alt": "Alt",
"title": "Title"
},
"specials": {
"variant": "medium-vertically-horizontally",
"items": [
{
"value": "Sale",
"color": "#e30a24",
"icon": "/example-assets/images/specials/sale.svg"
},
{
"value": "New",
"color": "#333333",
"icon": "/example-assets/images/specials/new.svg"
}
]
}
}
},
"articleNo": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<a href=\"#\">10.80344</a>"
}
},
"item": {
"type": "template",
"path": "modules/shared-product/components/cell-components/item-cell/item-cell",
"data": {
"heading": {
"level": "5"
},
"href": "#",
"title": "Bosch Gepäckträgerakku PowerPack 500 Performance Anthrazit"
}
},
"stock": {
"type": "template",
"path": "modules/shared-product/components/stock/stock",
"tdClass": "is-centered",
"data": {
"status": "available",
"tooltip": "Verfügbar"
}
},
"rrp": {
"type": "template",
"path": "modules/shared-product/components/price/price",
"data": {
"variant": "small",
"labels": {
"from": "ab",
"instead": "statt"
},
"price": {
"currency": "CHF",
"price": "24.90"
}
}
},
"actions": {
"type": "template",
"path": "modules/shared-product/components/wishlist-cart-actions/wishlist-cart-actions",
"tdClass": "is-right-aligned",
"data": {
"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"
}
},
"wishlistButton": {
"addAction": "http://localhost:3005/wishlist-add/",
"buttonTitle": "Zur Merklist hinzufügen"
}
}
}
}
]
}
},
"pagination": {
"prev": {
"title": "Vorherige Seite",
"href": "#"
},
"pages": [
{
"title": "1",
"href": "#"
},
{
"title": "2",
"href": "#",
"active": true
},
{
"title": "3",
"href": "#"
},
{
"title": "…"
},
{
"title": "32",
"href": "#"
}
],
"next": {
"title": "Nächste Seite",
"href": "#"
}
}
}
import './listing.scss';
@import "~shared/base";
@import "~cando-cx-components-library/components/modules/b2b-product-listing/templates/listing/listing";
No notes defined.