Darstellung im Frontend

Das Plugin rendert die Filter-Dropdowns je nach Einstellung automatisch in der Menüleiste oder lässt die Positionierung bewusst offen, sodass ihr sie an einer beliebigen Stelle integrieren könnt.

Für eine individuelle Platzierung gibt es zwei empfohlene Wege:

1. CMS-Element in Erlebniswelten: komfortabel über die Administration.
2. Twig-Include im Theme: für Anpassungen direkt im Theme-Code.

Damit der Filter nicht doppelt erscheint, solltet ihr in der Plugin-Konfiguration Anzeige der Filter-Dropdowns auf Nicht anzeigen setzen, wenn ihr die Dropdowns selbst platziert.

Variante A: Dediziertes CMS-Element

Das Plugin bringt ein eigenes CMS-Element mit, das ihr in Erlebniswelten verwenden könnt:

• Block: Commerce » Compatibility Filter
• Element: Compatibility Filter (Default)

Zieht den Block an die gewünschte Stelle in der Erlebniswelt. Das Element rendert die kaskadierenden Dropdowns inklusive aller Plugin-Logik (KBA-Suche, Submit-Verhalten etc.) so wie in der Menüleiste.

Variante B: Twig-Include in einem HTML-Element

Alternativ könnt ihr die Dropdowns per Twig-Include in einem beliebigen HTML-/Twig-Element platzieren. Für Erlebniswelten empfehlen wir das kostenlose HTML-Erlebniswelten-Element mit Twig-Compiler.

Das Element findet ihr dann beim Gestalten der Erlebniswelt:

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' ignore missing %}
    </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 in den Element-Einstellungen hinterlegen:

Das Ergebnis sieht dann so aus:

Natürlich könnt ihr das Styling beliebig an eure konkreten Anforderungen anpassen.

Eigene Integration im Theme

Wenn ihr die Filter direkt im Theme-Code einbinden wollt (z. B. in einem eigenen Layout-Block), nutzt ihr denselben Twig-Include wie oben, nur innerhalb eurer Theme-Templates:

{% sw_include '@Storefront/storefront/component/onco-compatibility/filter-dropdowns.html.twig' ignore missing %}