2 minutes May 23, 2025

Wie scrollt man beim Filterwechsel in Shopware nach oben?

Wenn Nutzer in Shopware Filter anwenden, scrollt die Seite nicht automatisch nach oben. Dies kann zu Verwirrung führen, da Nutzer möglicherweise nicht bemerken, dass sich die gefilterten Ergebnisse geändert haben.

Dieser Artikel bietet eine einfache JavaScript-Lösung zur Verbesserung der Benutzerfreundlichkeit, indem sichergestellt wird, dass die Seite beim Anwenden von Filtern nach oben scrollt.

Problem: Kein automatisches Scrollen beim Filterwechsel

Wenn Nutzer in Shopware Filter anwenden, scrollt die Seite nicht automatisch nach oben. Dies kann zu Verwirrung führen, da Nutzer die aktualisierten Ergebnisse möglicherweise nicht sofort bemerken, insbesondere auf langen Produktlistenseiten.

Für ein reibungsloses Einkaufserlebnis ist eine klare Sichtbarkeit der Änderungen erforderlich, damit Nutzer nicht manuell scrollen müssen.

Ohne automatisches Scrollen könnten Benutzer annehmen, dass die Filter nicht richtig funktionieren, was zu Frustration und einem schlechten Browser-Erlebnis führt.

Lösung: JavaScript Scroll Fix

Um das Benutzererlebnis zu verbessern, implementieren wir eine JavaScript-basierte Auto-Scroll-Lösung, die sicherstellt, dass Benutzer nach dem Anwenden von Filtern immer sofort aktualisierte Ergebnisse sehen.

So funktioniert es:

Das Skript überwacht aktiv die Benutzerinteraktionen im Filterbereich und löst ein automatisches Scrollen nach oben aus, wenn:

Ein Benutzer ändert eine Filteroption (Texteingabe oder Textbereich).
Ein numerisches Eingabefeld verliert den Fokus und bestätigt eine Auswahl.
Im Abschnitt „Aktive Filter“ wird auf eine Schaltfläche geklickt.

Diese Echtzeit-Scroll-Anpassung verhindert, dass Benutzer aktualisierte Produktlisten verpassen, reduziert Verwirrung und verbessert die Navigation. Das Ergebnis ist ein reibungsloseres und frustfreieres Einkaufserlebnis in Ihrem Shopware-Shop.

dokumentieren.Ereignislistener hinzufügen(„DOMContentLoaded“, ()=>{
    // Klassenselektoren definieren
    Konstante FilterPanelClass=".filter-panel";
    Konstante filterItemClass=„.filter-panel-item“;
    Konstante aktiveFilterContainerKlasse=„.filter-panel-active-container“;
 
    // Elemente auswählen
    Konstante FilterPanel=dokumentieren.Abfrageselektor(FilterPanelClass);
    Konstante aktiverFilterContainer=dokumentieren.Abfrageselektor(aktiveFilterContainerKlasse);
 
    Wenn (!FilterPanel) zurückkehren; // Ausführung stoppen, wenn kein Filterfeld vorhanden ist
 
    // Sanftes Scrollen nach oben
    Konstante Nach oben scrollen=()=>{
        Fenster.scrollenZu({ Spitze:0, Verhalten:"glatt" });
    };
 
    // Scrollen, wenn sich Eingaben (außer Zahleneingaben), Auswahlen oder Textbereiche ändern
    FilterPanel.Ereignislistener hinzufügen("Eingang", (Ereignis)=>{
        Wenn (Ereignis.Ziel.am nächsten(filterItemClass)&&
            Ereignis.Ziel.Streichhölzer("Eingabe: nicht ([Typ = 'Zahl']), Auswahl, Textbereich")) {
            Nach oben scrollen();
        }
    });
 
    // Scrollen, wenn eine Zahleneingabe den Fokus verliert
    Filterpanel.Ereignislistener hinzufügen("verwischen", (Ereignis)=>{
        Wenn (Ereignis.Ziel.am nächsten(filterItemClass)&&
            Ereignis.Ziel.Streichhölzer("Eingabe[Typ='Nummer']")) {
            Nach oben scrollen();
        }
    }, WAHR);
 
    // Scrollen, wenn auf eine Schaltfläche im aktiven Filterabschnitt geklickt wird
    aktiverFilterContainer?.Ereignislistener hinzufügen("klicken", (Ereignis)=>{
        Wenn (Ereignis.Ziel.Streichhölzer("Schaltfläche, [Rolle='Schaltfläche']")) {
            Nach oben scrollen();
        }
    });
});

