Darstellung im Frontend

In Erlebniswelten

Wir empfehlen als Grundlage für die Anzeige der Filter-Auswahl in den Erlebniswelten dieses hervorragende und kostenlose Plugin:

https://store.shopware.com/de/moorl29420842994f/html-erlebniswelten-element-mit-twig-compiler.html

Ihr findet dann beim Gestalten der Erlebniswelt dieses Element:

Als Inhalt empfehlen wir mit diesem Code zu starten:

HTML

<div class="my-custom-compi-filter">
    <div class="inner-container">
        {% sw_include '@Storefront/storefront/component/onco-compatibility/filter-dropdowns.html.twig' %}
    </div>
</div>

CSS

.my-custom-compi-filter{
    background: url(https://onlineshop.consulting/static/images/car.jpg);
    background-size: cover;
    background-position:center center;
    padding:30px;
}

.my-custom-compi-filter .inner-container{
    width: 400px;
    max-width:100%;
    background: rgba(200, 200, 200, 0.8);
    padding: 20px;
}

.my-custom-compi-filter .inner-container .onco-level-dropdown-container{
    margin-bottom: 10px;
}

.my-custom-compi-filter .inner-container .btn{
    width:100%;
}

Das könnt ihr hier bei den Element-Einstellungen hinterlegen:

Das Ergebnis sollte dann so aussehen:

Das könnt ihr dann natuerlich noch beliebig an eure konkreten Bedürfnisse anpassen.