<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="">
</colgroup>
<tbody>
<tr class="responsive-table__tr product-instant-search-table__result">
<td class="responsive-table__td" data-location="#">
<div class="responsive-table__td-inner-container">
<a class="product-instant-search-table__link" href="#">
<div class="image ">
<picture>
<img src="/example-assets/images/product-instant-search-table/thumb.png" class="image__img product-instant-search-table__image is-loading" alt="HERSTELLER Produktname XYZ blue/Blau, 33, Cell-Comb, FUNCTIONAL SHIELD" srcset="/example-assets/images/product-instant-search-table/thumb.png 1x, /example-assets/images/product-instant-search-table/thumb.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</a>
</div>
</td>
<td class="responsive-table__td" data-location="#">
<div class="responsive-table__td-inner-container">
<a class="product-instant-search-table__link--static" href="#">
<span class="product-instant-search-table__title">HERSTELLER <mark>Produktname</mark> XYZ blue/Blau, 33, Cell-Comb, FUNCTIONAL SHIELD</span>
</a>
</div>
</td>
<td class="responsive-table__td" data-location="#">
<div class="responsive-table__td-inner-container">
<div class="product-instant-search-table__article-no">
<div class="product-instant-search-table__article-no-label">Artikel-Nr.</div>
<div class="product-instant-search-table__article-no-value">469802</div>
</div>
</div>
</td>
<td class="responsive-table__td" data-location="#">
<div class="responsive-table__td-inner-container">
<div class="product-instant-search-table__price">
<div class="product-instant-search-table__price-value">
<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-prefix--rrp">UVP</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>
</div>
</td>
<td class="responsive-table__td">
<div class="responsive-table__td-inner-container">
<div class="product-instant-search-table__cart">
<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>
</td>
</tr>
<tr class="responsive-table__tr product-instant-search-table__result">
<td class="responsive-table__td" data-location="#">
<div class="responsive-table__td-inner-container">
<a class="product-instant-search-table__link" href="#">
<div class="image ">
<picture>
<img src="/example-assets/images/product-instant-search-table/thumb.png" class="image__img product-instant-search-table__image is-loading" alt="HERSTELLER Produktname XYZ blue/Blau, 33, Cell-Comb, FUNCTIONAL SHIELD" srcset="/example-assets/images/product-instant-search-table/thumb.png 1x, /example-assets/images/product-instant-search-table/thumb.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</a>
</div>
</td>
<td class="responsive-table__td" data-location="#">
<div class="responsive-table__td-inner-container">
<a class="product-instant-search-table__link--static" href="#">
<span class="product-instant-search-table__title">HERSTELLER <mark>Produktname</mark> XYZ blue/Blau, 33, Cell-Comb, FUNCTIONAL SHIELD</span>
</a>
</div>
</td>
<td class="responsive-table__td" data-location="#">
<div class="responsive-table__td-inner-container">
<div class="product-instant-search-table__article-no">
<div class="product-instant-search-table__article-no-label">Artikel-Nr.</div>
<div class="product-instant-search-table__article-no-value">469802</div>
</div>
</div>
</td>
<td class="responsive-table__td" data-location="#">
<div class="responsive-table__td-inner-container">
<div class="product-instant-search-table__price">
<div class="product-instant-search-table__price-value">
<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-prefix--rrp">UVP</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>
</div>
</td>
<td class="responsive-table__td">
<div class="responsive-table__td-inner-container">
<div class="product-instant-search-table__cart">
<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>
</td>
</tr>
<tr class="responsive-table__tr product-instant-search-table__result">
<td class="responsive-table__td" data-location="#">
<div class="responsive-table__td-inner-container">
<a class="product-instant-search-table__link" href="#">
<div class="image ">
<picture>
<img src="/example-assets/images/product-instant-search-table/thumb.png" class="image__img product-instant-search-table__image is-loading" alt="HERSTELLER Produktname XYZ blue/Blau, 33, Cell-Comb, FUNCTIONAL SHIELD" srcset="/example-assets/images/product-instant-search-table/thumb.png 1x, /example-assets/images/product-instant-search-table/thumb.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</a>
</div>
</td>
<td class="responsive-table__td" data-location="#">
<div class="responsive-table__td-inner-container">
<a class="product-instant-search-table__link--static" href="#">
<span class="product-instant-search-table__title">HERSTELLER <mark>Produktname</mark> XYZ blue/Blau, 33, Cell-Comb, FUNCTIONAL SHIELD</span>
</a>
</div>
</td>
<td class="responsive-table__td" data-location="#">
<div class="responsive-table__td-inner-container">
<div class="product-instant-search-table__article-no">
<div class="product-instant-search-table__article-no-label">Artikel-Nr.</div>
<div class="product-instant-search-table__article-no-value">469802</div>
</div>
</div>
</td>
<td class="responsive-table__td" data-location="#">
<div class="responsive-table__td-inner-container">
<div class="product-instant-search-table__price">
<div class="product-instant-search-table__price-value">
<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-prefix--rrp">UVP</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>
</div>
</td>
<td class="responsive-table__td">
<div class="responsive-table__td-inner-container">
<div class="product-instant-search-table__cart">
<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>
</td>
</tr>
<tr class="responsive-table__tr" data-responsive-table-filter-no-match hidden>
<td class="responsive-table__td" colspan="5">
<div class="wysiwyg-content">
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
{% include '@SharedComponents/modules/page/components/instant-search/product-instant-search-table/product-instant-search-table.twig' %}
{
"table": {
"hideHeader": true,
"firstColumnMobileFullHeight": true,
"columnDefs": [
{
"name": "image"
},
{
"name": "title"
},
{
"name": "articleNo"
},
{
"name": "price"
},
{
"name": "actions"
}
],
"rowData": [
{
"image": {
"href": "#",
"type": "text",
"data": {
"href": "#",
"image": {
"src": "/example-assets/images/product-instant-search-table/thumb.png",
"src2x": "/example-assets/images/product-instant-search-table/thumb.png",
"alt": "HERSTELLER Produktname XYZ blue/Blau, 33, Cell-Comb, FUNCTIONAL SHIELD"
}
}
},
"title": {
"href": "#",
"type": "text",
"data": {
"href": "#",
"content": "HERSTELLER <mark>Produktname</mark> XYZ blue/Blau, 33, Cell-Comb, FUNCTIONAL SHIELD"
}
},
"articleNo": {
"href": "#",
"type": "text",
"data": {
"label": "Artikel-Nr.",
"value": "469802"
}
},
"price": {
"href": "#",
"type": "text",
"data": {
"value": {
"variant": "small",
"labels": {
"rrp": "UVP",
"from": "ab",
"instead": "statt"
},
"price": {
"currency": "CHF",
"price": "9.90",
"rrp": true
}
}
}
},
"actions": {
"type": "text",
"data": {
"cartButton": {
"variant": "large",
"action": "http://localhost:3005/add-to-cart/",
"method": "post",
"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": {
"href": "#",
"type": "text",
"data": {
"href": "#",
"image": {
"src": "/example-assets/images/product-instant-search-table/thumb.png",
"src2x": "/example-assets/images/product-instant-search-table/thumb.png",
"alt": "HERSTELLER Produktname XYZ blue/Blau, 33, Cell-Comb, FUNCTIONAL SHIELD"
}
}
},
"title": {
"href": "#",
"type": "text",
"data": {
"href": "#",
"content": "HERSTELLER <mark>Produktname</mark> XYZ blue/Blau, 33, Cell-Comb, FUNCTIONAL SHIELD"
}
},
"articleNo": {
"href": "#",
"type": "text",
"data": {
"label": "Artikel-Nr.",
"value": "469802"
}
},
"price": {
"href": "#",
"type": "text",
"data": {
"value": {
"variant": "small",
"labels": {
"rrp": "UVP",
"from": "ab",
"instead": "statt"
},
"price": {
"currency": "CHF",
"price": "9.90",
"rrp": true
}
}
}
},
"actions": {
"type": "text",
"data": {
"cartButton": {
"variant": "large",
"action": "http://localhost:3005/add-to-cart/",
"method": "post",
"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": {
"href": "#",
"type": "text",
"data": {
"href": "#",
"image": {
"src": "/example-assets/images/product-instant-search-table/thumb.png",
"src2x": "/example-assets/images/product-instant-search-table/thumb.png",
"alt": "HERSTELLER Produktname XYZ blue/Blau, 33, Cell-Comb, FUNCTIONAL SHIELD"
}
}
},
"title": {
"href": "#",
"type": "text",
"data": {
"href": "#",
"content": "HERSTELLER <mark>Produktname</mark> XYZ blue/Blau, 33, Cell-Comb, FUNCTIONAL SHIELD"
}
},
"articleNo": {
"href": "#",
"type": "text",
"data": {
"label": "Artikel-Nr.",
"value": "469802"
}
},
"price": {
"href": "#",
"type": "text",
"data": {
"value": {
"variant": "small",
"labels": {
"rrp": "UVP",
"from": "ab",
"instead": "statt"
},
"price": {
"currency": "CHF",
"price": "9.90",
"rrp": true
}
}
}
},
"actions": {
"type": "text",
"data": {
"cartButton": {
"variant": "large",
"action": "http://localhost:3005/add-to-cart/",
"method": "post",
"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"
}
}
}
}
]
}
}
import './product-instant-search-table.scss';
@import "~shared/base";
@import "~cando-cx-components-library/components/modules/page/components/instant-search/product-instant-search-table/product-instant-search-table";
No notes defined.