<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">
<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-682783790" min="1" max="99" name="qty" value="5" required />
<label class="visually-hidden" for="quantity-682783790">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>
<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>
{% include '@SharedComponents/modules/shared-product/components/tile/tile.twig' %}
{
"headingLevel": "3",
"image": {
"alt": "Test Product",
"src": "/example-assets/images/tile/product.png",
"src2x": "/example-assets/images/tile/product@2x.png"
},
"href": "/some-location/",
"specials": {
"variant": "medium-vertically",
"items": [
{
"value": "New",
"color": "#333333",
"icon": "/example-assets/images/specials/new.svg"
},
{
"value": "Kauftipp",
"color": "#44a0d9",
"icon": "/example-assets/images/specials/tip.svg"
}
]
},
"attributes": {
"variant": "small",
"attributes": [
{
"type": "text",
"name": "Artikelnr.",
"value": "8547625"
},
{
"type": "link",
"name": "Kategorie",
"value": "Testkategorie Testkategorie Testkategorie Testkategorie Testkategorie Testkategorie Testkategorie",
"href": "#"
},
{
"type": "text",
"name": "Grösse",
"value": "XXL"
},
{
"type": "text",
"name": "fréquence d'horloge du processeur",
"value": "1,6 GHz"
},
{
"type": "text",
"name": "fréquence d'horloge du processeur",
"value": "fréquence d'horloge du processeur fréquence d'horloge du processeur fréquence d'horloge du processeur"
}
]
},
"name": "Test Product",
"include": "...wishlist-cart-actions--with-add-to-wishlist-and-add-to-cart",
"logos": {
"size": "medium",
"logos": {
"brand": {
"alt": "alt",
"src": "/example-assets/images/logos/brand-logo.png",
"src2x": "/example-assets/images/logos/brand-logo.png"
}
}
},
"price": {
"variant": "regular",
"labels": {
"from": "ab",
"instead": "statt"
},
"price": {
"currency": "CHF",
"price": "9.90",
"from": true,
"wrap": true
}
},
"stock": {
"status": "available",
"tooltip": "Verfügbar ab Juli 2020",
"stockPlus": {
"content": "<strong>42</strong> Stück beim Lieferanten bestellt.",
"align": "horizontal",
"size": "small",
"stockQuantity": "+187",
"tableContent": {
"noMatchMessage": "Keine Ergebnisse gefunden",
"spacingVariant": "medium",
"notResponsive": true,
"columnDefs": [
{
"label": "Datum",
"name": "date"
},
{
"label": "Menge",
"name": "amount",
"thClass": "is-right-aligned"
},
{
"label": "Bestätigt",
"name": "confirmed",
"thClass": "is-left-aligned"
}
],
"rowData": [
{
"date": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>12.01.2021</p>"
}
},
"amount": {
"tdClass": "is-right-aligned",
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p><strong>10</strong></p>"
}
},
"confirmed": {
"tdClass": "is-left-aligned",
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>Ja</p>"
}
}
},
{
"date": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>17.06.2021</p>"
}
},
"amount": {
"tdClass": "is-right-aligned",
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p><strong>20</strong></p>"
}
},
"confirmed": {
"tdClass": "is-left-aligned",
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>Ja</p>"
}
}
},
{
"date": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>02.05.2021</p>"
}
},
"amount": {
"tdClass": "is-right-aligned",
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p><strong>5</strong></p>"
}
},
"confirmed": {
"tdClass": "is-left-aligned",
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>Nein</p>"
}
}
}
]
}
}
}
}
import './tile.scss';
import Tile, {selector as sel} from 'cando-cx-components-library/components/modules/shared-product/components/tile/tile';
export default Tile;
export const selector = sel;
@import "~shared/base";
@import "~cando-cx-components-library/components/modules/shared-product/components/tile/tile";
No notes defined.