dokumentieren.Ereignislistener hinzufügen(„DOMContentLoaded“, ()=>{

// Klassenselektoren definieren

Konstante FilterPanelClass=".filter-panel";

Konstante filterItemClass=„.filter-panel-item“;

Konstante aktiveFilterContainerKlasse=„.filter-panel-active-container“;

// Elemente auswählen

Konstante FilterPanel=dokumentieren.Abfrageselektor(FilterPanelClass);

Konstante aktiverFilterContainer=dokumentieren.Abfrageselektor(aktiveFilterContainerKlasse);

Wenn (!FilterPanel) zurückkehren; // Ausführung stoppen, wenn kein Filterfeld vorhanden ist

// Sanftes Scrollen nach oben

Konstante Nach oben scrollen=()=>{

Fenster.scrollenZu({ Spitze:0, Verhalten:"glatt" });

};

// Scrollen, wenn sich Eingaben (außer Zahleneingaben), Auswahlen oder Textbereiche ändern

FilterPanel.Ereignislistener hinzufügen("Eingang", (Ereignis)=>{

Wenn (Ereignis.Ziel.am nächsten(filterItemClass)&&

Ereignis.Ziel.Streichhölzer("Eingabe: nicht ([Typ = 'Zahl']), Auswahl, Textbereich")) {

Nach oben scrollen();

}

});

// Scrollen, wenn eine Zahleneingabe den Fokus verliert

Filterpanel.Ereignislistener hinzufügen("verwischen", (Ereignis)=>{

Wenn (Ereignis.Ziel.am nächsten(filterItemClass)&&

Ereignis.Ziel.Streichhölzer("Eingabe[Typ='Nummer']")) {

Nach oben scrollen();

}

}, WAHR);

// Scrollen, wenn auf eine Schaltfläche im aktiven Filterabschnitt geklickt wird

aktiverFilterContainer?.Ereignislistener hinzufügen("klicken", (Ereignis)=>{

Wenn (Ereignis.Ziel.Streichhölzer("Schaltfläche, [Rolle='Schaltfläche']")) {

Nach oben scrollen();

}

});

Abschluss

Die Implementierung dieses Skripts verbessert die Benutzerfreundlichkeit, indem beim Anwenden von Filtern automatisch nach oben gescrollt wird. So können Benutzer aktualisierte Ergebnisse sofort sehen, ohne manuell scrollen zu müssen. Diese einfache, aber effektive Lösung verbessert die Navigation und Benutzerfreundlichkeit in Shopware-Shops. Für nahtlose Shopware-Erweiterungen und Expertenlösungen:Kontakt 2Hats Logic Heute!

Recent help desk articles

Grüße! Ich bin Aneesh Sreedharan, CEO von 2Hats Logic Solutions. Bei 2Hats Logic Solutions widmen wir uns der Bereitstellung von technischem Fachwissen und der Lösung Ihrer Probleme in der Welt der Technologie. Unsere Blog-Seite dient als Ressource, in der wir Einblicke und Erfahrungen teilen und wertvolle Perspektiven auf Ihre Fragen bieten.

Aneesh Sreedharan

Gründer & CEO, 2Hats Logic Solutions

Abonnieren Sie unseren Newsletter

Wie scrollt man beim Filterwechsel in Shopware nach oben?

Problem: Kein automatisches Scrollen beim Filterwechsel

Lösung: JavaScript Scroll Fix

So funktioniert es:

Recent help desk articles

Bleiben Sie auf dem Laufenden!