<div class="result__tile">
<article class="tile" data-location="/some-location/">
<div class="tile__row">
<div class="tile__column">
<h3 class="tile__title">
<a href="/some-location/" class="tile__link" title="Test Product">Test Product</a>
</h3>
<div class="tile__attributes">
<div class="attributes--small">
<ul class="attributes__list">
<li class="attributes__list-item">
<div class="attributes__name">Artikelnr.</div>
<div class="attributes__value " title="8547625">
8547625
</div>
</li>
<li class="attributes__list-item">
<div class="attributes__name">Kategorie</div>
<div class="attributes__value has-single-line-ellipsis" title="Testkategorie Testkategorie Testkategorie Testkategorie Testkategorie Testkategorie Testkategorie">
<a class="attributes__attribute-link" href="#" title="Testkategorie Testkategorie Testkategorie Testkategorie Testkategorie Testkategorie Testkategorie">Testkategorie Testkategorie Testkategorie Testkategorie Testkategorie Testkategorie Testkategorie</a>
</div>
</li>
<li class="attributes__list-item">
<div class="attributes__name">Grösse</div>
<div class="attributes__value " title="XXL">
XXL
</div>
</li>
<li class="attributes__list-item">
<div class="attributes__name">fréquence d'horloge du processeur</div>
<div class="attributes__value " title="1,6 GHz">
1,6 GHz
</div>
</li>
<li class="attributes__list-item">
<div class="attributes__name">fréquence d'horloge du processeur</div>
<div class="attributes__value " title="fréquence d'horloge du processeur fréquence d'horloge du processeur fréquence d'horloge du processeur">
fréquence d'horloge du processeur fréquence d'horloge du processeur fréquence d'horloge du processeur
</div>
</li>
</ul>
</div>
</div>
<div class="tile__price-actions-container">
<div class="tile__price">
<div class="price--regular">
<div class="price__row">
<div class="price__column--regular-price">
<div class="price-regular">
<div class="price-regular__current--wrap">
<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">9.90</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tile__actions-container">
<form class="wishlist-cart-actions">
</form>
</div>
</div>
</div>
<div class="tile__column">
<a href="/some-location/" class="tile__link">
<div class="image ">
<picture>
<img src="/example-assets/images/tile/product.png" class="image__img tile__image is-loading" alt="Test Product" srcset="/example-assets/images/tile/product.png 1x, /example-assets/images/tile/product@2x.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</a>
<div class="tile__logo">
<div class="logos">
<div class="image ">
<picture>
<img src="/example-assets/images/logos/brand-logo.png" class="image__img logos__brand--medium is-loading" alt="alt" srcset="/example-assets/images/logos/brand-logo.png 1x, /example-assets/images/logos/brand-logo.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
<div class="tile__specials">
<div class="specials">
<div class="specials--medium-vertically ">
<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>
<button type="button" class="specials__toggle" data-info-tooltip-content="Kauftipp" style="background-color: #44a0d9;">
<span class="visually-hidden">Kauftipp</span>
<span class="image ">
<picture>
<img src="/example-assets/images/specials/tip.svg" class="image__img specials__toggle-image is-loading" alt="" onload="this.classList.remove('is-loading')" />
</picture>
</span>
</button>
</div>
</div>
</div>
<div class="tile__stock">
<div class="stock is-horizontal-small">
<button type="button" class="stock__toggle--stock-plus">
+187
</button>
<div class="stock__toggle--stock-plus-content" data-info-tooltip-content-html="">
<div class="stock__toggle--stock-plus-title"><strong>42</strong> Stück beim Lieferanten bestellt.</div>
<div class="stock__toggle--stock-plus-table">
<div class="responsive-table -spacing-medium -not-responsive">
<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>
<thead>
<tr class="responsive-table__tr">
<th class="responsive-table__th">
Datum
</th>
<th class="responsive-table__th is-right-aligned">
Menge
</th>
<th class="responsive-table__th is-left-aligned">
Bestätigt
</th>
</tr>
</thead>
<tbody>
<tr class="responsive-table__tr">
<td class="responsive-table__td">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Datum</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>12.01.2021</p>
</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">Menge</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p><strong>10</strong></p>
</div>
</div>
</div>
</div>
</td>
<td class="responsive-table__td is-left-aligned">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Bestätigt</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>Ja</p>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr class="responsive-table__tr">
<td class="responsive-table__td">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Datum</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>17.06.2021</p>
</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">Menge</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p><strong>20</strong></p>
</div>
</div>
</div>
</div>
</td>
<td class="responsive-table__td is-left-aligned">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Bestätigt</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>Ja</p>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr class="responsive-table__tr">
<td class="responsive-table__td">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Datum</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>02.05.2021</p>
</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">Menge</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p><strong>5</strong></p>
</div>
</div>
</div>
</div>
</td>
<td class="responsive-table__td is-left-aligned">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Bestätigt</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>Nein</p>
</div>
</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">
<p class="responsive-table__no-match">Keine Ergebnisse gefunden</p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<button type="button" class="stock__toggle--available" data-info-tooltip-content="Verfügbar ab Juli 2020">
<span class="visually-hidden">Verfügbar ab Juli 2020</span>
</button>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="scanner-buttons">
<button class="button--primary is-full-width" type="submit">In den Warenkorb legen</button>
<button class="button--tertiary-light is-full-width" type="submit">Ein weiteres Produkt scannen</button>
</div>
{% include '@SharedComponents/modules/scanner/templates/result/result.twig' %}
{
"productTile": {
"include": "...tile--with-stock-plus-and-with-add-to-wishlist-and-add-to-cart-and-with-price"
},
"buttons": [
{
"variant": "primary",
"type": "button",
"title": "In den Warenkorb legen",
"class": "is-full-width"
},
{
"variant": "tertiary-light",
"type": "button",
"title": "Ein weiteres Produkt scannen",
"class": "is-full-width"
}
]
}
import './result.scss';
@import "~shared/base";
@import "~cando-cx-components-library/components/modules/scanner/templates/result/result";
No notes defined.