<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__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>
</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" disabled 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__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" disabled />
<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" disabled 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" disabled 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" disabled />
<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" disabled />
<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" disabled rows="2" maxlength="100">
</textarea>
<label class="text-area__label" for="checkout-comment">Bemerkung
</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" disabled>
Warenkorb leeren
</button>
<button class="button-icon--icon-text-regular -icon-import" type="button" name="refresh" value="true" disabled>
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="#" disabled />
<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 is-disabled" 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" disabled 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" disabled 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" disabled>
<span class="quantity-switcher__minus-content">–</span>
</button>
<input class="quantity-switcher__quantity" type="number" id="quantity-1-439338246" min="1" max="99" name="quantity-1" value="5" disabled />
<label class="visually-hidden" for="quantity-1-439338246">Anzahl</label>
<input type="hidden" name="productId" value="abcdefghijk-123" />
<button type="button" class="quantity-switcher__plus" disabled>
<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" disabled>
<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>
<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>
</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--locked"
},
"deliveryAndPayment": {
"blocks": [
{
"title": "Lieferadresse",
"template": {
"path": "b2b-checkout/components/delivery-address/delivery-address",
"data": {
"include": "...delivery-address--read-only-address-without-change-link"
}
}
},
{
"title": "Lieferart",
"template": {
"path": "b2b-checkout/components/delivery-method/delivery-method",
"data": {
"include": "...delivery-method--read-only-with-delivery-information-field"
}
}
},
{
"title": "Zahlungsart",
"template": {
"path": "b2b-checkout/components/payment-method/payment-method",
"data": {
"include": "...payment-method--read-only-with-multiple-options-with-promo-code"
}
}
},
{
"title": "Optionale Angaben",
"template": {
"path": "b2b-checkout/components/further-information/further-information",
"data": {
"include": "...further-information--read-only"
}
}
}
]
},
"checkoutToolbar": {
"include": "...checkout-toolbar--without-gtc-without-button"
}
}
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.