Kategorien und Preisfilter nach Sucheingabe ausgeklappt (aufgefächert) anzeigen

Guten Tag,

ich möchte die Kategorien und den Preisfilter nach einer Sucheingabe ausgeklappt anzeigen. Dafür gibt es wahrscheinlich auch PlugIns. Ich
möchte das aber lieber ohne Plugins umsetzen.

Wahrscheinlich muss eine Datei unter /frontend/listing/actions angepasst werden. Hat jemand eine Idee? Danke

Verstehe die Logik nicht so ganz - Man sucht mit der Suche nach einen Artikel und gelangt dann auf die Such Ergebnis Seite.

Und dann sollen Kategorie+Preisfilter immer ausgeklappt sein? Oder wie meinst du das genau?

Ja, genau so meine ich das.  Wenn der Kunde nach der Suche 30.000 Artikel angezeigt bekommt, macht eine Filterung Sinn.
Der Preis- und Kategoriefilter sind am wichtigsten, deshalb sollen diese immer ausgeklappt sein.

Qucik & Diry über jQury die collapse class verpassen.

$('.is--ctl-search .sidebar-filter .filter--facet-container .facet--category, .is--ctl-search .sidebar-filter .filter--facet-container .facet--price').addClass('is--collapsed');

 

@Shopwareianer 

Super danke! Funktioniert. Allerdings bekomme ich den code nicht in mein Theme eingebunden. Es kommt im backend immer ein Fehler bei den Themes. 

Habe es nach dieser Anleitung versucht. Klappt aber leider nicht:

https://developers.shopware.com/designers-guide/css-and-js-files-usage/?&_ga=2.84504153.1343323239.1522908467-1649833947.1518021943&_gac=1.153598410.1519831430.Cj0KCQiAw9nUBRCTARIsAG11eifE0zTzL0GVQme-EmRqBaRs-nSQxBJ0XSNtK9WuOGDz-zqOLFvp56QaAhhOEALw_wcB#add-javascript-files

 

Warum soll es nach der Anleitung nicht klappen? Machs ordentlich. Welcher Fehler kommt denn?

okay, da kommt meine lieblings Fehlermeldung (500 - Internal Server Error):

Ich habe in dem eigenen Theme unter /themes/Frontend/MEINTHEME/Theme.php folgendes hinzugefügt:

protected $javascript = [
    'src/js/Filter-ausgeklappt.js'
];

Dann habe ich eine Datei unter Frontend/MEINTHEME/frontend/_public/src/js erstellt:

Name: Filter-ausgeklappt.js

Inhalt:

$('.is--ctl-search .sidebar-filter .filter--facet-container .facet--category, .is--ctl-search .sidebar-filter .filter--facet-container .facet--price').addClass('is--collapsed');

 

 

 

 

 

Schau mal in die Dev ( Network ) Console vom Chrome oder Firefox, was der fürn Fehler schmeißt.

Request Method: GET
Status Code: 500 Internal Server Error
Remote Address: 37.228...
Referrer Policy: no-referrer-when-downgrade

Provisional headers are shown

Das sagt jetzt auch nicht viel aus.

Ne, nicht viel. Arbeite das mal durch: https://community.shopware.com/Fehlermeldungen-in-Shopware-debuggen_detail_1880.html

 

ok, ich habs nun. Hatte die Theme.php mit notepad bearbeitet. Das zerschießt scheinbar die Datei und macht diese unbrauchbar. Das war mir vorher nicht bewusst.

Ich habe dafür nun den kostenlosen Proton PHP Editor genommen. Jetzt funktioniert es  Smile

Moin,

ich hoffe es ist OK, wenn ich den alten Thread hier nochmal hochhole und mich mit einer ähnlichen Frage anschließe:

Momentan nutze ich folgenden Code, um die Filter-Facets nach dem Laden der Seite direkt offen zu starten:

$('.listing--sidebar .sidebar-filter .filter--container .filter-panel').addClass('is--collapsed');

