<div class="order-approval-detail">
<div class="order-approval-detail__container">
<div class="order-approval-detail__content">
<div class="order-approval-detail__back-button--top">
<a href="#" class="button-icon--icon-text-large -icon-arrow-left">
Zurück zu Bestellfreigaben
</a>
</div>
<div class="account-header">
<h3 class="account-header__title">Detail Bestellfreigabe «98765431»</h3>
</div>
<div class="order-approval-detail__info-block">
<div class="info-block">
<div class="info-block__container">
<div class="info-block__block">
<div class="info-block__block-title">Lieferadresse</div>
<div class="wysiwyg-content">
<p><b>999999 - Administration</b></p>
<p><b>987654 - Filiale Schaffhausen</b></p>
<p>Nine 2 Five AG<br>Sabine Schreiber<br>Im Bürogummi 10<br>8200 Schaffhausen</p>
</div>
</div>
<div class="info-block__block">
<div class="info-block__block-title">Lieferart</div>
<div class="wysiwyg-content">
<p><b>Post Economy: CHF 9.00</b></p>
<p class="has-reduced-margin"><b>Bestelldatum</b></p>
<p>04.06.2021</p>
</div>
</div>
<div class="info-block__block">
<div class="info-block__block-title">Zahlungsart</div>
<div class="wysiwyg-content">
<p><b>Per Rechnung</b></p>
<p>Nine 2 Five AG<br>Sabine Schreiber<br>Im Bürogummi 10<br>8200 Schaffhausen</p>
</div>
</div>
<div class="info-block__block">
<div class="info-block__block-title">Optionale Angaben</div>
<div class="wysiwyg-content">
<p class="has-reduced-margin"><b>Eigene Bestellnummer</b></p>
<p>846107867</p>
<p class="has-reduced-margin"><b>Bemerkung</b></p>
<p>Bitte Paket beim Nachbarn Herr Hugentobler abgeben</p>
</div>
</div>
</div>
</div>
</div>
<div class="order-approval-detail__table">
<div class="order-approval-detail-table">
<div class="table-header">
<div class="table-header__column--title">
<h4 class="heading-counter">
Artikel
<span class="counter-bubble" data-counter="27"></span>
</h4>
</div>
<div class="table-header__column--buttons">
<button class="button-icon--icon-text-regular -icon-trash" type="button" name="refresh" value="true">
Warenkorb löschen
</button>
</div>
</div>
<div class="responsive-table--first-column-mobile-full-height -spacing-large">
<div class="table-search" data-offset="none">
<div class="table-search__container">
<div class="text-field--light text-field-search--light is-initialized" data-disable-text-field-js>
<div class="text-field__wrapper text-field-search__wrapper">
<input class="text-field__input text-field-search__input" id="order-approval-detail-table-search" type="text" name="order-approval-detail-table-search" required data-responsive-table-search="true" placeholder="Suche" />
<label class="visually-hidden" for="order-approval-detail-table-search">Suche</label>
<button type="reset" class="text-field-search__reset"></button>
<button type="submit" class="text-field-search__search"></button>
<div class="text-field-search__loader ">
<div class="loading-spinner -vertical -horizontal">
<div class="loading-spinner__spinner--small"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<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="160px">
<col style="64px">
</colgroup>
<thead>
<tr class="responsive-table__tr">
<th class="responsive-table__th">
</th>
<th class="responsive-table__th">
Artikel
</th>
<th class="responsive-table__th">
Inhaltsmenge
</th>
<th class="responsive-table__th is-centered">
Lager
</th>
<th class="responsive-table__th">
UVP
</th>
<th class="responsive-table__th">
Preis
</th>
<th class="responsive-table__th is-right-aligned">
Preis Total
</th>
<th class="responsive-table__th is-hidden-on-desktop">
Anzahl
</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 is-top-aligned">
<div class="responsive-table__td-inner-container">
<a href="#" class="image-cell__image-link">
<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>
</a>
<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">
<div class="responsive-table__td-inner-container">
<h5 class="item-cell__title--with-attributes">
<a href="" class="item-cell__title-link">Bosch Gepäckträgerakku PowerPack 500 Performance Anthrazit</a>
</h5>
<div class="attributes--small-bold">
<ul class="attributes__list">
<li class="attributes__list-item">
<div class="attributes__name">Art.-Nr.</div>
<div class="attributes__value " title="56.65563">
56.65563
</div>
</li>
<li class="attributes__list-item">
<div class="attributes__name">Gruppe</div>
<div class="attributes__value " title="Bosch eBike">
Bosch eBike
</div>
</li>
</ul>
</div>
<div class="text-field--light text-field-placeholder--light is-initialized">
<div class="text-field__wrapper text-field-placeholder__wrapper ">
<input class="text-field__input text-field-placeholder__input" id="comment-1" type="text" name="comment-1" placeholder="Kommentar" />
<label class="visually-hidden" for="comment-1">Kommentar
</label>
</div>
</div>
<div class="item-cell__value-list">
<ul class="value-list">
<li class="value-list__item--info">
<div class="value-list__label">Vorgezogene Recyclinggebühren:</div>
<div class="value-list__price">
<div class="price--extra-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">4.00</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="value-list__tooltip">
<button type="button" class="info-tooltip__toggle--small" data-info-tooltip-content="Für das Recycling.">
<span class="visually-hidden">Information</span>
</button>
</div>
</li>
</ul>
</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">Inhaltsmenge</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>10 Artikel / Box</p>
</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">UVP</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container--prevent-wrap">
<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--prevent-wrap">
<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">Preis Total</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container--prevent-wrap">
<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">Anzahl</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<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-1-242334243" min="1" max="99" name="quantity-1" value="5" />
<label class="visually-hidden" for="quantity-1-242334243">Anzahl</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>
</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">Aktion</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<button class="button-icon--icon-regular -icon-trash" type="button" name="test" value="testvalue">
<span class="visually-hidden">Artikel löschen</span>
</button>
</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">
<a href="#" class="image-cell__image-link">
<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>
</a>
<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">
<div class="responsive-table__td-inner-container">
<h5 class="item-cell__title--with-attributes">
<a href="" class="item-cell__title-link">Bosch Gepäckträgerakku PowerPack 500 Performance Anthrazit</a>
</h5>
<div class="attributes--small-bold">
<ul class="attributes__list">
<li class="attributes__list-item">
<div class="attributes__name">Art.-Nr.</div>
<div class="attributes__value " title="56.65563">
56.65563
</div>
</li>
<li class="attributes__list-item">
<div class="attributes__name">Gruppe</div>
<div class="attributes__value " title="Bosch eBike">
Bosch eBike
</div>
</li>
</ul>
</div>
<div class="text-field--light text-field-placeholder--light is-initialized">
<div class="text-field__wrapper text-field-placeholder__wrapper ">
<input class="text-field__input text-field-placeholder__input" id="comment-2" type="text" name="comment-2" placeholder="Kommentar" />
<label class="visually-hidden" for="comment-2">Kommentar
</label>
</div>
</div>
<div class="item-cell__value-list">
<ul class="value-list">
<li class="value-list__item--info">
<div class="value-list__label">Vorgezogene Recyclinggebühren:</div>
<div class="value-list__price">
<div class="price--extra-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">4.00</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="value-list__tooltip">
<button type="button" class="info-tooltip__toggle--small" data-info-tooltip-content="Für das Recycling.">
<span class="visually-hidden">Information</span>
</button>
</div>
</li>
</ul>
</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">Inhaltsmenge</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>10 Artikel / Box</p>
</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">UVP</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container--prevent-wrap">
<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--prevent-wrap">
<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">Preis Total</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container--prevent-wrap">
<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">Anzahl</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<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-1-1210520911" min="1" max="99" name="quantity-1" value="5" />
<label class="visually-hidden" for="quantity-1-1210520911">Anzahl</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>
</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">Aktion</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<button class="button-icon--icon-regular -icon-trash" type="button" name="test" value="testvalue">
<span class="visually-hidden">Artikel löschen</span>
</button>
</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">
<a href="#" class="image-cell__image-link">
<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>
</a>
<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">
<div class="responsive-table__td-inner-container">
<h5 class="item-cell__title--with-attributes">
<a href="" class="item-cell__title-link">Bosch Gepäckträgerakku PowerPack 500 Performance Anthrazit</a>
</h5>
<div class="attributes--small-bold">
<ul class="attributes__list">
<li class="attributes__list-item">
<div class="attributes__name">Art.-Nr.</div>
<div class="attributes__value " title="56.65563">
56.65563
</div>
</li>
<li class="attributes__list-item">
<div class="attributes__name">Gruppe</div>
<div class="attributes__value " title="Bosch eBike">
Bosch eBike
</div>
</li>
</ul>
</div>
<div class="text-field--light text-field-placeholder--light is-initialized">
<div class="text-field__wrapper text-field-placeholder__wrapper ">
<input class="text-field__input text-field-placeholder__input" id="comment-3" type="text" name="comment-3" placeholder="Kommentar" />
<label class="visually-hidden" for="comment-3">Kommentar
</label>
</div>
</div>
<div class="item-cell__value-list">
<ul class="value-list">
<li class="value-list__item--info">
<div class="value-list__label">Vorgezogene Recyclinggebühren:</div>
<div class="value-list__price">
<div class="price--extra-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">4.00</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="value-list__tooltip">
<button type="button" class="info-tooltip__toggle--small" data-info-tooltip-content="Für das Recycling.">
<span class="visually-hidden">Information</span>
</button>
</div>
</li>
</ul>
</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">Inhaltsmenge</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>10 Artikel / Box</p>
</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">UVP</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container--prevent-wrap">
<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--prevent-wrap">
<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">Preis Total</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container--prevent-wrap">
<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">Anzahl</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<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-1-2132513265" min="1" max="99" name="quantity-1" value="5" />
<label class="visually-hidden" for="quantity-1-2132513265">Anzahl</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>
</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">Aktion</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<button class="button-icon--icon-regular -icon-trash" type="button" name="test" value="testvalue">
<span class="visually-hidden">Artikel löschen</span>
</button>
</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="order-approval-detail__statement-of-cost">
<div class="order-approval-detail__back-button--bottom">
<a href="#" class="button-icon--icon-text-large -icon-arrow-left">
Zurück zu Bestellfreigaben
</a>
</div>
<div class="statement-of-cost">
<ul class="statement-of-cost__list">
<li class="statement-of-cost__list-item">
<div class="statement-of-cost__title-container">
<div class="statement-of-cost__title">Subtotal</div>
</div>
<div class="statement-of-cost__price">
<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">2'259.90</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="statement-of-cost__list-item">
<div class="statement-of-cost__title-container">
<div class="statement-of-cost__title">Rabatt</div>
</div>
<div class="statement-of-cost__price">
<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">174.00</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="statement-of-cost__list-item">
<div class="statement-of-cost__title-container">
<div class="statement-of-cost__title">Lieferkosten</div>
</div>
<div class="statement-of-cost__price">
<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">9.00</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="statement-of-cost__list-item">
<div class="statement-of-cost__title-container">
<div class="statement-of-cost__title">Vorgezogene Recyclinggebühr</div>
<div class="statement-of-cost__tooltip">
<button type="button" class="info-tooltip__toggle--small" data-info-tooltip-content="Lorem ipsum dolor sit amet">
<span class="visually-hidden">Information</span>
</button>
</div>
</div>
<div class="statement-of-cost__price">
<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">4.00</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="statement-of-cost__list-item">
<div class="statement-of-cost__title-container">
<div class="statement-of-cost__title">Transportzuschlag Gefahrengut</div>
<div class="statement-of-cost__tooltip">
<button type="button" class="info-tooltip__toggle--small" data-info-tooltip-content="Lorem ipsum dolor sit amet">
<span class="visually-hidden">Information</span>
</button>
</div>
</div>
<div class="statement-of-cost__price">
<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">35.00</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="statement-of-cost__list-item">
<div class="statement-of-cost__title-container">
<div class="statement-of-cost__title">MwSt. (7.7%)</div>
</div>
<div class="statement-of-cost__price">
<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">59.00</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="sticky-toolbar">
<div class="sticky-toolbar__container">
<form class="cart-toolbar">
<div class="cart-toolbar__inner-container">
<div class="cart-toolbar__button--left">
<button class="button--tertiary-light" type="submit">Kauf stornieren</button>
</div>
</div>
<div class="cart-toolbar__gtc">
<div class="checkbox--light is-initialized is-filled-in">
<div class="checkbox__wrapper">
<input class="checkbox__input" id="gtc" type="checkbox" name="gtc" value="1" />
<label class="checkbox__label" for="gtc">
<span>Ich habe meine Liste geprüft und alle Angaben sind korrekt. Ich erkläre mich mit den Datenschutzbestimmungen und AGB einverstanden.
</span>
</label>
</div>
</div>
</div>
<div class="cart-toolbar__inner-container">
<div class="cart-toolbar__label-container">
<span class="counter-bubble" data-counter="27"></span>
<div class="cart-toolbar__label">Gesamtsumme inkl. MwSt.</div>
</div>
<div class="cart-toolbar__price">
<div class="price--large">
<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">123'456.78</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cart-toolbar__button--right">
<div class="cart-toolbar__button-wrapper">
</div>
<div class="cart-toolbar__button-wrapper">
</div>
<div class="cart-toolbar__button-wrapper">
</div>
<div class="cart-toolbar__button-wrapper">
</div>
<div class="cart-toolbar__button-wrapper">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
{% include '@SharedComponents/modules/b2b-order-approval/templates/order-approval-detail/order-approval-detail.twig' %}
{
"backButton": {
"variant": "icon-text-large",
"title": "Zurück zu Bestellfreigaben",
"icon": "arrow-left",
"type": "a",
"href": "#"
},
"header": {
"title": "Detail Bestellfreigabe «98765431»",
"headingLevel": "3"
},
"deliveryAndPayment": {
"blocks": [
{
"title": "Lieferadresse",
"template": {
"path": "shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p><b>999999 - Administration</b></p><p><b>987654 - Filiale Schaffhausen</b></p><p>Nine 2 Five AG<br>Sabine Schreiber<br>Im Bürogummi 10<br>8200 Schaffhausen</p>"
}
}
},
{
"title": "Lieferart",
"template": {
"path": "shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p><b>Post Economy: CHF 9.00</b></p><p class=\"has-reduced-margin\"><b>Bestelldatum</b></p><p>04.06.2021</p>"
}
}
},
{
"title": "Zahlungsart",
"template": {
"path": "shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p><b>Per Rechnung</b></p><p>Nine 2 Five AG<br>Sabine Schreiber<br>Im Bürogummi 10<br>8200 Schaffhausen</p>"
}
}
},
{
"title": "Optionale Angaben",
"template": {
"path": "shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p class=\"has-reduced-margin\"><b>Eigene Bestellnummer</b></p><p>846107867</p><p class=\"has-reduced-margin\"><b>Bemerkung</b></p><p>Bitte Paket beim Nachbarn Herr Hugentobler abgeben</p>"
}
}
}
]
},
"table": {
"include": "...order-approval-detail-table--default"
},
"statementOfCost": {
"list": [
{
"title": "Subtotal",
"price": {
"variant": "small",
"labels": {
"from": "ab",
"instead": "statt"
},
"price": {
"currency": "CHF",
"price": "2'259.90"
}
}
},
{
"title": "Rabatt",
"price": {
"variant": "small",
"labels": {
"from": "ab",
"instead": "statt"
},
"price": {
"currency": "CHF",
"price": "174.00"
}
}
},
{
"title": "Lieferkosten",
"price": {
"variant": "small",
"labels": {
"from": "ab",
"instead": "statt"
},
"price": {
"currency": "CHF",
"price": "9.00"
}
}
},
{
"title": "Vorgezogene Recyclinggebühr",
"tooltip": {
"variant": "small",
"title": "Information",
"content": "Lorem ipsum dolor sit amet"
},
"price": {
"variant": "small",
"labels": {
"from": "ab",
"instead": "statt"
},
"price": {
"currency": "CHF",
"price": "4.00"
}
}
},
{
"title": "Transportzuschlag Gefahrengut",
"tooltip": {
"variant": "small",
"title": "Information",
"content": "Lorem ipsum dolor sit amet"
},
"price": {
"variant": "small",
"labels": {
"from": "ab",
"instead": "statt"
},
"price": {
"currency": "CHF",
"price": "35.00"
}
}
},
{
"title": "MwSt. (7.7%)",
"price": {
"variant": "small",
"labels": {
"from": "ab",
"instead": "statt"
},
"price": {
"currency": "CHF",
"price": "59.00"
}
}
}
]
},
"toolbar": {
"toolbar": {
"counterBubble": "27",
"totalLabel": "Gesamtsumme inkl. MwSt.",
"price": {
"variant": "large",
"labels": {
"from": "ab",
"instead": "statt"
},
"price": {
"currency": "CHF",
"price": "123'456.78"
}
},
"gtc": {
"variant": "light",
"id": "gtc",
"name": "gtc",
"label": "Ich habe meine Liste geprüft und alle Angaben sind korrekt. Ich erkläre mich mit den Datenschutzbestimmungen und AGB einverstanden.",
"value": "1",
"required": false,
"disabled": false,
"checked": false,
"error": "",
"helper": ""
},
"rightButton": {
"variant": "primary",
"type": "button",
"role": "submit",
"title": "Kauf freigeben",
"disabled": false
},
"leftButton": {
"variant": "tertiary-light",
"type": "button",
"role": "submit",
"title": "Kauf stornieren",
"disabled": false
}
}
}
}
import './order-approval-detail.scss';
@import "~shared/base";
@import "~cando-cx-components-library/components/modules/b2b-order-approval/templates/order-approval-detail/order-approval-detail";
No notes defined.