<div class="account-outlet">
<div class="account-outlet__container">
<div class="account-outlet__navigation">
<nav class="account-navigation">
<h3 class="visually-hidden">Account Navigation</h3>
<div class="swiper account-navigation__main-nav">
<ul class="swiper-wrapper account-navigation__list">
<li class="swiper-slide account-navigation__list-item">
<a href="#" class="account-navigation__link -icon-profile" data-account-navigation-expand="1">Profil</a>
<ul class="account-navigation__sub-list" data-account-navigation-list-id="1">
<li class="account-navigation__sub-list-item">
<a href="#" class="account-navigation__sub-link" data-account-navigation-sub-link-id="1">Persönliche Daten</a>
</li>
<li class="account-navigation__sub-list-item">
<a href="#" class="account-navigation__sub-link" data-account-navigation-sub-link-id="2">Kommunikation</a>
</li>
<li class="account-navigation__sub-list-item">
<a href="#" class="account-navigation__sub-link" data-account-navigation-sub-link-id="3">Adressen</a>
</li>
</ul>
</li>
<li class="swiper-slide account-navigation__list-item">
<a href="#" class="account-navigation__link--active -icon-orders" data-account-navigation-expand="2">Bestellungen</a>
<ul class="account-navigation__sub-list--active" data-account-navigation-list-id="2">
<li class="account-navigation__sub-list-item">
<a href="#" class="account-navigation__sub-link--active" data-account-navigation-sub-link-id="1">Bestellübersicht</a>
</li>
<li class="account-navigation__sub-list-item">
<a href="#" class="account-navigation__sub-link" data-account-navigation-sub-link-id="2">Bestellungen freigeben</a>
</li>
</ul>
</li>
<li class="swiper-slide account-navigation__list-item">
<a href="#" class="account-navigation__link -icon-analysis" data-account-navigation-expand="3">Auswertungen</a>
</li>
<li class="swiper-slide account-navigation__list-item">
<a href="#" class="account-navigation__link -icon-invoices" data-account-navigation-expand="4">Rechnungen</a>
</li>
<li class="swiper-slide account-navigation__list-item">
<a href="#" class="account-navigation__link -icon-credit-notes" data-account-navigation-expand="5">Gutschriften</a>
</li>
<li class="swiper-slide account-navigation__list-item">
<a href="#" class="account-navigation__link -icon-wishlist" data-account-navigation-expand="6">Merklisten</a>
</li>
<li class="swiper-slide account-navigation__list-item">
<a href="#" class="account-navigation__link -icon-cart" data-account-navigation-expand="7">Warenkörbe</a>
</li>
<li class="swiper-slide account-navigation__list-item">
<a href="#" class="account-navigation__link -icon-return" data-account-navigation-expand="8">Retouren</a>
<ul class="account-navigation__sub-list" data-account-navigation-list-id="8">
<li class="account-navigation__sub-list-item">
<a href="" class="account-navigation__sub-link" data-account-navigation-sub-link-id="1">Retourenübersicht</a>
</li>
<li class="account-navigation__sub-list-item">
<a href="" class="account-navigation__sub-link" data-account-navigation-sub-link-id="2">Retoure erfassen</a>
</li>
<li class="account-navigation__sub-list-item">
<a href="" class="account-navigation__sub-link" data-account-navigation-sub-link-id="3">Retourenliste</a>
</li>
</ul>
</li>
<li class="swiper-slide account-navigation__list-item">
<a href="#" class="account-navigation__link -icon-warranty" data-account-navigation-expand="9">Garantieanträge</a>
</li>
<li class="swiper-slide account-navigation__list-item">
<a href="#" class="account-navigation__link -icon-service" data-account-navigation-expand="10">Serviceanträge</a>
</li>
</ul>
</div>
<div class="account-navigation__mobile-nav">
<div class="swiper" data-account-navigation-expand="1">
<ul class="swiper-wrapper account-navigation__sub-list" data-account-navigation-list-id="1">
<li class="swiper-slide account-navigation__sub-list-item">
<a href="#" class="account-navigation__sub-link" data-account-navigation-sub-link-id="1">Persönliche Daten</a>
</li>
<li class="swiper-slide account-navigation__sub-list-item">
<a href="#" class="account-navigation__sub-link" data-account-navigation-sub-link-id="2">Kommunikation</a>
</li>
<li class="swiper-slide account-navigation__sub-list-item">
<a href="#" class="account-navigation__sub-link" data-account-navigation-sub-link-id="3">Adressen</a>
</li>
</ul>
</div>
<div class="swiper" data-account-navigation-expand="2">
<ul class="swiper-wrapper account-navigation__sub-list--active" data-account-navigation-list-id="2">
<li class="swiper-slide account-navigation__sub-list-item">
<a href="#" class="account-navigation__sub-link--active" data-account-navigation-sub-link-id="1">Bestellübersicht</a>
</li>
<li class="swiper-slide account-navigation__sub-list-item">
<a href="#" class="account-navigation__sub-link" data-account-navigation-sub-link-id="2">Bestellungen freigeben</a>
</li>
</ul>
</div>
<div class="swiper" data-account-navigation-expand="3">
</div>
<div class="swiper" data-account-navigation-expand="4">
</div>
<div class="swiper" data-account-navigation-expand="5">
</div>
<div class="swiper" data-account-navigation-expand="6">
</div>
<div class="swiper" data-account-navigation-expand="7">
</div>
<div class="swiper" data-account-navigation-expand="8">
<ul class="swiper-wrapper account-navigation__sub-list" data-account-navigation-list-id="8">
<li class="swiper-slide account-navigation__sub-list-item">
<a href="" class="account-navigation__sub-link" data-account-navigation-sub-link-id="1">Retourenübersicht</a>
</li>
<li class="swiper-slide account-navigation__sub-list-item">
<a href="" class="account-navigation__sub-link" data-account-navigation-sub-link-id="2">Retoure erfassen</a>
</li>
<li class="swiper-slide account-navigation__sub-list-item">
<a href="" class="account-navigation__sub-link" data-account-navigation-sub-link-id="3">Retourenliste</a>
</li>
</ul>
</div>
<div class="swiper" data-account-navigation-expand="9">
</div>
<div class="swiper" data-account-navigation-expand="10">
</div>
</div>
</nav>
</div>
<div class="account-outlet__content">
<div class="account-header">
<h3 class="account-header__title">Bestellungen</h3>
<p class="account-header__subtitle">(1–10 / 60 Bestellungen)</p>
</div>
<div class="orders__filters">
<form class="filters">
<div class="filters__list">
<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="text-field--light is-initialized">
<div class="text-field__wrapper">
<input class="text-field__input" id="orderNumber" type="text" name="orderNumber" />
<label class="text-field__label" for="orderNumber">Bestellnummer
</label>
</div>
</div>
</div>
<div class="filters__list-item">
<div class="select--light is-initialized with-label">
<div class="select__wrapper">
<select class="select__select" id="cartType" name="cartType">
<option value="" disabled selected>Please choose</option>
<option value="option1">Endkunde</option>
<option value="option2">Vororder</option>
<option value="option3">Händler</option>
</select>
<label class="select__label" for="cartType">Warenkorb-Typ
</label>
</div>
</div>
</div>
<div class="filters__list-buttons">
<div class="filters__list-button--reset">
<button class="button--tertiary-light-small" value="yes" type="reset">Zurücksetzen</button>
</div>
<div class="filters__list-button--submit">
<button class="button--primary-small" value="yes" type="submit">Suchen</button>
</div>
</div>
</div>
</form>
</div>
<div class="orders__orders">
<div class="responsive-table -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="">
<col style="">
<col style="">
</colgroup>
<thead>
<tr class="responsive-table__tr">
<th class="responsive-table__th">
Bestellnummer
</th>
<th class="responsive-table__th">
Typ
</th>
<th class="responsive-table__th">
Kunden-Bestellnummer
</th>
<th class="responsive-table__th">
Bestelldatum
</th>
<th class="responsive-table__th">
Status
</th>
<th class="responsive-table__th is-right-aligned">
Betrag
</th>
<th class="responsive-table__th is-hidden-on-desktop">
Aktion
</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">Bestellnummer</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<a href="#">98765432</a>
</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">Typ</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="image ">
<picture>
<img src="/example-assets/images/cart-management-table/cart-type-customer.svg" class="image__img orders-table__image is-loading" alt="Endkunde" title="Endkunde" onload="this.classList.remove('is-loading')" />
</picture>
</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">Kunden-Bestellnummer</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>423870</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">Bestelldatum</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>18.03.2021</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">Status</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="status">
<span class="status--grey">Offen</span>
</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">Betrag</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">325.90</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">Aktion</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="ellipsis-actions">
<button type="button" class="ellipsis-actions__toggle">
<span class="visually-hidden">More actions</span>
</button>
<div class="info-tooltip__html" data-info-tooltip-content-html>
<ul class="ellipsis-actions__list">
<li class="ellipsis-actions__list-item">
<button type="button" class="ellipsis-actions__link">Details</button>
</li>
<li class="ellipsis-actions__list-item">
<a href="#" class="ellipsis-actions__link">Etiketten drucken</a>
</li>
<li class="ellipsis-actions__list-item">
<a href="#" class="ellipsis-actions__link">Stornieren</a>
</li>
</ul>
</div>
</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">Bestellnummer</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<a href="#">98765432</a>
</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">Typ</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="image ">
<picture>
<img src="/example-assets/images/cart-management-table/cart-type-customer.svg" class="image__img orders-table__image is-loading" alt="Endkunde" title="Endkunde" onload="this.classList.remove('is-loading')" />
</picture>
</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">Kunden-Bestellnummer</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>423870</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">Bestelldatum</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>18.03.2021</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">Status</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="status">
<span class="status--amber">In Bearbeitung</span>
</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">Betrag</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">325.90</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">Aktion</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="ellipsis-actions">
<button type="button" class="ellipsis-actions__toggle">
<span class="visually-hidden">More actions</span>
</button>
<div class="info-tooltip__html" data-info-tooltip-content-html>
<ul class="ellipsis-actions__list">
<li class="ellipsis-actions__list-item">
<button type="button" class="ellipsis-actions__link">Details</button>
</li>
<li class="ellipsis-actions__list-item">
<a href="#" class="ellipsis-actions__link">Etiketten drucken</a>
</li>
<li class="ellipsis-actions__list-item">
<a href="#" class="ellipsis-actions__link">Stornieren</a>
</li>
</ul>
</div>
</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">Bestellnummer</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<a href="#">98765432</a>
</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">Typ</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="image ">
<picture>
<img src="/example-assets/images/cart-management-table/cart-type-customer.svg" class="image__img orders-table__image is-loading" alt="Endkunde" title="Endkunde" onload="this.classList.remove('is-loading')" />
</picture>
</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">Kunden-Bestellnummer</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>423870</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">Bestelldatum</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>18.03.2021</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">Status</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="status">
<span class="status--red">Teilgeliefert</span>
</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">Betrag</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">325.90</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">Aktion</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="ellipsis-actions">
<button type="button" class="ellipsis-actions__toggle">
<span class="visually-hidden">More actions</span>
</button>
<div class="info-tooltip__html" data-info-tooltip-content-html>
<ul class="ellipsis-actions__list">
<li class="ellipsis-actions__list-item">
<button type="button" class="ellipsis-actions__link">Details</button>
</li>
<li class="ellipsis-actions__list-item">
<a href="#" class="ellipsis-actions__link">Etiketten drucken</a>
</li>
<li class="ellipsis-actions__list-item">
<a href="#" class="ellipsis-actions__link">Stornieren</a>
</li>
</ul>
</div>
</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">Bestellnummer</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<a href="#">98765432</a>
</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">Typ</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="image ">
<picture>
<img src="/example-assets/images/cart-management-table/cart-type-customer.svg" class="image__img orders-table__image is-loading" alt="Endkunde" title="Endkunde" onload="this.classList.remove('is-loading')" />
</picture>
</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">Kunden-Bestellnummer</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>423870</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">Bestelldatum</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>18.03.2021</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">Status</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="status">
<span class="status--green">Geliefert</span>
</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">Betrag</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">325.90</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">Aktion</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="ellipsis-actions">
<button type="button" class="ellipsis-actions__toggle">
<span class="visually-hidden">More actions</span>
</button>
<div class="info-tooltip__html" data-info-tooltip-content-html>
<ul class="ellipsis-actions__list">
<li class="ellipsis-actions__list-item">
<button type="button" class="ellipsis-actions__link">Details</button>
</li>
<li class="ellipsis-actions__list-item">
<a href="#" class="ellipsis-actions__link">Etiketten drucken</a>
</li>
<li class="ellipsis-actions__list-item">
<a href="#" class="ellipsis-actions__link">Stornieren</a>
</li>
</ul>
</div>
</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">Bestellnummer</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<a href="#">98765432</a>
</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">Typ</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="image ">
<picture>
<img src="/example-assets/images/cart-management-table/cart-type-customer.svg" class="image__img orders-table__image is-loading" alt="Endkunde" title="Endkunde" onload="this.classList.remove('is-loading')" />
</picture>
</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">Kunden-Bestellnummer</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>423870</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">Bestelldatum</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>18.03.2021</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">Status</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="status">
<span class="status--violet">Storniert</span>
</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">Betrag</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">325.90</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">Aktion</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="ellipsis-actions">
<button type="button" class="ellipsis-actions__toggle">
<span class="visually-hidden">More actions</span>
</button>
<div class="info-tooltip__html" data-info-tooltip-content-html>
<ul class="ellipsis-actions__list">
<li class="ellipsis-actions__list-item">
<button type="button" class="ellipsis-actions__link">Details</button>
</li>
<li class="ellipsis-actions__list-item">
<a href="#" class="ellipsis-actions__link">Etiketten drucken</a>
</li>
<li class="ellipsis-actions__list-item">
<a href="#" class="ellipsis-actions__link">Stornieren</a>
</li>
</ul>
</div>
</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">Bestellnummer</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<a href="#">98765432</a>
</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">Typ</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="image ">
<picture>
<img src="/example-assets/images/cart-management-table/cart-type-customer.svg" class="image__img orders-table__image is-loading" alt="Endkunde" title="Endkunde" onload="this.classList.remove('is-loading')" />
</picture>
</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">Kunden-Bestellnummer</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>423870</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">Bestelldatum</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>18.03.2021</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">Status</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="status">
<span class="status--blue">Versendet</span>
</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">Betrag</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">325.90</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">Aktion</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="ellipsis-actions">
<button type="button" class="ellipsis-actions__toggle">
<span class="visually-hidden">More actions</span>
</button>
<div class="info-tooltip__html" data-info-tooltip-content-html>
<ul class="ellipsis-actions__list">
<li class="ellipsis-actions__list-item">
<button type="button" class="ellipsis-actions__link">Details</button>
</li>
<li class="ellipsis-actions__list-item">
<a href="#" class="ellipsis-actions__link">Etiketten drucken</a>
</li>
<li class="ellipsis-actions__list-item">
<a href="#" class="ellipsis-actions__link">Stornieren</a>
</li>
</ul>
</div>
</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">Bestellnummer</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<a href="#">98765432</a>
</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">Typ</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="image ">
<picture>
<img src="/example-assets/images/cart-management-table/cart-type-customer.svg" class="image__img orders-table__image is-loading" alt="Endkunde" title="Endkunde" onload="this.classList.remove('is-loading')" />
</picture>
</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">Kunden-Bestellnummer</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>423870</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">Bestelldatum</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>18.03.2021</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">Status</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="status">
<span class="status--dark-grey">unknown</span>
</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">Betrag</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">325.90</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">Aktion</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="ellipsis-actions">
<button type="button" class="ellipsis-actions__toggle">
<span class="visually-hidden">More actions</span>
</button>
<div class="info-tooltip__html" data-info-tooltip-content-html>
<ul class="ellipsis-actions__list">
<li class="ellipsis-actions__list-item">
<button type="button" class="ellipsis-actions__link">Details</button>
</li>
<li class="ellipsis-actions__list-item">
<a href="#" class="ellipsis-actions__link">Etiketten drucken</a>
</li>
<li class="ellipsis-actions__list-item">
<a href="#" class="ellipsis-actions__link">Stornieren</a>
</li>
</ul>
</div>
</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">Bestellnummer</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<a href="#">98765432</a>
</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">Typ</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="image ">
<picture>
<img src="/example-assets/images/cart-management-table/cart-type-customer.svg" class="image__img orders-table__image is-loading" alt="Endkunde" title="Endkunde" onload="this.classList.remove('is-loading')" />
</picture>
</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">Kunden-Bestellnummer</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>423870</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">Bestelldatum</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>18.03.2021</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">Status</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="status">
<span class="status--yellow">In Freigabe</span>
</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">Betrag</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">325.90</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">Aktion</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="ellipsis-actions">
<button type="button" class="ellipsis-actions__toggle">
<span class="visually-hidden">More actions</span>
</button>
<div class="info-tooltip__html" data-info-tooltip-content-html>
<ul class="ellipsis-actions__list">
<li class="ellipsis-actions__list-item">
<button type="button" class="ellipsis-actions__link">Details</button>
</li>
<li class="ellipsis-actions__list-item">
<a href="#" class="ellipsis-actions__link">Etiketten drucken</a>
</li>
<li class="ellipsis-actions__list-item">
<a href="#" class="ellipsis-actions__link">Stornieren</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr class="responsive-table__tr" data-responsive-table-filter-no-match hidden>
<td class="responsive-table__td" colspan="7">
<div class="wysiwyg-content">
<p class="responsive-table__no-match">Keine Bestellungen gefunden</p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="orders__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>
</div>
</div>
{% include '@SharedComponents/modules/b2b-account/templates/orders/orders.twig' %}
{
"header": {
"title": "Bestellungen",
"subtitle": "(1–10 / 60 Bestellungen)",
"headingLevel": "3"
},
"navigation": {
"headingLevel": "3",
"title": "Account Navigation",
"items": [
{
"name": "Profil",
"href": "#",
"icon": "profile",
"subLinksList": [
{
"name": "Persönliche Daten",
"href": "#"
},
{
"name": "Kommunikation",
"href": "#"
},
{
"name": "Adressen",
"href": "#"
}
]
},
{
"name": "Bestellungen",
"href": "#",
"icon": "orders",
"active": true,
"subLinksList": [
{
"name": "Bestellübersicht",
"href": "#",
"active": true
},
{
"name": "Bestellungen freigeben",
"href": "#"
}
]
},
{
"name": "Auswertungen",
"href": "#",
"icon": "analysis"
},
{
"name": "Rechnungen",
"href": "#",
"icon": "invoices"
},
{
"name": "Gutschriften",
"href": "#",
"icon": "credit-notes"
},
{
"name": "Merklisten",
"href": "#",
"icon": "wishlist"
},
{
"name": "Warenkörbe",
"href": "#",
"icon": "cart"
},
{
"name": "Retouren",
"href": "#",
"icon": "return",
"subLinksList": [
{
"name": "Retourenübersicht"
},
{
"name": "Retoure erfassen"
},
{
"name": "Retourenliste"
}
]
},
{
"name": "Garantieanträge",
"href": "#",
"icon": "warranty"
},
{
"name": "Serviceanträge",
"href": "#",
"icon": "service"
}
]
},
"filters": {
"resetButton": {
"variant": "tertiary-light-small",
"type": "button",
"role": "reset",
"title": "Zurücksetzen",
"value": "yes",
"disabled": false
},
"submitButton": {
"variant": "primary-small",
"type": "button",
"role": "submit",
"title": "Suchen",
"value": "yes",
"disabled": false
},
"filters": [
{
"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/text-field/text-field",
"data": {
"variant": "light",
"id": "orderNumber",
"name": "orderNumber",
"label": "Bestellnummer",
"required": false,
"value": "",
"disabled": false,
"type": "text",
"autocomplete": "",
"error": "",
"helper": ""
}
},
{
"path": "modules/shared/components/form-components/select/select",
"data": {
"variant": "light",
"id": "cartType",
"name": "cartType",
"label": "Warenkorb-Typ",
"required": false,
"disabled": false,
"selected": false,
"options": {
"option1": "Endkunde",
"option2": "Vororder",
"option3": "Händler"
},
"choose": "Please choose"
}
}
]
},
"ordersList": {
"include": "...orders-table--with-type"
},
"pagination": {
"include": "...pagination--with-next-and-prev"
}
}
No notes defined.