<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="">
</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>
</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>
</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>
</tr>
<tr class="responsive-table__tr" data-responsive-table-filter-no-match hidden>
<td class="responsive-table__td" colspan="3">
<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"
}
],
"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"
}
}
},
{
"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"
}
}
},
{
"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"
}
}
}
]
}
}
}
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.