<div class="analysis">
<div class="analysis__container">
<div class="analysis__back-button-top">
<a href="#" class="button-icon--icon-text-large -icon-arrow-left">
Zurück zu mein Konto
</a>
</div>
<div class="account-header">
<h3 class="account-header__title">Auswertungen</h3>
<p class="account-header__subtitle">(1–10 / 60 Auswertungen)</p>
</div>
<div class="analysis__filters">
<form class="filters">
<div class="filters__list">
<div class="filters__list-item">
<div class="select--light is-initialized is-filled-in with-label">
<div class="select__wrapper">
<select class="select__select" id="list" name="list">
<option value="" disabled>Please choose</option>
<option value="option1" selected="selected">Bestseller</option>
<option value="option2">Empfehlungen</option>
</select>
<label class="select__label" for="list">Liste
</label>
</div>
</div>
</div>
<div class="filters__list-item">
<div class="text-field--light date-picker--light is-initialized" data-disable-text-field-js data-language="" data-format="" data-min-date="" data-max-date="">
<div class="text-field__wrapper date-picker__wrapper">
<input class="text-field__input date-picker__input" id="orderDateFrom" type="text" name="orderDateFrom" />
<label class="text-field__label date-picker__label" for="orderDateFrom">Bestelldatum von</label>
<button type="reset" class="date-picker__reset"></button>
</div>
</div>
</div>
<div class="filters__list-item">
<div class="text-field--light date-picker--light is-initialized" data-disable-text-field-js data-language="" data-format="" data-min-date="" data-max-date="">
<div class="text-field__wrapper date-picker__wrapper">
<input class="text-field__input date-picker__input" id="orderDateTo" type="text" name="orderDate" />
<label class="text-field__label date-picker__label" for="orderDateTo">Bestelldatum bis</label>
<button type="reset" class="date-picker__reset"></button>
</div>
</div>
</div>
<div class="filters__list-item">
<div class="select--light is-initialized is-filled-in with-label">
<div class="select__wrapper">
<select class="select__select" id="brand" name="brand">
<option value="" disabled>Please choose</option>
<option value="option1" selected="selected">Alle</option>
<option value="option2">Shimano</option>
</select>
<label class="select__label" for="brand">Marke
</label>
</div>
</div>
</div>
<div class="filters__list-item">
<div class="select--light is-initialized is-filled-in with-label">
<div class="select__wrapper">
<select class="select__select" id="productLine" name="productLine">
<option value="" disabled>Please choose</option>
<option value="option1" selected="selected">Alle</option>
<option value="option2">Dore LX</option>
</select>
<label class="select__label" for="productLine">Produktlinie
</label>
</div>
</div>
</div>
<div class="filters__list-item">
<div class="select--light is-initialized is-filled-in with-label">
<div class="select__wrapper">
<select class="select__select" id="productType" name="productType">
<option value="" disabled>Please choose</option>
<option value="option1" selected="selected">Alle</option>
<option value="option2">Ketten</option>
</select>
<label class="select__label" for="productType">Produkttyp
</label>
</div>
</div>
</div>
<div class="filters__list-item">
<div class="text-field--light is-initialized">
<div class="text-field__wrapper">
<input class="text-field__input" id="quantityFrom" type="text" name="quantityFrom" />
<label class="text-field__label" for="quantityFrom">Anzahl ab
</label>
</div>
</div>
</div>
<div class="filters__list-buttons">
<div class="filters__list-button--reset">
<a href="#" class="button--tertiary-light-small" data-test="Yes">Zurücksetzen</a>
</div>
<div class="filters__list-button--submit">
<a href="#" class="button--primary-small" data-test="Yes">Suchen</a>
</div>
</div>
</div>
</form>
</div>
<div class="analysis__table">
<div class="analysis-table">
<div class="table-header">
<div class="table-header__column--title">
<h4 class="heading-counter">
Artikel
<span class="counter-bubble" data-counter="122"></span>
</h4>
</div>
</div>
<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="72px">
<col style="">
<col style="">
<col style="">
<col style="">
<col style="">
<col style="">
<col style="">
<col style="144px">
</colgroup>
<thead>
<tr class="responsive-table__tr">
<th class="responsive-table__th">
</th>
<th class="responsive-table__th is-centered">
Lager
</th>
<th class="responsive-table__th">
Marke
</th>
<th class="responsive-table__th">
Produktlinie
</th>
<th class="responsive-table__th">
Kategorie
</th>
<th class="responsive-table__th">
Produkttyp
</th>
<th class="responsive-table__th">
UVP
</th>
<th class="responsive-table__th">
Preis
</th>
<th class="responsive-table__th">
</th>
</tr>
</thead>
<tbody>
<tr class="responsive-table__tr">
<td class="responsive-table__td is-top-aligned">
<div class="responsive-table__td-inner-container">
<div class="image ">
<picture>
<img src="/example-assets/images/responsive-table/thumb.png" class="image__img image-cell__image is-loading" alt="Alt" title="Title" srcset="/example-assets/images/responsive-table/thumb.png 1x, /example-assets/images/responsive-table/thumb.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
<div class="image-cell__specials">
<div class="specials">
<div class="specials--medium-horizontally-vertically ">
<button type="button" class="specials__toggle" data-info-tooltip-content="Sale" style="background-color: #e30a24;">
<span class="visually-hidden">Sale</span>
<span class="image ">
<picture>
<img src="/example-assets/images/specials/sale.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="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>
</div>
</div>
</div>
</div>
</td>
<td class="responsive-table__td is-centered">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Lager</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="stock">
<button type="button" class="stock__toggle--available" data-info-tooltip-content="Verfügbar">
<span class="visually-hidden">Verfügbar</span>
</button>
</div>
</div>
</div>
</div>
</td>
<td class="responsive-table__td">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Marke</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>Shimano</p>
</div>
</div>
</div>
</div>
</td>
<td class="responsive-table__td">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Produktlinie</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>Deore LX</p>
</div>
</div>
</div>
</div>
</td>
<td class="responsive-table__td">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Kategorie</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>Antrieb</p>
</div>
</div>
</div>
</div>
</td>
<td class="responsive-table__td">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Produkttyp</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>Ketten</p>
</div>
</div>
</div>
</div>
</td>
<td class="responsive-table__td">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">UVP</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<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-currency">CHF</div>
</div>
<div class="price-regular__current-price-inner">
<div class="price-regular__current-value">24.90</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
<td class="responsive-table__td">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Preis</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<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-currency">CHF</div>
</div>
<div class="price-regular__current-price-inner">
<div class="price-regular__current-value">13.50</div>
</div>
</div>
</div>
</div>
</div>
</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"></div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-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-448799439" min="1" max="99" name="qty" value="5" required />
<label class="visually-hidden" for="quantity-448799439">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>
</form>
</div>
</div>
</div>
</td>
</tr>
<tr class="responsive-table__tr">
<td class="responsive-table__td is-top-aligned">
<div class="responsive-table__td-inner-container">
<div class="image ">
<picture>
<img src="/example-assets/images/responsive-table/thumb.png" class="image__img image-cell__image is-loading" alt="Alt" title="Title" srcset="/example-assets/images/responsive-table/thumb.png 1x, /example-assets/images/responsive-table/thumb.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
<div class="image-cell__specials">
<div class="specials">
<div class="specials--medium-horizontally-vertically ">
<button type="button" class="specials__toggle" data-info-tooltip-content="Sale" style="background-color: #e30a24;">
<span class="visually-hidden">Sale</span>
<span class="image ">
<picture>
<img src="/example-assets/images/specials/sale.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="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>
</div>
</div>
</div>
</div>
</td>
<td class="responsive-table__td is-centered">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Lager</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="stock">
<button type="button" class="stock__toggle--available" data-info-tooltip-content="Verfügbar">
<span class="visually-hidden">Verfügbar</span>
</button>
</div>
</div>
</div>
</div>
</td>
<td class="responsive-table__td">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Marke</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>Shimano</p>
</div>
</div>
</div>
</div>
</td>
<td class="responsive-table__td">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Produktlinie</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>Deore LX</p>
</div>
</div>
</div>
</div>
</td>
<td class="responsive-table__td">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Kategorie</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>Antrieb</p>
</div>
</div>
</div>
</div>
</td>
<td class="responsive-table__td">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Produkttyp</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>Ketten</p>
</div>
</div>
</div>
</div>
</td>
<td class="responsive-table__td">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">UVP</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<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-currency">CHF</div>
</div>
<div class="price-regular__current-price-inner">
<div class="price-regular__current-value">24.90</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
<td class="responsive-table__td">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Preis</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<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-currency">CHF</div>
</div>
<div class="price-regular__current-price-inner">
<div class="price-regular__current-value">13.50</div>
</div>
</div>
</div>
</div>
</div>
</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"></div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-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-1382933707" min="1" max="99" name="qty" value="5" required />
<label class="visually-hidden" for="quantity-1382933707">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>
</form>
</div>
</div>
</div>
</td>
</tr>
<tr class="responsive-table__tr" data-responsive-table-filter-no-match hidden>
<td class="responsive-table__td" colspan="9">
<div class="wysiwyg-content">
<p class="responsive-table__no-match">Keine Ergebnisse gefunden</p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="analysis__pagination">
<div class="pagination">
<div class="pagination__container">
<div class="pagination__prev">
<a href="#" class="button-navigation--prev">
<span class="visually-hidden">Vorherige Seite</span>
</a>
</div>
<ul class="pagination__pages">
<li class="pagination__page">
<a href="#" class="pagination__page-link">1</a>
</li>
<li class="pagination__page">
<a href="#" class="pagination__page-link--active">2</a>
</li>
<li class="pagination__page">
<a href="#" class="pagination__page-link">3</a>
</li>
<li class="pagination__page">
<a href="#" class="pagination__page-link">4</a>
</li>
<li class="pagination__page">
<span class="pagination__page-dots">…</span>
</li>
<li class="pagination__page">
<a href="#" class="pagination__page-link">32</a>
</li>
</ul>
<div class="pagination__next">
<a href="#" class="button-navigation--next">
<span class="visually-hidden">Nächste Seite</span>
</a>
</div>
</div>
</div>
</div>
<div class="analysis__back-button-bottom">
<a href="#" class="button-icon--icon-text-large -icon-arrow-left">
Zurück zu mein Konto
</a>
</div>
</div>
</div>
{% include '@SharedComponents/modules/b2b-analysis/templates/analysis/analysis.twig' %}
{
"header": {
"title": "Auswertungen",
"headingLevel": "3",
"subtitle": "(1–10 / 60 Auswertungen)"
},
"pagination": {
"include": "...pagination--with-next-and-prev"
},
"navigationButton": {
"variant": "icon-text-large",
"title": "Zurück zu mein Konto",
"icon": "arrow-left",
"type": "a",
"href": "#"
},
"filters": {
"resetButton": {
"include": "...button--tertiary-light-small",
"title": "Zurücksetzen"
},
"submitButton": {
"include": "...button--primary-small",
"title": "Suchen"
},
"filters": [
{
"path": "modules/shared/components/form-components/select/select",
"data": {
"variant": "light",
"id": "list",
"name": "list",
"label": "Liste",
"required": false,
"disabled": false,
"selected": "option1",
"options": {
"option1": "Bestseller",
"option2": "Empfehlungen"
},
"choose": "Please choose"
}
},
{
"path": "modules/shared/components/form-components/date-picker/date-picker",
"data": {
"variant": "light",
"language": "",
"format": "",
"minDate": "",
"maxDate": "",
"id": "orderDateFrom",
"name": "orderDateFrom",
"label": "Bestelldatum von",
"required": false,
"value": "",
"disabled": false,
"type": "text",
"autocomplete": "",
"error": "",
"helper": ""
}
},
{
"path": "modules/shared/components/form-components/date-picker/date-picker",
"data": {
"variant": "light",
"language": "",
"format": "",
"minDate": "",
"maxDate": "",
"id": "orderDateTo",
"name": "orderDate",
"label": "Bestelldatum bis",
"required": false,
"value": "",
"disabled": false,
"type": "text",
"autocomplete": "",
"error": "",
"helper": ""
}
},
{
"path": "modules/shared/components/form-components/select/select",
"data": {
"variant": "light",
"id": "brand",
"name": "brand",
"label": "Marke",
"required": false,
"disabled": false,
"selected": "option1",
"options": {
"option1": "Alle",
"option2": "Shimano"
},
"choose": "Please choose"
}
},
{
"path": "modules/shared/components/form-components/select/select",
"data": {
"variant": "light",
"id": "productLine",
"name": "productLine",
"label": "Produktlinie",
"required": false,
"disabled": false,
"selected": "option1",
"options": {
"option1": "Alle",
"option2": "Dore LX"
},
"choose": "Please choose"
}
},
{
"path": "modules/shared/components/form-components/select/select",
"data": {
"variant": "light",
"id": "productType",
"name": "productType",
"label": "Produkttyp",
"required": false,
"disabled": false,
"selected": "option1",
"options": {
"option1": "Alle",
"option2": "Ketten"
},
"choose": "Please choose"
}
},
{
"path": "modules/shared/components/form-components/text-field/text-field",
"data": {
"variant": "light",
"id": "quantityFrom",
"name": "quantityFrom",
"label": "Anzahl ab",
"required": false,
"value": "",
"disabled": false,
"type": "text",
"autocomplete": "",
"error": "",
"helper": ""
}
}
]
},
"analysisTable": {
"include": "...analysis-table--default"
}
}
import './analysis.scss';
@import "~shared/base";
@import "~cando-cx-components-library/components/modules/b2b-analysis/templates/analysis/analysis";
No notes defined.