<div class="instant-search is-open">
<div class="instant-search__container">
<div class="instant-search__main">
<div class="instant-search__title-container" data-instant-search-title-container>
<div class="instant-search__title">
<span class="instant-search__title-value">Artikel mit „Schuhe french blue“ (12)</span>
<a href="#" class="instant-search__title-link">Alle anzeigen</a>
</div>
<div class="instant-search__close-button">
<button class="button-icon--icon-regular -icon-close" type="button" name="instant-search-close" value="true" data-instant-search-close="yes">
<span class="visually-hidden">Schliessen</span>
</button>
</div>
</div>
<div class="instant-search__content" data-instant-search-content>
<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-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-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-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>
</div>
</div>
</div>
</div>
{% include '@SharedComponents/modules/page/components/instant-search/instant-search/instant-search.twig' %}
{
"demo": true,
"products": {
"label": "Artikel mit „Schuhe french blue“ (12)",
"showAllLink": {
"href": "#",
"title": "Alle anzeigen"
},
"closeButton": {
"variant": "icon-regular",
"title": "Schliessen",
"icon": "close",
"type": "button",
"role": "button",
"name": "instant-search-close",
"value": "true",
"attributes": {
"data-instant-search-close": "yes"
}
},
"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",
"instead": "statt"
},
"price": {
"currency": "CHF",
"price": "9.90",
"rrp": true
}
}
}
},
"actions": {
"type": "text",
"data": {
"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",
"instead": "statt"
},
"price": {
"currency": "CHF",
"price": "9.90",
"rrp": true
}
}
}
},
"actions": {
"type": "text",
"data": {
"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",
"instead": "statt"
},
"price": {
"currency": "CHF",
"price": "9.90",
"rrp": true
}
}
}
},
"actions": {
"type": "text",
"data": {
"wishlistButton": {
"addAction": "http://localhost:3005/wishlist-add/",
"buttonTitle": "Zur Merklist hinzufügen"
}
}
}
}
]
}
}
}
import InstantSearchMediator, {name as title} from 'cando-cx-components-library/components/modules/page/components/instant-search/instant-search/instant-search-mediator';
export default InstantSearchMediator;
export const name = title;
import './instant-search.scss';
import InstantSearch, {selector as sel} from 'cando-cx-components-library/components/modules/page/components/instant-search/instant-search/instant-search';
export default InstantSearch;
export const selector = sel;
@import "~shared/base";
@import "~cando-cx-components-library/components/modules/page/components/instant-search/instant-search/instant-search";
No notes defined.