<div class="b2b-cart">
<div class="b2b-cart__container">
<div class="b2b-cart__title-container">
<div class="image ">
<picture>
<img src="/example-assets/images/cart/dealer.svg" class="image__img b2b-cart__title-image is-loading" alt="Händler" onload="this.classList.remove('is-loading')" />
</picture>
</div>
<h3 class="b2b-cart__title">Warenkorb «Händler»</h3>
</div>
<div class="b2b-cart__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="delivery-address">
<div class="delivery-address__customer-switch">
<div class="customer-switch">
<div class="customer-switch__item">
<div class="customer-switch__title">99999 - Administration</div>
<a href="#" class="customer-switch__link">Kundennummer wechseln</a>
</div>
<div class="customer-switch__item">
<div class="customer-switch__title">98765 - Filiale Schaffhausen</div>
<a href="#" class="customer-switch__link">Kostenstelle wechseln</a>
</div>
</div>
</div>
<div class="delivery-address__own-cost-center-reference">
<div class="text-field--light is-initialized">
<div class="text-field__wrapper">
<input class="text-field__input" id="checkout-own-cost-center-reference" type="text" name="checkout-own-cost-center-reference" />
<label class="text-field__label" for="checkout-own-cost-center-reference">Kostenstellen-Referenz
</label>
</div>
</div>
</div>
<div class="delivery-address__address">
<address class="address">
<div class="address__address-value">Speedy Gonzales GmbH</div>
<div class="address__address-value">Daniel Downhill</div>
<div class="address__address-value">Im Grip 10</div>
<div class="address__address-value">4242 Laufen</div>
<div class="address__address-value">Schweiz</div>
<a href="#" class="address__address-link">Lieferadresse ändern</a>
</address>
</div>
</div>
</div>
<div class="info-block__block">
<div class="info-block__block-title">Lieferart</div>
<div class="delivery-method">
<div class="delivery-method__method">
<div class="select--light is-initialized is-filled-in">
<div class="select__wrapper">
<select class="select__select" id="checkout-delivery-method" name="delivery-method" required>
<option value="" disabled>Please choose</option>
<option value="postEconomy" selected="selected">Post Economy: CHF 9.00</option>
<option value="postSameDay">Post Same Day: CHF 64.00</option>
</select>
</div>
</div>
</div>
<div class="delivery-method__cost">Portofreie Lieferung (ab CHF 50.00)</div>
<div class="delivery-method__note">Bestellungen bis 18 Uhr erhalten Sie am folgenden Werktag, nach 18 Uhr am übernächsten Werktag. Portofreie Lieferung ab CHF 300.00 Warenwert (exkl. MwSt).</div>
<div class="delivery-method__date">
<div class="text-field--light date-picker--light is-initialized is-filled-in" 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="checkout-desired-date" type="text" name="checkout-desired-date" value="2021-04-09" />
<label class="text-field__label date-picker__label" for="checkout-desired-date">Wunschtermin</label>
<button type="reset" class="date-picker__reset"></button>
</div>
</div>
</div>
<div class="delivery-method__information">
<div class="text-area--light is-initialized">
<div class="text-area__wrapper">
<textarea class="text-area__input" id="checkout-delivery-information" name="delivery-information" rows="2" maxlength="100">
</textarea>
<label class="text-area__label" for="checkout-delivery-information">Lieferinformationen
</label>
</div>
</div>
</div>
</div>
</div>
<div class="info-block__block">
<div class="info-block__block-title">Zahlungsart</div>
<div class="payment-method">
<div class="payment-method__icon-container">
<div class="payment-method__icon--select">
<div class="image ">
<picture>
<img src="/example-assets/images/payment-method/invoice.svg" class="image__img payment-method__image is-loading" alt="Invoice" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
<div class="payment-method__method">
<div class="select--light is-initialized is-filled-in">
<div class="select__wrapper">
<select class="select__select" id="checkout-payment-method" name="payment-method" required>
<option value="" disabled>Please choose</option>
<option value="invoice" selected="selected">Rechnung</option>
<option value="cashOnDelivery">Nachnahme</option>
</select>
</div>
</div>
</div>
</div>
<div class="payment-method__billing-address">
<address class="address">
<div class="address__title">
Rechnungsadresse
</div>
<div class="address__address-value">Speedy Gonzales GmbH</div>
<div class="address__address-value">Daniel Downhill</div>
<div class="address__address-value">Im Grip 10</div>
<div class="address__address-value">4242 Laufen</div>
<div class="address__address-value">Schweiz</div>
</address>
</div>
<div class="payment-method__promo-code">
<div class="text-field--light is-initialized">
<div class="text-field__wrapper">
<input class="text-field__input" id="checkout-promo-code" type="text" name="promo-code" />
<label class="text-field__label" for="checkout-promo-code">Promo Code
</label>
</div>
</div>
</div>
</div>
</div>
<div class="info-block__block">
<div class="info-block__block-title">Optionale Angaben</div>
<div class="further-information">
<div class="further-information__order-no">
<div class="text-field--light is-initialized">
<div class="text-field__wrapper">
<input class="text-field__input" id="checkout-own-order-no" type="text" name="own-order-no" />
<label class="text-field__label" for="checkout-own-order-no">Eigene Bestellnummer
</label>
</div>
</div>
</div>
<div class="further-information__comment">
<div class="text-area--light is-initialized">
<div class="text-area__wrapper">
<textarea class="text-area__input" id="checkout-comment" name="comment" rows="2" maxlength="100">
</textarea>
<label class="text-area__label" for="checkout-comment">Bemerkung
</label>
</div>
</div>
</div>
<div class="further-information__toner-return">
<div class="checkbox--light is-initialized is-filled-in">
<div class="checkbox__wrapper">
<input class="checkbox__input" id="checkout-toner-return" type="checkbox" name="toner-return" value="1" />
<label class="checkbox__label" for="checkout-toner-return">
<span>Ich möchte Toner retournieren
</span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="b2b-cart__table">
<div class="cart-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 leeren
</button>
<button class="button-icon--icon-text-regular -icon-import" type="button" name="refresh" value="true">
CSV Importieren
</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="cart-table-search" type="text" name="cart-table-search" required data-responsive-table-search="true" placeholder="Suche" />
<label class="visually-hidden" for="cart-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="">
<col style="">
<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">
<div class="responsive-table__select-all-box">
<div class="checkbox--light is-initialized">
<div class="checkbox__wrapper">
<input class="checkbox__input" id="multi-selection-checkbox" type="checkbox" name="#" />
<label class="checkbox__label has-empty-label" for="multi-selection-checkbox">
<span>
</span>
</label>
</div>
</div>
<div class="responsive-table__multiselect-dropdown">
<div class="dropdown">
<button type="button" class="dropdown__toggle is-thin" style="max-width: 170px;"> </button>
<div class="dropdown__content">
<div class="responsive-table__batch-operations-dropdown">
<button type="button" class="responsive-table__batch-operations-dropdown-item">
Auswahl in anderen Warenkorb kopieren
</button>
<button type="button" class="responsive-table__batch-operations-dropdown-item">
Auswahl in anderen Warenkorb verschieben
</button>
<button type="button" class="responsive-table__batch-operations-dropdown-item">
Auswahl löschen
</button>
</div>
</div>
</div>
</div>
</div>
</th>
<th class="responsive-table__th is-right-aligned is-index-column">
Pos.
</th>
<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-left is-select-td">
<div class="responsive-table__td-inner-container">
<div class="checkbox--light is-initialized is-filled-in">
<div class="checkbox__wrapper">
<input class="checkbox__input" id="multi-select-1" type="checkbox" name="#" value="1" data-multi-selectable="true" />
<label class="checkbox__label has-empty-label" for="multi-select-1">
<span>
</span>
</label>
</div>
</div>
</div>
</td>
<td class="responsive-table__td is-right-aligned is-index-td">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Pos.</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
1
</div>
</div>
</div>
</td>
<td class="responsive-table__td is-top-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">
<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>
</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-1504924425" min="1" max="99" name="quantity-1" value="5" />
<label class="visually-hidden" for="quantity-1-1504924425">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 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">
<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-left is-select-td">
<div class="responsive-table__td-inner-container">
<div class="checkbox--light is-initialized is-filled-in">
<div class="checkbox__wrapper">
<input class="checkbox__input" id="multi-select-2" type="checkbox" name="#" value="1" data-multi-selectable="true" />
<label class="checkbox__label has-empty-label" for="multi-select-2">
<span>
</span>
</label>
</div>
</div>
</div>
</td>
<td class="responsive-table__td is-right-aligned is-index-td">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Pos.</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
2
</div>
</div>
</div>
</td>
<td class="responsive-table__td is-top-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">
<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>
</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-1697404273" min="1" max="99" name="quantity-1" value="5" />
<label class="visually-hidden" for="quantity-1-1697404273">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 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">
<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-left is-select-td">
<div class="responsive-table__td-inner-container">
<div class="checkbox--light is-initialized is-filled-in">
<div class="checkbox__wrapper">
<input class="checkbox__input" id="multi-select-3" type="checkbox" name="#" value="1" data-multi-selectable="true" />
<label class="checkbox__label has-empty-label" for="multi-select-3">
<span>
</span>
</label>
</div>
</div>
</div>
</td>
<td class="responsive-table__td is-right-aligned is-index-td">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Pos.</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
3
</div>
</div>
</div>
</td>
<td class="responsive-table__td is-top-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">
<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>
</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-1385427013" min="1" max="99" name="quantity-1" value="5" />
<label class="visually-hidden" for="quantity-1-1385427013">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 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">
<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="11">
<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="b2b-cart__statement-of-cost" data-b2b-cart-statement-of-cost>
<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">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 class="sticky-toolbar">
<div class="sticky-toolbar__container">
<form class="cart-toolbar">
<div class="cart-toolbar__inner-container">
</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" data-b2b-cart-gtc="true" />
<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-checkout/templates/cart/cart.twig' %}
{
"heading": {
"title": "Warenkorb «Händler»",
"level": "3",
"image": {
"src": "/example-assets/images/cart/dealer.svg",
"alt": "Händler"
}
},
"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": "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"
}
}
}
]
},
"cartTable": {
"include": "...cart-table--with-rrp"
},
"deliveryAndPayment": {
"blocks": [
{
"title": "Lieferadresse",
"template": {
"path": "b2b-checkout/components/delivery-address/delivery-address",
"data": {
"address": {
"company": "Speedy Gonzales GmbH",
"firstName": "Daniel",
"lastName": "Downhill",
"street": "Im Grip",
"streetNo": "10",
"zip": "4242",
"city": "Laufen",
"country": "Schweiz",
"link": {
"title": "Lieferadresse ändern",
"href": "#"
}
},
"customerSwitch": {
"list": [
{
"title": "99999 - Administration",
"link": {
"href": "#",
"title": "Kundennummer wechseln"
}
},
{
"title": "98765 - Filiale Schaffhausen",
"link": {
"href": "#",
"title": "Kostenstelle wechseln"
}
}
]
},
"ownCostCenterReference": {
"variant": "light",
"id": "checkout-own-cost-center-reference",
"name": "checkout-own-cost-center-reference",
"label": "Kostenstellen-Referenz",
"required": false,
"value": "",
"disabled": false,
"type": "text",
"autocomplete": "",
"error": "",
"helper": ""
}
}
}
},
{
"title": "Lieferart",
"template": {
"path": "b2b-checkout/components/delivery-method/delivery-method",
"data": {
"methodSelect": {
"variant": "light",
"id": "checkout-delivery-method",
"name": "delivery-method",
"label": "",
"required": true,
"disabled": false,
"selected": "postEconomy",
"options": {
"postEconomy": "Post Economy: CHF 9.00",
"postSameDay": "Post Same Day: CHF 64.00"
},
"choose": "Please choose",
"error": "",
"helper": ""
},
"methodCost": "Portofreie Lieferung (ab CHF 50.00)",
"methodNote": "Bestellungen bis 18 Uhr erhalten Sie am folgenden Werktag, nach 18 Uhr am übernächsten Werktag. Portofreie Lieferung ab CHF 300.00 Warenwert (exkl. MwSt).",
"desiredDatePicker": {
"variant": "light",
"language": "",
"format": "",
"minDate": "",
"maxDate": "",
"id": "checkout-desired-date",
"name": "checkout-desired-date",
"label": "Wunschtermin",
"type": "text",
"value": "2021-04-09",
"required": false,
"disabled": false,
"error": "",
"helper": ""
},
"deliveryInformation": {
"variant": "light",
"id": "checkout-delivery-information",
"name": "delivery-information",
"label": "Lieferinformationen",
"required": false,
"value": "",
"disabled": false,
"maxlength": 100,
"rows": 2
}
}
}
},
{
"title": "Zahlungsart",
"template": {
"path": "b2b-checkout/components/payment-method/payment-method",
"data": {
"methodImage": {
"alt": "Invoice",
"src": "/example-assets/images/payment-method/invoice.svg"
},
"methodSelect": {
"variant": "light",
"id": "checkout-payment-method",
"name": "payment-method",
"required": true,
"disabled": false,
"selected": "invoice",
"options": {
"invoice": "Rechnung",
"cashOnDelivery": "Nachnahme"
},
"choose": "Please choose",
"error": "",
"helper": ""
},
"billingAddress": {
"title": "Rechnungsadresse",
"company": "Speedy Gonzales GmbH",
"firstName": "Daniel",
"lastName": "Downhill",
"street": "Im Grip",
"streetNo": "10",
"zip": "4242",
"city": "Laufen",
"country": "Schweiz"
},
"promoCode": {
"variant": "light",
"id": "checkout-promo-code",
"name": "promo-code",
"label": "Promo Code",
"required": false,
"value": "",
"disabled": false,
"type": "text",
"autocomplete": "",
"error": "",
"helper": ""
}
}
}
},
{
"title": "Optionale Angaben",
"template": {
"path": "b2b-checkout/components/further-information/further-information",
"data": {
"ownOrderNo": {
"variant": "light",
"id": "checkout-own-order-no",
"name": "own-order-no",
"label": "Eigene Bestellnummer",
"required": false,
"value": "",
"disabled": false,
"type": "text",
"autocomplete": "",
"error": "",
"helper": ""
},
"comment": {
"variant": "light",
"id": "checkout-comment",
"name": "comment",
"label": "Bemerkung",
"required": false,
"value": "",
"disabled": false,
"maxlength": 100,
"rows": 2,
"error": "",
"helper": ""
},
"tonerReturn": {
"variant": "light",
"id": "checkout-toner-return",
"name": "toner-return",
"label": "Ich möchte Toner retournieren",
"value": "1",
"required": false,
"disabled": false,
"checked": false,
"error": "",
"helper": ""
}
}
}
}
]
},
"checkoutToolbar": {
"toolbar": {
"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": "",
"attributes": {
"data-b2b-cart-gtc": "true"
}
},
"counterBubble": "27",
"totalLabel": "Gesamtsumme inkl. MwSt.",
"price": {
"variant": "large",
"labels": {
"from": "ab",
"instead": "statt"
},
"price": {
"currency": "CHF",
"price": "123'456.78"
}
},
"rightButton": {
"variant": "primary",
"type": "button",
"role": "submit",
"title": "Jetzt kaufen",
"disabled": false
}
}
}
}
import './cart.scss';
import Cart, {selector as sel} from 'cando-cx-components-library/components/modules/b2b-checkout/templates/cart/cart';
export default Cart;
export const selector = sel;
@import "~shared/base";
@import "~cando-cx-components-library/components/modules/b2b-checkout/templates/cart/cart";
No notes defined.