Allerdings schließen sich diese direkt wieder, sobald man irgendwo auf die Seite klickt. Lässt sich das ebenfalls via js unterbinden? Die Facets sollen wirklich nur schließen, wenn man auf den Pfeil klickt.

@han schrieb:

Moin,

ich hoffe es ist OK, wenn ich den alten Thread hier nochmal hochhole und mich mit einer ähnlichen Frage anschließe:

Momentan nutze ich folgenden Code, um die Filter-Facets nach dem Laden der Seite direkt offen zu starten:

$(‚.listing–sidebar .sidebar-filter .filter–container .filter-panel‘).addClass(‚is–collapsed‘);

Allerdings schließen sich diese direkt wieder, sobald man irgendwo auf die Seite klickt. Lässt sich das ebenfalls via js unterbinden? Die Facets sollen wirklich nur schließen, wenn man auf den Pfeil klickt.

Ich stehe vor dem gleichen Problem und vermute, dass es mit der Select Box zusammenhängt. Man müsste also irgendwie die Stelle finden, an der die Select Boxen für die Filter generiert werden und da den Typ von select auf irgendwas anderes setzen (evtl. Tabelle o.ä. ?). 
Nur leider finde ich die besagte Stelle nicht.  

Falls immer noch danach gesucht wird:

Unter “Responsive\frontend_public\src\js” finden sich die Datein “jquery.listing-actions.js” und “jquery.filter-component.js”. 
Dort gibt es zwei Methoden die überschrieben werden müssen: 

  1. “toggleCollapse” (in jquery.listing-actions.js)

  2. “onBodyClick” (in jquery.filter-component.js)
    Wenn man jetzt noch den jeweiligen Klassen per ‘addClass()’ Methode die ‘is–collapsed’ Klasse hinzufügt müssten die Filter immer ausgeklappt angezeigt werden und je nachdem wie man die ‘toggleCollapse’ Methode überschreibt kann man das Schließen der Filter komplett rausnehmen oder entsprechend anpassen wie man es haben möchte.

1 Like

Ich ergänze das ganze mal entsprechend da @BjarneL‍ so freundlich war mir via DM genauere Instruktionen zu geben:

$.overridePlugin('swFilterComponent', {
    toggleCollapse: function() {
    }
});

in die “jquery.filter-component.js” im Child-Theme Ordner unter /_public/src/js schreiben bzw. diese vorher anlegen.

$.overridePlugin('swListingActions', {
    onBodyClick: function (event) {
    }
});

…kommt dann in die “jquery.listing-actions.js” im selben Ordner.

Danach müssen die entsprechenden Dateien in der Theme.php vom jeweiligen Theme hinterlegt werden. Bei mir sieht das entsprechend so aus:

protected $javascript = array(
    'src/js/jquery.filter-component.js', 'src/js/jquery.listing-actions.js'
);

Cache leeren, Files kompilieren und das wars.

Damit das Filterset immer direkt geöffnet angezeigt wird, noch per JS folgendes nachtragen:

$('.listing--sidebar .sidebar-filter .filter--container .filter-panel').addClass('is--collapsed');

Ggf. dann per CSS folgendes nachtragen um die Dropdown-Pfeile verschwinden zu lassen und den Cursor auf default zu setzen wenn man über den jeweiligen Filter-Title hovert:

.filter-panel--icon {
    display: none;
}

.filter-panel--title {
    cursor: default;
}

 

Ich würde aber empfehlen, das ganze irgendwie in einem Plugin zu verpacken, falls mal eine der Funktionen erweitert/verändert wird, dann kann man einfach per click das ganze aktivieren/deaktivieren und man ist quasi auf der sicheren Seite bei updates. 

Liebe Grüße

Bjarne

1 Like

@BjarneL‍ Das wär dann der nächste Schritt. Wobei ich ja eh alles ins Childtheme gesetzt habe, insofern dürfte sich daran ja nicht wirklich was ändern, oder?