<div class="b2b-cart">
<div class="b2b-cart__container">
<div class="b2b-cart__message">
<div class="message--warning">
<div class="message__container--disabled">
<span class="visually-hidden">Warning message</span>
<div class="message__content">
<p class="message__text">Ihr Warenkorb ist leer.</p>
</div>
<div class="message__close-button">
<button class="button-icon--icon-regular -icon-close" type="button" name="close-big-menu" value="yes">
<span class="visually-hidden">Schliessen</span>
</button>
</div>
</div>
</div>
</div>
<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="">
<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-centered 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-centered">
EB
</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" data-responsive-table-filter-no-match hidden>
<td class="responsive-table__td" colspan="12">
<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">0.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">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">0.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">0.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">0.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">0.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">
<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">0.00</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": "0.00"
}
}
},
{
"title": "Rabatt",
"price": {
"variant": "small",
"labels": {
"from": "ab",
"instead": "statt"
},
"price": {
"currency": "CHF",
"price": "0.00"
}
}
},
{
"title": "Lieferkosten",
"price": {
"variant": "small",
"labels": {
"from": "ab",
"instead": "statt"
},
"price": {
"currency": "CHF",
"price": "0.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": "0.00"
}
}
},
{
"title": "MwSt. (7.7%)",
"price": {
"variant": "small",
"labels": {
"from": "ab",
"instead": "statt"
},
"price": {
"currency": "CHF",
"price": "0.00"
}
}
}
]
},
"message": {
"closeButton": {
"variant": "icon-regular",
"title": "Schliessen",
"icon": "close",
"type": "button",
"role": "button",
"name": "close-big-menu",
"value": "yes"
},
"variant": "warning",
"isHidden": false,
"labels": {
"info": "Information message",
"error": "Error message",
"warning": "Warning message",
"success": "Success message"
},
"message": "Ihr Warenkorb ist leer.",
"container": false
},
"shopButton": {
"variant": "primary",
"type": "button",
"role": "submit",
"title": "Weiter Einkaufen",
"disabled": false
},
"cartTable": {
"include": "...cart-table--empty"
},
"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": "0",
"totalLabel": "Gesamtsumme inkl. MwSt.",
"price": {
"variant": "large",
"labels": {
"from": "ab",
"instead": "statt"
},
"price": {
"currency": "CHF",
"price": "0.00"
}
},
"rightButton": {
"variant": "primary",
"type": "button",
"role": "submit",
"title": "Jetzt kaufen",
"disabled": true
}
}
}
}
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.