# Sortierung / Filter in gleicher Template Datei ausgeben

**URL:** https://forum.shopware.com/t/sortierung-filter-in-gleicher-template-datei-ausgeben/93333
**Category:** Shopware 6 (German)
**Tags:** general, programming
**Created:** [9. März 2022 um 15:32 UTC](https://forum.shopware.com/t/sortierung-filter-in-gleicher-template-datei-ausgeben/93333 "2022-03-09T15:32:46Z")
**Posts on this page:** 16
**Page:** 1

<div class="post-metadata">

### Author: ![made-it](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/made-it/32/16373_2.png) [@made-it](https://forum.shopware.com/u/made-it)
#### Post date: [9. März 2022 um 15:32 UTC](https://forum.shopware.com/t/sortierung-filter-in-gleicher-template-datei-ausgeben/93333/1 "2022-03-09T15:32:46Z")

</div>

Hallo liebe Shopware Community,

ich habe gerade das Problem dass ich das Sortierungs-Dropdown in der gleichen Zeile bzw innerhalb des gleichen DIV-Elements wie die Filter ausgeben/anzeigen lassen will.

Jedoch ist es leider so das diese Elemente in Unterschiedlichen Template Dateien liegen und das einfache ausschneiden aus der **component/product/listing.html.twig** datei und einfügen in die **component/listing/filter-panel.html.twig** funktioniert nicht.

Habt ihr vielleicht eine Idee wie man das Umsetzen kann?

Liebe Grüße

---

<div class="post-metadata">

### Author: ![wtjsh](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/wtjsh/32/10500_2.png) [@wtjsh](https://forum.shopware.com/u/wtjsh)
#### Post date: [6. November 2023 um 13:38 UTC](https://forum.shopware.com/t/sortierung-filter-in-gleicher-template-datei-ausgeben/93333/2 "2023-11-06T13:38:57Z")

</div>

Ich habe genau das gleiche Problem. Gibt es mittlerweile eine Lösung dazu?  
Versucht habe ich dies auf zwei Wegen, jedoch führte dies nicht zum Ziel (s. u.).

Ich hoffe es kann jemand helfen.  
LG

```auto
{% sw_extends '@Storefront/storefront/component/listing/filter-panel.html.twig' %}

{% block component_filter_panel_items %}
    {{ parent() }}

    {% sw_include '@MyTemplate/storefront/component/sorting.html.twig' %}

    {% include '@MyTemplate/storefront/component/sorting.html.twig' with {
        sortings: sortings,
        current: currentSorting
    } %}
{% endblock %}

```

---

<div class="post-metadata">

### Author: ![Egal](https://avatars.discourse-cdn.com/v4/letter/e/c57346/32.png) [@Egal](https://forum.shopware.com/u/Egal)
#### Post date: [3. April 2024 um 19:35 UTC](https://forum.shopware.com/t/sortierung-filter-in-gleicher-template-datei-ausgeben/93333/3 "2024-04-03T19:35:45Z")

</div>

Habt ihr ne Lösung dafür gefunden? Ich quäle mich schon wieder ewig damit rum.

Ich finde ja auch, dass das unmöglich aussieht, dieses Hin und Her in dem Bereich.

VG

---

<div class="post-metadata">

### Author: ![wtjsh](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/wtjsh/32/10500_2.png) [@wtjsh](https://forum.shopware.com/u/wtjsh)
#### Post date: [4. April 2024 um 06:02 UTC](https://forum.shopware.com/t/sortierung-filter-in-gleicher-template-datei-ausgeben/93333/4 "2024-04-04T06:02:30Z")

</div>

Nein, leider noch nicht 😕

---

<div class="post-metadata">

### Author: ![Egal](https://avatars.discourse-cdn.com/v4/letter/e/c57346/32.png) [@Egal](https://forum.shopware.com/u/Egal)
#### Post date: [4. April 2024 um 13:10 UTC](https://forum.shopware.com/t/sortierung-filter-in-gleicher-template-datei-ausgeben/93333/5 "2024-04-04T13:10:48Z")

</div>

Ich ahnte es. 😅  
Egal, welches Shopware-Theme ich mir anschaue, ich habe es nirgends, optisch ansprechend gelöst, gefunden.  
Ich mache meinen Shop erst einmal fertig. Das dauert mir jetzt auch zu lange, dann gucke ich mir, Schritt für Schritt, die Probleme an. Da ich keine 10.000 Produkte anbiete, habe ich die Sortierung erst einmal ausgeblendet, damit das Durcheinander gelöst ist.  
Wie gesagt, ich bleibe dran.  
Danke, für deine Reaktion.

---

<div class="post-metadata">

### Author: ![wtjsh](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/wtjsh/32/10500_2.png) [@wtjsh](https://forum.shopware.com/u/wtjsh)
#### Post date: [5. April 2024 um 07:06 UTC](https://forum.shopware.com/t/sortierung-filter-in-gleicher-template-datei-ausgeben/93333/6 "2024-04-05T07:06:20Z")

</div>

Gerne 🙂 , auch wenn ich leider nichts zur Lösung beitragen konnte.  
Ich habe die Sortierung auch erst einmal ausgeblendet. Vllt meldet sich ja mal jemand von Shopware selbst bzgl dieses Problems.

---

<div class="post-metadata">

### Author: ![Makrele](https://avatars.discourse-cdn.com/v4/letter/m/96bed5/32.png) [@Makrele](https://forum.shopware.com/u/Makrele)
#### Post date: [22. Oktober 2024 um 14:17 UTC](https://forum.shopware.com/t/sortierung-filter-in-gleicher-template-datei-ausgeben/93333/7 "2024-10-22T14:17:36Z")

</div>

Ich bin zumindest soweit gekommen, dass die Sortierung 1x funktioniert. Man muss die mitgegebenen Variablen anpassen:

```auto
{% block element_sidebar_filter %}
    {# Use values from cms data if context is a cmsPage, otherwise `listing` and `sidebar` must be set manually #}
    {% if cmsPage is defined %}
        {% set config = element.fieldConfig.elements %}
        {% set slot = cmsPage.getFirstElementOfType('product-listing') %}
        {% set listing = slot.data.listing %}
        {% set sidebar = block.sectionPosition == 'sidebar' %}
    {% endif %}

    {% if listing.aggregations.elements|length > 0 %}
        <div class="cms-element-sidebar-filter">
            {% block element_product_listing_filter_button %}

            {% endblock %}

            {% block element_sidebar_filter_panel %}
                <div
                    id="filter-panel-wrapper"
                    class="filter-panel-wrapper"
                    data-off-canvas-filter-content="true"
                >
                    {% sw_include '@Storefront/storefront/component/sorting.html.twig' with {
                        current: listing.sorting,
                        sortings: listing.availableSortings
                    } %}
                    {% sw_include '@Storefront/storefront/component/listing/filter-panel.html.twig' with {
                        listing: listing,
                        sidebar: sidebar
                    } %}
                </div>
            {% endblock %}
        </div>
    {% endif %}
{% endblock %}

```

Das Problem ist sie funktioniert halt nur 1x. Wenn das Listing dann neugeladen ist geht scheinbar die Verbindung zwischen dem select und dem aktuellen Listing verloren. Ein zweites mal sortieren entfernt den query param aus der URL und zeigt die Standardsortierung.

---

<div class="post-metadata">

### Author: ![Makrele](https://avatars.discourse-cdn.com/v4/letter/m/96bed5/32.png) [@Makrele](https://forum.shopware.com/u/Makrele)
#### Post date: [24. Oktober 2024 um 11:46 UTC](https://forum.shopware.com/t/sortierung-filter-in-gleicher-template-datei-ausgeben/93333/8 "2024-10-24T11:46:03Z")

</div>

Ich habe es zum laufen gebracht. Nachdem man die übergebenen Variablen anpasst muss man noch das listing-sorting Plugin überschreiben um das Abmelden der Events zu verhindern:

```auto
/* custom/plugins/MyTheme/src/Resources/app/storefront/src/main.js */
const PluginManager = window.PluginManager;
PluginManager.override('ListingSorting', () => import('./plugins/listing-sorting.plugin'), '[data-listing-sorting]');

```

```auto
/* custom/plugins/MyTheme/src/Resources/app/storefront/src/plugins/listing-sorting.plugin.js */
import ListingSortingPlugin from 'src/plugin/listing/listing-sorting.plugin';

export default class CustomListingSortingPlugin extends ListingSortingPlugin {

    init() {
        super.init();
    }

    afterContentChange() {
        // Hier wird normalerweise das event abgemeldet wenn sich das listing ändert.
    }
}

```

---

<div class="post-metadata">

### Author: ![florian.kalango](https://avatars.discourse-cdn.com/v4/letter/f/f1d935/32.png) [@florian.kalango](https://forum.shopware.com/u/florian.kalango)
#### Post date: [6. November 2024 um 11:33 UTC](https://forum.shopware.com/t/sortierung-filter-in-gleicher-template-datei-ausgeben/93333/9 "2024-11-06T11:33:03Z")

</div>

Es funktioniert auch ohne Java Script Anpassungen.  
Dank einem Tipp konnte ich es so lösen:  
Die Datei „component/product/listing.html.twig“ wird angepasst.  
Beide Elemente Filter und Sortierung werden ganz oben im {% block product\_listing %} eingefügt.  
Dafür wird der Block „element\_product\_listing\_pagination\_nav\_actions“ geleert.

```auto
{% sw_extends '@Storefront/storefront/component/product/listing.html.twig' %}

{% block product_listing %}
    <div class="cms-element-product-listing-actions row justify-content-between">
        <div class="col-md-auto filter-col">
            {% sw_include '@Storefront/storefront/element/cms-element-sidebar-filter.html.twig' with {
                listing: page.listing,
                sidebar: sidebar
            } %}
        </div>
        <div class="col-md-auto sorting-col">
            {% block element_product_listing_sorting %}
                {% sw_include '@Storefront/storefront/component/sorting.html.twig' with {
                    current: searchResult.sorting,
                    sortings: searchResult.availableSortings
                } %}
            {% endblock %}
        </div>
    </div>
    {{ parent() }}
    {% block element_product_listing_pagination_nav_actions %}{% endblock %}

{% endblock %}

```

---

<div class="post-metadata">

### Author: ![Makrele](https://avatars.discourse-cdn.com/v4/letter/m/96bed5/32.png) [@Makrele](https://forum.shopware.com/u/Makrele)
#### Post date: [6. November 2024 um 15:09 UTC](https://forum.shopware.com/t/sortierung-filter-in-gleicher-template-datei-ausgeben/93333/10 "2024-11-06T15:09:12Z")

</div>

Der Grund warum es bei dir ohne das Überschreiben des JavaScripts funktioniert ist, dass dein Sorting weiterhin im Templatebereich des Listings ist. Dieser wird beim Ändern des Sortings neugeladen, weshalb es auch richtig und wichtig ist, dass die Events ordentlich abgemeldet werden. Zieht man das Sorting aber komplett aus dem Listing raus muss man das JS anfassen. Gut erkennbar daran, dass du weiterhin `searchResult.sorting` übergibst und nicht `listing.sorting`.

---

<div class="post-metadata">

### Author: ![florian.kalango](https://avatars.discourse-cdn.com/v4/letter/f/f1d935/32.png) [@florian.kalango](https://forum.shopware.com/u/florian.kalango)
#### Post date: [10. März 2025 um 09:09 UTC](https://forum.shopware.com/t/sortierung-filter-in-gleicher-template-datei-ausgeben/93333/11 "2025-03-10T09:09:48Z")

</div>

Du hast Recht.  
Auch bei meinem Ansatz, mit dem ich weiterhin im Templatebereich des Listings bleibe funktioniert das Sortieren nur 1x.  
Aber dank Deiner Anleitung läuft es auch bei mir.  
Danke sehr!

---

<div class="post-metadata">

### Author: ![Marc\_E](https://avatars.discourse-cdn.com/v4/letter/m/3e96dc/32.png) [@Marc\_E](https://forum.shopware.com/u/Marc_E)
#### Post date: [17. März 2025 um 08:46 UTC](https://forum.shopware.com/t/sortierung-filter-in-gleicher-template-datei-ausgeben/93333/12 "2025-03-17T08:46:26Z")

</div>

Hallo, habe ich es richtig verstanden, dass damit die Sortierung und der Filter in einem Button stecken (Mobile Version) bzw. in einer Reihe (Desktop Version)?

---

<div class="post-metadata">

### Author: ![area-net-gmbh](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/area-net-gmbh/32/21995_2.png) [@area-net-gmbh](https://forum.shopware.com/u/area-net-gmbh)
#### Post date: [17. März 2025 um 09:35 UTC](https://forum.shopware.com/t/sortierung-filter-in-gleicher-template-datei-ausgeben/93333/13 "2025-03-17T09:35:58Z")

</div>

Wir haben in unserem Theme die _@Storefront/storefront/element/cms-element-sidebar-filter.html.twig_ angepasst:

```auto
{% block element_sidebar_filter %}
    <div class="row aloha-filter-sorting">
        <div class="col-lg-10 col-md-12">
            {{ parent() }}
        </div>
        <div class="col-lg-2 col-md-12 mt-3 mt-lg-0">
            {% set slot = cmsPage.getFirstElementOfType('product-listing') %}

            {% if slot and not listing %}
                {% set listing = slot.data.listing %}
            {% endif %}

            {% sw_include '@Storefront/storefront/component/sorting.html.twig' with {
                current: listing.sorting,
                sortings: listing.availableSortings
            } %}
        </div>
    </div>
{% endblock %}

```

Dann muss das ListingPlugin noch überschrieben werden:

```auto
window.PluginManager.override('ListingSorting', ..);

```

```auto
import ListingSortingPlugin from 'src/plugin/listing/listing-sorting.plugin';
export default class AnListingSortingPlugin extends ListingSortingPlugin {

    afterContentChange() {
        if(!this.options.showInFilter){
            this.listing.deregisterFilter(this);
        }
    }
}

```

Ergebnis - funktioniert auch nach dem Nachladen der Liste.

 ![Demo](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/3X/c/2/c2c2b557a6726f83a116c2bba6830db9d5b06f6f.png)

---

<div class="post-metadata">

### Author: ![cab](https://avatars.discourse-cdn.com/v4/letter/c/c5a1d2/32.png) [@cab](https://forum.shopware.com/u/cab)
#### Post date: [16. Mai 2025 um 12:12 UTC](https://forum.shopware.com/t/sortierung-filter-in-gleicher-template-datei-ausgeben/93333/14 "2025-05-16T12:12:06Z")

</div>

Hi there,if its not bothering to You,could You write step by step what You did.Thank You

---

<div class="post-metadata">

### Author: ![Muehle](https://avatars.discourse-cdn.com/v4/letter/m/65b543/32.png) [@Muehle](https://forum.shopware.com/u/Muehle)
#### Post date: [13. Oktober 2025 um 10:21 UTC](https://forum.shopware.com/t/sortierung-filter-in-gleicher-template-datei-ausgeben/93333/15 "2025-10-13T10:21:10Z")

</div>

Ich würde das Thema auch gerne nochmal aufgreifen. Bei mir funktioniert es noch nicht bzw. es werden keine Inhalte geladen.

@area-net-gmbh Ich habe versucht Deiner Anweisung zu folgen.

**Schritt 1:** Ich habe die _@Storefront/storefront/element/cms-element-sidebar-filter.html.twig_ wie von Dir beschrieben angepasst. Somit ist die Sortierung in der selben Zeile wie der Filter sichtbar:

 ![image](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/3X/e/8/e871f8c65a11c0a9ecc814d56506c285d57096a6.png)

**Schritt 2:** Ich habe ein eigenes Plugin (`CustomFilterSort`) erstellt, um das `$ListingSorting$`-Plugin zu überschreiben und die `$afterContentChange()$`-Methode anzupassen.

**\custom\plugins\CustomFilterSort\src\Resources\app\storefront\src\an-listing-sorting.plugin.js**

```javascript
import ListingSortingPlugin from 'src/plugin/listing/listing-sorting.plugin';

export default class AnListingSortingPlugin extends ListingSortingPlugin {

    afterContentChange() {
        if (!this.options.showInFilter) {
            this.listing.deregisterFilter(this);
        }
        super.afterContentChange();
    }
}

```

**\custom\plugins\CustomFilterSort\src\Resources\app\storefront\src\main.js**

```javascript
import AnListingSortingPlugin from './an-listing-sorting.plugin';

const PluginManager = window.PluginManager;

if (PluginManager) {
    PluginManager.override('ListingSorting', AnListingSortingPlugin);
}

```

**\custom\plugins\CustomFilterSort\src\CustomFilterSort.php**

```php
<?php declare(strict_types=1);

namespace CustomFilterSort;

use Shopware\Core\Framework\Plugin;

class CustomFilterSort extends Plugin
{
}

```

**\custom\plugins\CustomFilterSort\compiser.json**

```javascript
{
    "name": "custom/custom-filter-sort",
    "description": "Custom plugin for filter and sort adjustments.",
    "type": "shopware-platform-plugin",
    "autoload": {
        "psr-4": {
            "CustomFilterSort\\": "src/"
        }
    },
    "extra": {
        "shopware-plugin-class": "CustomFilterSort\\CustomFilterSort",
        "label": {
            "en-GB": "Custom Filter Sort",
            "de-DE": "Eigene Filter-Sortierung"
        }
    }
}

```

Wäre für jede Hilfe sehr dankbar!

---

<div class="post-metadata">

### Author: ![cab](https://avatars.discourse-cdn.com/v4/letter/c/c5a1d2/32.png) [@cab](https://forum.shopware.com/u/cab)
#### Post date: [13. Januar 2026 um 14:12 UTC](https://forum.shopware.com/t/sortierung-filter-in-gleicher-template-datei-ausgeben/93333/16 "2026-01-13T14:12:53Z")

</div>

there are plugin “sorting inside filter” for one euro monthly,works perfect with small css adjustment,both for mobile and desktop version