Sortierung / Filter in gleicher Template Datei ausgeben

Shopware 6 (German)
,
1

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

2

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

{% 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 %}
3

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

4

Nein, leider noch nicht :confused:

5

Ich ahnte es. :sweat_smile:
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.

6

Gerne :slight_smile: , 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.

1 „Gefällt mir“
7

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

{% 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.

8

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:

/* 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]');

/* 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.
    }
}
9

Es funktioniert auch ohne Java Script Anpassungen.
Dank einem Tipp der Shopware Agentur hübner&berger 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.

{% 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 %}
10

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.