<div class="variants-table">
<div class="variants-table__container">
<div class="responsive-table--first-column-mobile-full-height -spacing-large">
<div class="table-search" data-offset="detail-tabs">
<div class="table-search__container">
<div class="text-field--light text-field-search--light is-initialized" data-disable-text-field-js>
<div class="text-field__wrapper text-field-search__wrapper">
<input class="text-field__input text-field-search__input" id="variants-table-search" type="text" name="variants-table-search" required data-responsive-table-search="true" placeholder="Suche" />
<label class="visually-hidden" for="variants-table-search">Suche</label>
<button type="reset" class="text-field-search__reset"></button>
<button type="submit" class="text-field-search__search"></button>
<div class="text-field-search__loader ">
<div class="loading-spinner -vertical -horizontal">
<div class="loading-spinner__spinner--small"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="responsive-table__container--auto-scrollbar">
<table class="responsive-table__table" data-responsive-table-filter-context>
<colgroup>
<col style="72px">
<col style="">
<col style="">
<col style="">
<col style="">
<col style="">
<col style="">
<col style="">
<col style="144px">
</colgroup>
<thead>
<tr class="responsive-table__tr">
<th class="responsive-table__th">
</th>
<th class="responsive-table__th is-centered">
Lager
</th>
<th class="responsive-table__th">
Lief.-Art.-Nr.
</th>
<th class="responsive-table__th">
Flex Column A
</th>
<th class="responsive-table__th">
Flex Column B
</th>
<th class="responsive-table__th">
Flex Column C
</th>
<th class="responsive-table__th">
UVP
</th>
<th class="responsive-table__th">
Preis
</th>
<th class="responsive-table__th">
</th>
</tr>
</thead>
<tbody>
<tr class="responsive-table__tr">
<td class="responsive-table__td is-top-aligned">
<div class="responsive-table__td-inner-container">
<div class="image ">
<picture>
<img src="/example-assets/images/responsive-table/thumb.png" class="image__img image-cell__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>
<div class="image-cell__specials">
<div class="specials">
<div class="specials--medium-horizontally-vertically ">
<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 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">Lief.-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">Flex Column A</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>93929695SC</p>
</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">Flex Column B</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>rot</p>
</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">Flex Column C</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>50 mm</p>
</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">
<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">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Preis</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<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">13.50</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"></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__quantity-wrapper">
<div class="quantity-switcher--light">
<button type="button" class="quantity-switcher__minus">
<span class="quantity-switcher__minus-content">–</span>
</button>
<input class="quantity-switcher__quantity" type="number" id="quantity-1672753361" min="1" max="99" name="qty" value="5" required />
<label class="visually-hidden" for="quantity-1672753361">Quantity</label>
<input type="hidden" name="productId" value="abcdefghijk-123" />
<button type="button" class="quantity-switcher__plus">
<span class="quantity-switcher__plus-content">+</span>
</button>
</div>
</div>
<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">In den Warenkorb</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">Zur Merklist hinzufügen</span>
</button>
</div>
</form>
</div>
</div>
</div>
</td>
</tr>
<tr class="responsive-table__tr">
<td class="responsive-table__td is-top-aligned">
<div class="responsive-table__td-inner-container">
<div class="image ">
<picture>
<img src="/example-assets/images/responsive-table/thumb.png" class="image__img image-cell__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>
<div class="image-cell__specials">
<div class="specials">
<div class="specials--medium-horizontally-vertically ">
<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 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">Lief.-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">Flex Column A</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>93929695SC</p>
</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">Flex Column B</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>rot</p>
</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">Flex Column C</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>50 mm</p>
</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">
<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">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Preis</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<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">13.50</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"></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__quantity-wrapper">
<div class="quantity-switcher--light">
<button type="button" class="quantity-switcher__minus">
<span class="quantity-switcher__minus-content">–</span>
</button>
<input class="quantity-switcher__quantity" type="number" id="quantity-955948661" min="1" max="99" name="qty" value="5" required />
<label class="visually-hidden" for="quantity-955948661">Quantity</label>
<input type="hidden" name="productId" value="abcdefghijk-123" />
<button type="button" class="quantity-switcher__plus">
<span class="quantity-switcher__plus-content">+</span>
</button>
</div>
</div>
<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">In den Warenkorb</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">Zur Merklist hinzufügen</span>
</button>
</div>
</form>
</div>
</div>
</div>
</td>
</tr>
<tr class="responsive-table__tr">
<td class="responsive-table__td is-top-aligned">
<div class="responsive-table__td-inner-container">
<div class="image ">
<picture>
<img src="/example-assets/images/responsive-table/thumb.png" class="image__img image-cell__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>
<div class="image-cell__specials">
<div class="specials">
<div class="specials--medium-horizontally-vertically ">
<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 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">Lief.-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">Flex Column A</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>93929695SC</p>
</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">Flex Column B</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>rot</p>
</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">Flex Column C</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>50 mm</p>
</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">
<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">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Preis</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<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">13.50</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"></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__quantity-wrapper">
<div class="quantity-switcher--light">
<button type="button" class="quantity-switcher__minus">
<span class="quantity-switcher__minus-content">–</span>
</button>
<input class="quantity-switcher__quantity" type="number" id="quantity-679478616" min="1" max="99" name="qty" value="5" required />
<label class="visually-hidden" for="quantity-679478616">Quantity</label>
<input type="hidden" name="productId" value="abcdefghijk-123" />
<button type="button" class="quantity-switcher__plus">
<span class="quantity-switcher__plus-content">+</span>
</button>
</div>
</div>
<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">In den Warenkorb</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">Zur Merklist hinzufügen</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="9">
<div class="wysiwyg-content">
<p class="responsive-table__no-match">Keine Ergebnisse gefunden</p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
{% include '@SharedComponents/modules/b2b-product-detail/components/variants-table/variants-table.twig' %}
{
"variant": "normal-width",
"table": {
"noMatchMessage": "Keine Ergebnisse gefunden",
"autoScrollbar": true,
"search": {
"searchField": {
"variant": "light",
"id": "variants-table-search",
"name": "variants-table-search",
"label": "Suche",
"required": true,
"value": "",
"disabled": false,
"error": "",
"type": "text",
"autocomplete": "",
"attributes": {
"data-responsive-table-search": "true"
}
},
"offset": "detail-tabs"
},
"firstColumnMobileFullHeight": true,
"columnDefs": [
{
"name": "image",
"width": "72px"
},
{
"label": "Lager",
"name": "stock",
"thClass": "is-centered"
},
{
"label": "Lief.-Art.-Nr.",
"name": "articleNo"
},
{
"label": "Flex Column A",
"name": "flexColumnA"
},
{
"label": "Flex Column B",
"name": "flexColumnB"
},
{
"label": "Flex Column C",
"name": "flexColumnC"
},
{
"label": "UVP",
"name": "rrp"
},
{
"label": "Preis",
"name": "livePrice"
},
{
"name": "actions",
"width": "144px"
}
],
"rowData": [
{
"image": {
"type": "template",
"path": "modules/shared-product/components/cell-components/image-cell/image-cell",
"tdClass": "is-top-aligned",
"data": {
"image": {
"src": "/example-assets/images/responsive-table/thumb.png",
"src2x": "/example-assets/images/responsive-table/thumb.png",
"alt": "Alt",
"title": "Title"
},
"specials": {
"variant": "medium-horizontally-vertically",
"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>"
}
},
"stock": {
"tdClass": "is-centered",
"type": "template",
"path": "modules/shared-product/components/stock/stock",
"data": {
"status": "available",
"tooltip": "Verfügbar"
}
},
"flexColumnA": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>93929695SC</p>"
}
},
"flexColumnB": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>rot</p>"
}
},
"flexColumnC": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>50 mm</p>"
}
},
"rrp": {
"type": "template",
"path": "modules/shared-product/components/price/price",
"data": {
"variant": "small",
"labels": {
"from": "ab",
"instead": "statt"
},
"price": {
"currency": "CHF",
"price": "24.90"
}
}
},
"livePrice": {
"type": "template",
"path": "modules/shared-product/components/price/price",
"data": {
"variant": "small",
"labels": {
"from": "ab",
"instead": "statt"
},
"price": {
"currency": "CHF",
"price": "13.50"
}
}
},
"actions": {
"type": "template",
"path": "modules/shared-product/components/wishlist-cart-actions/wishlist-cart-actions",
"tdClass": "is-right-aligned",
"data": {
"cartButton": {
"title": "In den Warenkorb",
"disabled": false
},
"quantitySwitcher": {
"variant": "light",
"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": {
"title": "Zur Merklist hinzufügen",
"disabled": false
}
}
}
},
{
"image": {
"type": "template",
"path": "modules/shared-product/components/cell-components/image-cell/image-cell",
"tdClass": "is-top-aligned",
"data": {
"image": {
"src": "/example-assets/images/responsive-table/thumb.png",
"src2x": "/example-assets/images/responsive-table/thumb.png",
"alt": "Alt",
"title": "Title"
},
"specials": {
"variant": "medium-horizontally-vertically",
"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>"
}
},
"stock": {
"tdClass": "is-centered",
"type": "template",
"path": "modules/shared-product/components/stock/stock",
"data": {
"status": "available",
"tooltip": "Verfügbar"
}
},
"flexColumnA": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>93929695SC</p>"
}
},
"flexColumnB": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>rot</p>"
}
},
"flexColumnC": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>50 mm</p>"
}
},
"rrp": {
"type": "template",
"path": "modules/shared-product/components/price/price",
"data": {
"variant": "small",
"labels": {
"from": "ab",
"instead": "statt"
},
"price": {
"currency": "CHF",
"price": "24.90"
}
}
},
"livePrice": {
"type": "template",
"path": "modules/shared-product/components/price/price",
"data": {
"variant": "small",
"labels": {
"from": "ab",
"instead": "statt"
},
"price": {
"currency": "CHF",
"price": "13.50"
}
}
},
"actions": {
"type": "template",
"path": "modules/shared-product/components/wishlist-cart-actions/wishlist-cart-actions",
"tdClass": "is-right-aligned",
"data": {
"cartButton": {
"title": "In den Warenkorb",
"disabled": false
},
"quantitySwitcher": {
"variant": "light",
"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": {
"title": "Zur Merklist hinzufügen",
"disabled": false
}
}
}
},
{
"image": {
"type": "template",
"path": "modules/shared-product/components/cell-components/image-cell/image-cell",
"tdClass": "is-top-aligned",
"data": {
"image": {
"src": "/example-assets/images/responsive-table/thumb.png",
"src2x": "/example-assets/images/responsive-table/thumb.png",
"alt": "Alt",
"title": "Title"
},
"specials": {
"variant": "medium-horizontally-vertically",
"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>"
}
},
"stock": {
"tdClass": "is-centered",
"type": "template",
"path": "modules/shared-product/components/stock/stock",
"data": {
"status": "available",
"tooltip": "Verfügbar"
}
},
"flexColumnA": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>93929695SC</p>"
}
},
"flexColumnB": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>rot</p>"
}
},
"flexColumnC": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>50 mm</p>"
}
},
"rrp": {
"type": "template",
"path": "modules/shared-product/components/price/price",
"data": {
"variant": "small",
"labels": {
"from": "ab",
"instead": "statt"
},
"price": {
"currency": "CHF",
"price": "24.90"
}
}
},
"livePrice": {
"type": "template",
"path": "modules/shared-product/components/price/price",
"data": {
"variant": "small",
"labels": {
"from": "ab",
"instead": "statt"
},
"price": {
"currency": "CHF",
"price": "13.50"
}
}
},
"actions": {
"type": "template",
"path": "modules/shared-product/components/wishlist-cart-actions/wishlist-cart-actions",
"tdClass": "is-right-aligned",
"data": {
"cartButton": {
"title": "In den Warenkorb",
"disabled": false
},
"quantitySwitcher": {
"variant": "light",
"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": {
"title": "Zur Merklist hinzufügen",
"disabled": false
}
}
}
}
]
}
}
import './variants-table.scss';
import VariantsTable, {selector as sel} from 'cando-cx-components-library/components/modules/b2b-product-detail/components/variants-table/variants-table';
export default VariantsTable;
export const selector = sel;
@import "~shared/base";
@import "~cando-cx-components-library/components/modules/b2b-product-detail/components/variants-table/variants-table";
No notes defined.