<div class="header-button">
<div class="header-button__container">
<a href="#" class="header-button__link -icon-cart">
<span class="visually-hidden">Zum Warenkorb</span>
<span class="visually-hidden">(</span>
<span class="header-button__currency">CHF</span>
<span class="header-button__value">2584.60</span>
<span class="visually-hidden">)</span>
<span class="visually-hidden">Artikel im Warenkorb:</span>
<span class="header-button__badge">4</span>
</a>
<button type="button" class="header-button__link--button -icon-cart">
<span class="visually-hidden">Zum Warenkorb</span>
<span class="visually-hidden">(</span>
<span class="header-button__currency">CHF</span>
<span class="header-button__value">2584.60</span>
<span class="visually-hidden">)</span>
<span class="visually-hidden">Artikel im Warenkorb:</span>
<span class="header-button__badge">4</span>
</button>
</div>
<div class="header-button-dropdown-root">
<div class="dropdown">
<button type="button" class="dropdown__toggle" style="max-width: 200px;">Vororder</button>
<div class="dropdown__content" style="width: 280px; left: auto; right: 0;">
<div class="header-button-dropdown--disabled">
<ul class="header-button-dropdown__list">
<li class="header-button-dropdown__list-item--active">
<div class="header-button-dropdown__image-container">
<div class="image ">
<picture>
<img src="/example-assets/images/header-cart-dropdown/preorder.svg" class="image__img header-button-dropdown__image is-loading" alt="Vororder" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
<button type="button" class="header-button-dropdown__name">
Vororder
</button>
<div class="header-button-dropdown__item-amount">
100
</div>
<div class="header-button-dropdown__active"></div>
</li>
<li class="header-button-dropdown__list-item">
<div class="header-button-dropdown__image-container">
<div class="image ">
<picture>
<img src="/example-assets/images/header-cart-dropdown/dealer.svg" class="image__img header-button-dropdown__image is-loading" alt="Händlerwarenkorb" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
<button type="button" class="header-button-dropdown__name">
Händlerwarenkorb
</button>
<div class="header-button-dropdown__item-amount">
3
</div>
<div class="header-button-dropdown__active"></div>
</li>
<li class="header-button-dropdown__list-item">
<div class="header-button-dropdown__image-container">
<div class="image ">
<picture>
<img src="/example-assets/images/header-cart-dropdown/customer.svg" class="image__img header-button-dropdown__image is-loading" alt="Kunde 1" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
<button type="button" class="header-button-dropdown__name">
Kunde 1
</button>
<div class="header-button-dropdown__item-amount">
12
</div>
<div class="header-button-dropdown__active"></div>
</li>
<li class="header-button-dropdown__list-item">
<div class="header-button-dropdown__image-container">
<div class="image ">
<picture>
<img src="/example-assets/images/header-cart-dropdown/customer.svg" class="image__img header-button-dropdown__image is-loading" alt="Kunde 2" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
<button type="button" class="header-button-dropdown__name">
Kunde 2
</button>
<div class="header-button-dropdown__item-amount">
5
</div>
<div class="header-button-dropdown__active"></div>
</li>
<li class="header-button-dropdown__list-item">
<div class="header-button-dropdown__image-container">
<div class="image ">
<picture>
<img src="/example-assets/images/header-cart-dropdown/customer.svg" class="image__img header-button-dropdown__image is-loading" alt="Kunde 2" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
<button type="button" class="header-button-dropdown__name">
KundeKundeKundeKundeKundeKundeKundeKundeKundeKundeKundeKundeKundeKundeKunde
</button>
<div class="header-button-dropdown__item-amount">
9999
</div>
<div class="header-button-dropdown__active"></div>
</li>
</ul>
<div class="header-button-dropdown__link-list">
<a href="#" class="header-button-dropdown__link">Warenkörbe verwalten</a>
</div>
<div class="header-button-dropdown__button">
<a href="#" class="button--primary-small">Zum Warenkorb</a>
</div>
</div>
</div>
</div>
</div>
</div>
{% include '@SharedComponents/modules/page/components/header/header-button/header-button.twig' %}
{
"demo": false,
"labels": {
"title": "Zum Warenkorb",
"items": "Artikel im Warenkorb"
},
"href": "#",
"icon": "cart",
"badge": "4",
"currency": "CHF",
"value": "2584.60",
"dropdown": {
"activeList": "Vororder",
"withImages": true,
"lists": [
{
"name": "Vororder",
"image": {
"src": "/example-assets/images/header-cart-dropdown/preorder.svg",
"alt": "Vororder"
},
"itemAmount": 100,
"isActive": true
},
{
"name": "Händlerwarenkorb",
"image": {
"src": "/example-assets/images/header-cart-dropdown/dealer.svg",
"alt": "Händlerwarenkorb"
},
"itemAmount": 3
},
{
"name": "Kunde 1",
"image": {
"src": "/example-assets/images/header-cart-dropdown/customer.svg",
"alt": "Kunde 1"
},
"itemAmount": 12
},
{
"name": "Kunde 2",
"image": {
"src": "/example-assets/images/header-cart-dropdown/customer.svg",
"alt": "Kunde 2"
},
"itemAmount": 5
},
{
"name": "KundeKundeKundeKundeKundeKundeKundeKundeKundeKundeKundeKundeKundeKundeKunde",
"image": {
"src": "/example-assets/images/header-cart-dropdown/customer.svg",
"alt": "Kunde 2"
},
"itemAmount": 9999
}
],
"linkList": [
{
"title": "Warenkörbe verwalten",
"href": "#"
}
],
"disabled": true,
"mobileButton": {
"variant": "primary-small",
"type": "a",
"href": "#",
"title": "Zum Warenkorb"
}
}
}
import './header-button.scss';
import HeaderButton, {selector as sel} from 'cando-cx-components-library/components/modules/page/components/header/header-button/header-button';
export default HeaderButton;
export const selector = sel;
@import "~shared/base";
@import "~cando-cx-components-library/components/modules/page/components/header/header-button/header-button";
used for header-wishlist and header-cart