EN
… und plötzlich ist alles anders
Wir haben uns für den neuen Filter eine komplett neue Struktur überlegt, weshalb wir nicht auf den alten Filter aufbauen konnten. Daher seid bitte nicht verwirrt, wenn euch ab sofort beide Versionen des Filters zur Verfügung stehen. Wir werden allerdings nach und nach den alten Filter aus dem System entfernen und bitten euch den alten Filter auf eurer Webseite zeitnah durch den neuen zu ersetzen. Wir werden dies natürlich nochmal separat ankündigen und euch genügend Zeit dafür geben.
Die Verwaltung im Backend hat sich nun grundlegend geändert und ist somit wesentlich innovativer & flexibler – auch die Ausgabe des Filters hat ein ordentliches Make-up bekommen. Die einzelnen Boxen im Filter passen sich jetzt wesentlich besser an die verfügbare Größe an, je nachdem ob eine Sidebar aktiviert ist oder nicht und wie groß der Browser ist.
Wo finde ich den neuen Filter und wie benutze ich diesen?
Nach dem Update auf die Version 1.6.0 (Release: 12.04.2017) steht euch der neue Filter als eigener Menüpunkt (Post Type) im Backend zur Verfügung. Unter diesem Menüpunkt könnt ihr euch einen oder mehrere neue Filter erstellen. Alle Einstellungen trefft Ihr zukünftig auf dieser Seite. Die vorherigen Einstellungen unter Optionen » Produkte » Filter fallen weg und werden nicht mehr für den neuen Filter benötigt.
Das Prinzip des neuen Filters ist relativ einfach – ihr erstellt einen neuen Filter mit den gewünschten Einstellungen und Feldern und habt somit auch direkt die Zielseite für die Ergebnisse – es ist also keine seperate Seite mit dem Template „Filter“ mehr notwendig. Die URL dafür könnt Ihr WordPress-typisch unterhalb des Titels direkt anpassen (Permalink). Der Slug /filter/ vor der URL ist zum aktuellen Zeitpunkt nicht veränderbar. Hierzu wird es aber zeitnah eine Möglichkeit geben. Nun genug zur Theorie und Funktion. Jetzt erkläre ich euch die einzelnen Einstellungen für den neuen Filter:
Grundlegende Einstellungen
Filter auf Zielseite ausgeben: Mit dieser Einstellung gebt Ihr den Filter auch auf der Zielseite aus (wenn AJAX deaktiviert ist).
AJAX: Mit dieser Einstellung aktiviert ihr AJAX für den Filter. Die Ergebnisse werden also nach Klick auf den Button sofort unterhalb des Filters angezeigt, ohne das die Seite neu geladen wird. Das gilt auch für Filter-Elemente in der Sidebar.
Button Beschriftung: Dieser Punkt legt fest wie der „Filter“-Button beschriftet werden soll.
Elemente
Nachdem die grundlegenden Einstellungen passen, könnt ihr die einzelnen Elemente in den Filter einfügen. Diese Ansicht wird euch an den Page Builder erinnern und enthält 4 grundlegende Elemente:
Preis, Bewertung, Taxonomie und eigenes Feld.
Auch hier ist die Vorgehensweise sehr einfach. Ihr fügt das gewünschte Element ein und trefft die jeweiligen Einstellungen dafür, diese erkläre ich euch gerne genauer:
Preis
Beschriftung: Welchen Titel soll der Preis im Filter haben?
Beschreibung: Biete dem Benutzer eine Beschreibung zu diesem Feld an.
Feld verstecken: Soll dieses Feld im Filter versteckt werden aber dennoch die Werte in die Filterung inkludiert werden? Dies ist sinnvoll, wenn man einen minimalen und maximalen Preis vorgeben möchte, den der Besucher nicht anpassen kann.
Minimaler Wert: Normalerweise berechnet sich der Minimale Wert anhand der aktuell angelegten Produkte. Wenn du diesen Wert anpassen willst, kannst du dies hier tun.
Maximaler Wert: Normalerweise berechnet sich der Maximale Wert anhand der aktuell angelegten Produkte. Wenn du diesen Wert anpassen willst, kannst du dies hier tun.
Bewertung
Wie im alten Filter auch, greift dieses Feld auf die Sternebewertungen zurück – nicht auf die eigene Bewertung!
Beschriftung: Welchen Titel soll die Bewertung im Filter haben?
Beschreibung: Biete dem Benutzer eine Beschreibung zu diesem Feld an.
Taxonomie
Beschriftung: Welchen Titel soll diese Taxonomie im Filter haben?
Beschreibung: Biete dem Benutzer eine Beschreibung zu diesem Feld an.
Feld verstecken: Soll dieses Feld im Filter versteckt werden aber dennoch die Werte in die Filterung inkludiert werden? Dies ist sinnvoll, wenn man dem Benutzer eine bestimmte Taxonomie (z.B. Marke oder Kategorie) vorgeben möchte. Somit kann man den Filter gezielt für einen bestimmten Bereich nutzen.
Taxonomie: Bitte wähle hier die zu verwendende Taxonomie aus.
Standard Wert: Nach Auswahl der Taxonomie kann hier ein Standard Wert für den Filter bestimmt werden.
Platzhalter für erstes Feld: Bestimmte hier den ersten Wert des Dropdown-Feldes. (Als Fallback gilt: „Name der Taxonomie“ wählen, z.B. „Marke wählen“)
Eigenes Feld
Beschriftung: Welchen Titel soll diese Taxonomie im Filter haben?
Beschreibung: Biete dem Benutzer eine Beschreibung zu diesem Feld an.
Feld verstecken: Soll dieses Feld im Filter versteckt werden aber dennoch die Werte in die Filterung inkludiert werden? Dies ist sinnvoll, wenn man dem Benutzer ein bestimmtes Feld vordefinieren möchte, welches er nicht verändern kann.
Feld: Wähle hier das gewünschte Feld aus. Auch hier gilt, wie beim alten Filter: Auswahlfeld, Ja/Nein, Nummernfeld.
Standard Wert: Nach Auswahl des Feldes kann hier ein Standard Wert für den Filter bestimmt werden.
Einstellung des Designs
Was beim alten Filter unter Optionen » Produkte » Filter zu finden war, lässt sich nun hier speziell für jeden Filter konfigurieren. Folgende Einstellungen stehen euch zur Verfügung:
Sidebar: Sidebar Position auf der Zielseite des Filters (Keine, Links, Rechts)
Produktdarstellung: Darstellung der Produkte (Liste, Grid, Grid-Hover)
Produkte pro Seite: Wie viele Produkte sollten pro Seite angezeigt werden?
Sortierung: Sortierung der Produkte (Datum, Name, Preis, Bewertung, Kommentare (Erfahrungsberichte), Menü-Reihenfolge, Zufällig)
Reihenfolge: Reihenfolge der Ergebnisse (Absteigend (DESC), Aufsteigend (ASC))
Benutzer-Filter: Soll auf der Zielseite oberhalb der Ergebnisse der Benutzer-Filter angezeigt werden? Mit diesem Benutzer-Filter kann der Besucher die Reihenfolge & Produktdarstellung manuell anpassen.
Ausgabe des neuen Filters
Um den neuen Filter auszugeben, stehen euch 3 Möglichkeiten zur Verfügung: Widget für die Sidebar, Page Builder Element und ein Shortcode.
Widget
Ihr findet das neue Widget, wie alle anderen auch, unter Design » Widgets.
Das Widget trägt den Titel affiliatetheme.io » Filter (NEU).
Sobald Ihr das Widget platziert habt, könnt Ihr folgende Einstellungen treffen:
Titel: Titel für das Widget im Frontend.
Filter: Auswahl des zuvor angelegten Filters.
Anschließend wird der Filter an der gewünschten Position in der Sidebar-Area angezeigt.
Page Builder
Im Page Builder steht euch nun ein neues Feld zur Verfügung: Filter (NEU). Mit diesem Feld könnt Ihr den Filter auf eurer Seite platzieren, folgende Einstellungen sind hierfür wichtig:
Überschrift: Titel für den Filter im Frontend.
Filter: Auswahl des zuvor angelegten Filters.
Shortcode
Zusätzlich zum Widget und dem Page Builder – welche es auch schon beim alten Filter gab – bieten wir euch die Möglichkeit den Filter zusätzlich per Shortcode zu platzieren. Anhand dieser 3 Möglichkeiten könnt Ihr einen Filter wirklich überall ausgeben.
Der Shortcode ist sehr simpel und wird auch zu jedem angelegten Filter direkt angezeigt:
[at_filter id=““ in_sidebar=““ /]
Der Parameter id erwartet die ID des Filters. Der Parameter in_sidebar (true/false) sagt dem Filter ob er die Darstellung für eine Sidebar (Felder untereinander) oder die Darstellung für eine normale Seite (Felder nebeneinander) laden soll. Diesen Parameter nur auf true setzen wenn Ihr den Filter in der Sidebar (ohne unser Widget) platzieren wollt. Ansonsten entweder den Wert leer lassen oder false einsetzen.
Die neue Darstellung des Filters
Ein großes Problem war bisher die Darstellung der Filter-Boxen. Manche hatten nur 2 Einträge, andere 15; manche hatten eine Sidebar andere nicht. So kam es dazu, dass der Filter unterm Strich meistens sehr gequetscht wurde und er einfach nicht ansprechend dargestellt wurde.
Wir haben den entsprechenden CSS Code komplett neu geschrieben und können nun alle möglichen Variationen abdecken, sodass trotzdem alles gut aussieht und sich die Boxen entsprechend der Breite des Browsers anpassen.
Ein Beispiel: Ein Filter mit 8 Feldern wurde früher mit 4 Boxen nebeneinander dargestellt. Wenn nun noch die Sidebar (8/5) aktiv war, sah es extrem gequetscht aus (Bild 1). Oder wenn es nur 7 Felder waren, war immer ein Teil des Filters leer und es entstand eine unschöne Lücke (Bild 2). Bei dem neuen Filter passiert sowas nicht mehr. Die Lücken werden automatisch aufgefüllt und bei einer aktiven Sidebar und der Auflösung von >=1200px werden nur noch max. 3 Boxen nebeneinander dargestellt (Bild 3)
Beispiele des neuen Filters
In unserer Demo 01 haben wir mal ein paar Beispiele für euch hinterlegt.
- http://demo01.affiliatetheme.io/filter-ohne-sidebar/ – Zwei verschiedene Filter auf einer Fullwidth-Seite (über den Page Builder eingebaut).
- http://demo01.affiliatetheme.io/filter-mit-sidebar/ – Die gleichen 2 Filter wie oben, diesmal jedoch auf einer Seite mit einer Sidebar. Hier sieht man schön, dass sich die Blöcke anpassen.
- http://demo01.affiliatetheme.io/filter/filter-3/ – Und als Highlight noch den Filter mit der AJAX Funktion. D.h. sobald ihr den Filter anwendet, passt sich die Ausgabe darunter an, ohne dass die Seite neu geladen wird. Gleiches gilt für den Filter in der Sidebar.
Und so geht’s weiter:
Da das Thema Filter das mit Abstand meist gewünscht Feature beim Theme ist, werden wir in Zukunft natürlich auch vermehrt daran weiterarbeiten. Ihr dürft euch somit auf viele neue Funktionen freuen, wie z.B.:
- Anpassbarer Slug (/filter/)
- Feld für eigene Bewertungen
- Individuelles Eigenes Feld (um benutzerdefinierte Felder selbst anzugeben, unabhängig von ACF – nur für Profis)
- Filterung direkt nach Auswahl (mit AJAX) sowie direkte Anzeige verfügbarer Ergebnisse nach Auswahl eines Feldes
Sofern ihr auch noch Ideen oder Wünsche habt, schreibt uns diese doch einfach im Forum. 🙂
Und jetzt?
Ab in’s Backend und mit dem neuen Filter rumspielen! Aber bevor du gehst, freuen wir uns noch auf ein kleines Feedback: Wie findest du den neuen Filter? Hinterlasse uns doch mal ein kurzes Kommentar. 🙂
Kommentare
Julia Kadauke 13. April 2017 um 8:29
Das klingt ja wirklich toll, nur kann ich leider nicht auf die neueste Version aktualisieren. Da kommt dieser Fehler: PCLZIP_ERR_BAD_FORMAT (-10) : Unable to find End of Central Dir Record signature
Ich nutze das Theme derzeit lokal. Könnte es daran liegen?
André 13. April 2017 um 8:33
Komisch, kann man so adhoc auch nicht wirklich sagen, woran das Problem liegt. Bei Google findet man bei 10 Seiten 15 Antwortmöglichkeiten. ^^ Am besten das Theme entpacken und manuell in deinen Themes Ordner schieben. 🙂
Thomas Wagner 13. April 2017 um 10:00
Ich hab gleich den ersten Wunsch. Ihr nutzt ja AJAX. Kann der filter dann bei jeder Bedienung gleich ausgelöst werden? Dann sieht der Kunde sofort, was gefiltert wird.
André 13. April 2017 um 12:33
Siehe ganz unten, steht auf der Roadmap. 😉
Helo Schlothauer 13. April 2017 um 11:51
Tolle Arbeit! 🙂
Allerdings ist es bei mir egal, was ich bei Sortierung auswähle, es wird immer eine Sortierung nach Datum/Neuheiten ausgegeben.
André 13. April 2017 um 12:34
Danke 🙂 Schauen wir uns an, aber Support bitte über’s Forum – dann geht das auch nicht verloren. 😉
André 13. April 2017 um 18:16
Hey Helo,
haben nun einiges probiert aber können ein derartiges Problem nicht feststellen. Bitte mal mit einer genauen Anleitung im Forum melden. 🙂
Malte Preuß 19. April 2017 um 17:31
Hallo André,
habt ihr den Bug nun bereits nachstellen können? Ich habe das Problem auch. Sobald man den Benutzer-Filter nicht verwendet und eine Sortierung über das Filter Design festlegt, greift diese nicht.
André 19. April 2017 um 21:24
Bitte mal im Forum melden, samt genauerer Beschreibung, URL etc. Hier in den Comments geht es unter. 🙂
Robert 13. April 2017 um 12:25
Super! Dieses Update ist wirklich sehr gut. Vor allem die neue Darstellung gefällt mir sehr gut.
André 13. April 2017 um 13:59
Danke für die Blumen! 🙂
Marcel 13. April 2017 um 13:28
Leider habe ich keine Vergleichsmöglichkeiten, da ich den Filter zum ersten Mal einsetze. Aber das was ich sehe, begeistert mich schon jetzt. Den Schieberegler finde ich in meinem Fall allerdings etwas verwirrend. Es wird das Gegenteil von dem ausgegeben, was ich damit eigentlich erreichen will. Aber ich teste weiter 🙂
André 13. April 2017 um 13:53
Der Schieberegler kommt immer bei numerischen Feldern. Inwiefern macht er denn bei dir keinen Sinn, wenn du ja Zahlen als Wert verwendest? 🙂
Christian 19. April 2017 um 21:21
Sieht gut aus 🙂 Danke 🙂 Muss man sich etwas reinfinden, aber wenn man fertig ist 🙂
Markus 22. April 2017 um 12:10
Das mit dem AJAX ist eine coole Neuerung wenn man direkt auf der Seite filtert 🙂 Wobei ich es in der sidebar eher weniger Sinnvoll halte.
Wenn ich AJAX deaktiviere leitet der filter ja nach wie vor auf einen neue Seite um. Wie kann ich beeinflussen wie diese seite aussieht? Beim alten Filter konnte ich ja z.B. zwischen Hoover, y-table etc wählen.
Wie geht das bei dem neuen filter?
Danke 🙂
Christian 24. April 2017 um 10:31
Hi,
alle Layouteinstellungen des Filters triffst du, wenn du den Filter im Backend bearbeitest. (Rechts in der "Sidebar")
Wenn du was im Child-Theme anpassen willst, wäre "single-filter.php" die Datei, die du bearbeiten musst.
Chris 23. April 2017 um 22:00
RIchtig gut geworden… Die Leser und Kunden finden das auch richtig gut wie man auf der Heatmap sieht 🙂
André 24. April 2017 um 10:29
Das freut uns! :))
Marcel Wagner 2. Mai 2017 um 16:19
@ André
Mit dem Schieberegler hat es sich geklärt. Danke.
Allerdings habe ich noch eine Frage zu den Auswahlfeldern. In einigen seltenen Fällen werden nicht alle Produkte mit einem bestimmten Feld angezeigt. In einem Fall ist es genau umgekehrt. Da wird ein Produkt zu viel angezeigt, obwohl es dort nicht sein dürfte. Ich kann da kein bestimmtes Muster erkennen.
Cache habe ich geleert und nochmal direkt ins Produkt geschaut, ob dort vielleicht ein Feld zu viel oder zu wenig ausgewählt ist. Es sieht allerdings alles korrekt aus. Any thoughts?
Marcel Wagner 2. Mai 2017 um 16:32
Für das fehlende Produkt ist die Lösung ziemlich einfach: Wenn das Produkt keinen Preis hat, wird es nicht angezeigt. Wäre cool, wenn ihr das noch berücksichtigen könntet, da viele Produkte bereits in die DB aufgenommen werden, die noch von keinem Händler gelistet werden.
Bei dem Filter, wo ein Produkt zu viel ist, fällt mir noch keine Lösung ein.
André 2. Mai 2017 um 16:36
Bei sowas bitte mal im Forum melden, der Blog ist eigentlich nicht für Supportzwecke gedacht und um genau zu sehen / verstehen was nicht stimmt, bräuchten wir neben der URL auch einige Background Infos. 🙂
Matthias Fuchs 9. Mai 2017 um 18:32
Hallo Andre, Ich freue mich schon auf ein tolles Video von euch über das Thema Filter und ihre Möglichkeiten.
Ihr seid echt Spitze !
Selle 15. Oktober 2017 um 14:13
Tolle Feature, vielen Dank! Ich habe allerdings ein Problem. Habe die Taxonomie festgelegt. Aber der Preis Filter passt sich nicht automatisch der Taxonomie/Kategorie an. Stattdessen wird mir ein Preis von z.b. 44€ angezeigt obwohl das günstigste Produkt in der Taxonomie/Kategorie z.b. 129€ kostet.
André 16. Oktober 2017 um 9:59
Ja das ist noch eine offene Baustelle. Der Filter reagiert nicht auf die eigentliche Einstellung, das ist ein relativ komplexes Feld denn nicht nur der Preis sondern auch die anderen Einstellungen können ja anhand des Filters variieren. Das steht auf der ToDo. 🙂
Julia W 14. Januar 2018 um 21:11
Puh, ich muss sagen ich kam mit dem alten besser klar 0:). Zum Thema Quetschung der FIlterboxen ist es mit dem neuen schlechter geworden. Früher waren es 3 Boxen und der Regler drunter, jetzt sind 4 Boxen inkl. Regler nebeneinander, oder kann ich das irgendwie einstellen? Möp.
Vorschlag: Nicht nur Drag and Drop Antworten sondern mehrere Ankreuzmöglichkeiten innerhalb einer Taxonomie wären toll =D Geht das?
André 15. Januar 2018 um 7:41
Meld dich diesbzgl. mal im Forum, das kann man natürlich noch etwas via CSS anpassen – da kann ich dir was zu schreiben. 🙂
Was meinst du mit "Drag n Drop Antwort"?
Darius Kopka 15. Oktober 2018 um 19:39
Wie siehts aus mit der Sortierung der Ergebnisse? Nach dem gefiltert wurde möchte ich die Möglichkeit haben z.B. die Kameras nach Preis zu sortieren, oder nach Megapixel, oder nach etc. Absteigend oder Aufsteigend
Christian 16. Oktober 2018 um 14:17
Alle Sortierungsmöglichkeiten stehen dir zur Auswahl wenn du den Filter im Backend bearbeitest, auf der rechten Seite.
oezkan 22. Mai 2019 um 1:08
Hallo zusammen, was mir fehlt ist eine anleitung wie mann, es geht um schuhe einen Filter erstellen kann wo mann nach namen und größen und Damen oder herren oder kinder feltern kann.
Ich benutze affelinet als import.
kann ich eine genaue detailierte beschreibung bekommen, wie und wo kann er die marken fiden.
danke
André 22. Mai 2019 um 9:09
Hey oezkan, melde dich dafür bitte mal in unserem Forum, da können wir dir schneller helfen 🙂