<div class="header-cart">
<div class="header-button">
<div class="header-button__container">
<a href="" class="header-button__link -icon-cart">
<span class="visually-hidden">(</span>
<span class="header-button__label">Warenkorb</span>
<span class="visually-hidden">)</span>
</a>
<button type="button" class="header-button__link--button -icon-cart">
<span class="visually-hidden">(</span>
<span class="header-button__label">Warenkorb</span>
<span class="visually-hidden">)</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">
<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__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__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__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__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__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>
</div>
{% include '@SharedComponents/modules/page/components/header/header-cart/header-cart.twig' %}
{
"labels": {
"title": "Zum Warenkorb",
"items": "Artikel im Warenkorb"
},
"href": "#",
"data": {
"icon": "cart",
"label": "Warenkorb",
"dropdown": {
"activeList": "Vororder",
"withImages": true,
"lists": [
{
"name": "Vororder",
"image": {
"src": "/example-assets/images/header-cart-dropdown/preorder.svg",
"alt": "Vororder"
},
"isActive": true
},
{
"name": "Händlerwarenkorb",
"image": {
"src": "/example-assets/images/header-cart-dropdown/dealer.svg",
"alt": "Händlerwarenkorb"
}
},
{
"name": "Kunde 1",
"image": {
"src": "/example-assets/images/header-cart-dropdown/customer.svg",
"alt": "Kunde 1"
}
},
{
"name": "Kunde 2",
"image": {
"src": "/example-assets/images/header-cart-dropdown/customer.svg",
"alt": "Kunde 2"
}
},
{
"name": "KundeKundeKundeKundeKundeKundeKundeKundeKundeKundeKundeKundeKundeKundeKunde",
"image": {
"src": "/example-assets/images/header-cart-dropdown/customer.svg",
"alt": "Kunde 2"
}
}
],
"linkList": [
{
"title": "Warenkörbe verwalten",
"href": "#"
}
],
"mobileButton": {
"variant": "primary-small",
"type": "a",
"href": "#",
"title": "Zum Warenkorb"
}
}
}
}
No notes defined.