Hallo zusammen,
das ist nun der offizielle Support Thread für das Plugin FilterDrop. Bitte alle Support-Anfragen innerhalb dieses Beitrags erstellen. So übersehen wir nämlich nicht eure Forenbeiträge, die aktuell etwas verstreut sind 
4 „Gefällt mir“
Anleitung FilterDrop
Mit unserem FilterDrop Plugin können Sie nun die Ceres-Standard-Filterdarstellung als benutzerfreundliches sowie platzsparendes Dropdown-Menü darstellen.
1. Einrichtung
Wir empfehlen Ihnen die nachfolgenden Einrichtungsschritte in einem inaktiven Plugin-Set durchzuführen.
- Installieren und aktivieren Sie das FilterDrop-Plugin.
- Klicken Sie in der Plugin-Set Einstellung auf
Prioritäten festlegenund legen Sie die Plugin-Position des FilterDrop-Plugins auf eine Position die höher als die des Ceres bzw. plentyShop LTS-Plugins, jedoch niedriger als dass des IO-Plugin (z.BCeres/plentyShop LTS = 997, FilterDrop = 998, IO = 999) ist. Speichern Sie Ihre Einstellung über den Klick auf das Disketten-Symbol. - Kehren Sie zum Plugin-Set zurück und stellen Sie dieses über den Klick auf das Disketten-Symbol bereit.
1.4 Zusätzlicher Einrichtungsschritt bei Verwendung des Shopbuilders
Bei Verwendung des Plentymarkets Shopbuilders ist ein weiterer Einrichtungsschritt notwendig, um die korrekte Darstellung der Filter im Shop sicherzustellen. So müssen bei jeder gemachten Anpassung innerhalb der Kategorienseite die Shopbuilder-Widgets über die Schaltfläche „Alle Inhalte neu generieren“ (s. Bild unterhalb, Markierung 1) neu generiert werden. Dieser Schritt muss auch bei einer Neuinstallation und ggf. bei jedem Update des Plugins durchgeführt werden.
2. Darstellungen
Das Plugin bietet Ihnen neben der klassischen Darstellung der Filteroptionen in einer Liste auch eine Raster-Darstellung sowie besondere Darstellungen mit Grafiken sowie Farbpunkten. Die Festlegung der gewünschten Darstellung erfolgt dabei im Plentymarkets-System unter dem Menüpunkt Einrichtung → Mandant → Global → Dienste → Facettensuche. Wählen Sie nun eine Facette aus der Liste aus, in der Sie die Filteroptionen in einer Raster-Darstellung anzeigen lassen wollen. Unter der Option CSS-Klasse können sie nun die gewünschte Darstellung festlegen, indem Sie dort folgendes hinterlegen:
1. XL-Darstellung
CSS-Klasse: grid-xl
2. Grafik/Logo-Darstellung:
CSS-Klasse: grid-img
Um den verschiedenen Werten Grafiken zuzuordnen, tragen Sie zuerst das Bildformat der Grafik in das Feld CSS-Klasse unter dem Tab Werte, davor einen entsprechenden Wert auswählen, im Tab Einstellungen ein (z.B png oder jpg). Danach benennen Sie die Grafik in die ID (Zahl) des Wertes um und laden es anschließend unter dem Tab Bilder hoch.
Beispiel: Beim Wert mit der ID 4, bei dem Sie ein PNG-Bild hinterlegen möchten, sollte die Grafik 4.png lauten.
3. Farbpunkte-Darstellung:
CSS-Klasse: grid-color
Der Hex-Codes (z.B #5b3a29) für die Farben hinterlegen Sie direkt unter dem Tab Werte, nachdem Sie einen entsprechenden Wert ausgewählt haben, unter Einstellungen → CSS-Klasse. Muster bzw. Farben können ebenfalls hinterlegt werden. Gehen Sie dabei wie in Punkt 2.2 beschrieben vor.
3. Anpassungen
Die Darstellung der Filter kann beliebig über einen sog. Konfigurations-Code angepasst werden, der in die Plugin-Konfiguration unter der gleichnamigen Bezeichnung eingefügt wird. Aktuell stehen Ihnen die in der Tabelle (3.2) unterhalb aufgeführten Konfigurationsmöglichkeiten zur Verfügung.
3.1 Konfiguration über den Editor
Ab der Version 4.0.1 wird das Plugin zusätzlich mit einem Editor ausgeliefert, mit dem Sie die Anpassungen direkt in Ihrem Webshop durchführen und einen Konfigurations-Code generieren können. Wie bereits eingangs erwähnt, empfehlen wir Ihnen die Konfiguration immer in einem inaktiven Plugin-Set durchzuführen.
- Um den Editor zu starten, müssen Sie zuerst in der Konfiguration des Plugins unter dem Punkt
Editor aktivierendie gleichnamige Option über die Checkbox aktivieren. - Öffnen Sie danach die Shopvorschau des Plugins und rufen Sie eine beliebige Kategorienseite auf, die bereits Facetten enthält. Sollten Sie den Shopbuilder nutzen, aktivieren Sie in der plentyShop LTS-Vorschau-Box bzw. über den Klick auf das Augen-Symbol links unten die Option
Widgets direkt rendern(Beachten Sie bitte unbedingt Punkt 1.4) Sollten Sie keinen Shopbuilder verwenden, können Sie diesen Schritt übergehen. - Nun geben Sie in die Adresszeile Ihres Browsers, nach der URL, folgenden Parameter ein:
?COEditor=FilterDrop. Die URL sollte dann z.B wie folgt lauten:https://www.plentydemo.de/kategorie/?COEditor=FilterDrop
Die Bedienung des Editors ist weitestgehend selbsterklärend. Über die verschiedenen Nummern- sowie Auswahlfelder können Sie die Anpassung beliebig ändern und diese live im Webshop betrachten. Sollten Sie mit Ihren Änderungen zufrieden sein, können Sie über einen Klick auf Konfiguration erzeugen den Konfigurations-Code generieren, den Sie dann in das gleichnamige Feld der Plugin-Konfiguration einfügen können (s. Punkt 3.3)
Der aktuelle Konfigurations-Code wird bei jedem Laden der Seite vom Editor ausgelesen. Somit können Sie Ihre Anpassung bequem im Nachhinein ändern, ohne die Einrichtung von vorne anfangen zu müssen.
3.2 Übersicht der Konfigurationsmöglichkeiten
Sollten Sie den Editor nicht nutzen wollen, finden Sie nachfolgend eine vollständige Liste aller Konfigurationsmöglichkeiten. Unterhalb der Tabellen finden Sie zudem eine Erklärung zu den verschiedenen Funktionen des FilterDrop-Plugins
Allgemeine Darstellung:
| Bereich | Konfigurationsname | Konfigurationswert |
|---|---|---|
| Container Innenabstand | filterDropWrapperSpacing |
0px |
| Filter in Reihe | filterDropColumns |
3 |
| Auswahl Außenabstand | filterDropOuterSpacing |
5px |
| Auswahl Innenabstand | filterDropInnerSpacing |
5px |
| Auswahl Höhe | filterDropHeight |
35px |
| Auswahl Schriftgröße | filterDropFontSize |
14px |
| Auswahl Schriftfarbe | filterDropFontColor |
#000000 |
| Auswahl Rahmendicke | filterDropBorderWidth |
1px |
| Auswahl Rahmenfarbe | filterDropBorderColor |
#bfbfbf |
| Auswahl Rahmenfarbe (Aktiv) | filterDropBorderColorActive |
#7f7f7f |
| Auswahl Abrundung | filterDropBorderRadius |
3px |
| Auswahl Hintergrund | filterDropBackground |
#FFFFFF |
| Auswahl Schlagschatten | filterDropBoxShadowYOffset |
15px |
| Auswahl Pfeilgröße | filterDropChevronDimensions |
20px |
Filterauswahl Darstellung:
| Bereich | Konfigurationsname | Konfigurationswert |
|---|---|---|
| Höhe Filter Optionen | filterDropOptionsWrapper |
185px |
| Auswahl Icon Größe | filterDropOptionsCheckDimensions |
17px |
| Filter Zähler Größe | filterDropOptionsBadgeDimensions |
22px |
| Filter Zähler Hintergrund | filterDropOptionsBadgeBackground |
#F5F5F5 |
| Filter Zähler Abrundung | filterDropOptionsBadgeBorderRadius |
3px |
| Filter Zähler Schriftgröße | filterDropOptionsBadgeFontSize |
11px |
| Filter Zähler Schriftfarbe | filterDropOptionsBadgeColor |
#9f9f9f |
| Filter Farbpunkt Größe | filterDropOptionsColorDotDimensions |
20px |
| Filter Abrundung | filterDropOptionsColorDotBorderRadius |
10px |
| Scrollleiste Spurfarbe | filterDropScrollbarTrackColor |
#f5f5f5 |
| Scrollleiste Dicke | filterDropScrollbarTrackWidth |
5px |
| Scrollbalken Farbe | filterDropScrollbarThumb |
#7a7a7a |
| Scrollbalken Abrundung | filterDropScrollbarThumbBorderRadius |
5px |
Raster Darstellung:
| Bereich | Konfigurationsname | Konfigurationswert |
|---|---|---|
| Optionen in Reihe | filterDropGridCount |
3 |
| Schriftgröße | filterDropGridFontSize |
11px |
| Zähler Außenabstand | filterDropGridBadgeOuterSpacing |
5px |
| Zähler Größe | filterDropGridBadgeDimensions |
22px |
| Zähler Schriftgröße | filterDropGridBadgeFontSize |
11px |
| Raster Rahmendicke | filterDropGridBorderWidth |
1px |
| Raster Rahmenfarbe | filterDropGridBorderColor |
#E5E5E5 |
| Farbpunkt Größe | filterDropGridColorDotDimensions |
30px |
| Farbpunkt Abrundung | filterDropGridColorDotBorderRadius |
15px |
| Grafik Innenabstand | filterDropGridImgInnerSpacing |
50px |
| Grafik Größe | filterDropGridImgPatternDimensions |
50px |
| XL Innenabstand | filterDropGridXLInnerSpacing |
25px |
| XL Schriftgröße | filterDropGridXLFontSize |
25px |
Preisfilter Darstellung:
| Bereich | Konfigurationsname | Konfigurationswert |
|---|---|---|
| Eingabefelder Abrundung | filterDropPriceInputBorderRadius |
3px |
| Schieberegler Spurdicke | filterDropPriceRangeTrackWidth |
3px |
| Schieberegler Abrundung | filterDropPriceRangeThumbBorderRadius |
25px |
| Schieberegler Primärfarbe | filterDropPriceRangePrimaryColor |
#008ebd |
Ausgewählte Filter Darstellung:
| Bereich | Konfigurationsname | Konfigurationswert |
|---|---|---|
| Schaltfläche Innenabstand | filterDropSelectedInnerSpacing |
5px |
| Schaltfläche Schriftgröße | filterDropSelectedFontSize |
14px |
| Schaltfläche Abrundung | filterDropSelectedBorderRadius |
3px |
| Schaltfläche Hintergrund | filterDropSelectedBackgroundColor |
#f1f1f1 |
| Schaltfläche Schriftfarbe | filterDropSelectedColor |
#000000 |
Anzeige:
| Bereich | Konfigurationsname | Konfigurationswert |
|---|---|---|
| Name anzeigen (Standard-Listenansicht) | filterDropOptionsWrapperShowCounter |
A = Ja |
B = Nein |
||
| Name anzeigen (Raster für Farben) | filterDropGridColorShowName |
A = Ja |
B = Nein |
||
| Zähler anzeigen (Raster für Farben) | filterDropGridColorShowCounter |
A = Ja |
B = Nein |
||
| Name anzeigen (Raster für Grafiken) | filterDropGridImgShowName |
A = Ja |
B = Nein |
||
| Zähler anzeigen (Raster für Grafiken) | filterDropGridImgShowCounter |
A = Ja |
B = Nein |
||
| Zähler anzeigen (Raster für XL) | filterDropGridXLShowCounter |
A = Ja |
B = Nein |
Funktionen:
| Bereich | Konfigurationsname | Konfigurationswert |
|---|---|---|
| Filter ein-/ausgeklappt¹ | filterDropCollapseOption |
A = immer eingeklappt |
B = immer ausgeklappt |
||
C = Dynamisch |
||
| Dynamisch² | filterDropCollapseBreakpoint |
991 = einklappen ≤ 991px |
768 = einklappen ≤ 768px |
||
576 = einklappen ≤ 576px |
||
| Filter fusionieren³ | filterDropMerge |
A = Ja |
B = Nein |
Erläuterungen:
¹Filter ein-/ausgeklappt:
Über diese Funktion können Sie bestimmen, ob alle Filter erst über einen Klick auf einen separate Schaltfläche (z.B Filter anzeigen) angezeigt werden sollen, oder ob diese immer sichtbar sein. Sollten Sie beispielsweise zwei dutzend Filteroptionen anbieten, wäre es unserer Empfehlung nach sinnvoller die Filter über die Option immer eingeklappt zu platzsparend zu verbergen.
Sollten Sie den Shopbuilder nutzen, sind Sie in der Positionierung der einzelnen Filter-Widget-Typen deutlich flexibler. So können Sie mehrere Filter in die Toolbar mit der Option immer eingeklappt verstauen und die restlichen Filter (z.B. Herstellerfilter, Verfügbarkeitsfilter und Preisfilter) außerhalb der Toolbar positionieren. Damit bleiben ein Teil der Filter verborgen und einige sind immer sichtbar.
²Dynamisch:
Über die Funktion können Sie bestimmen, ob ein Filter auf großen Viewports (Bildschirmbreite) angezeigt und bei kleineren Viewports versteckt werden soll. Dabei setzten Sie mit den Werten 991, 768 sowie 576 - was letztlich die Bildschirmbreite in Pixel darstellt - den sogenannten Breakpoint fest, ab wann die Filter in der Toolbar verborgen und erst mit einem Klick auf eine Schaltfläche angezeigt werden sollen.
³Filter fusionieren:
Diese Funktion ist ausschließlich für den Gebrauch mit dem Shopbuilder bestimmt und findet auch nur dort Anwendung. Bei der Platzierung von verschiedenen Filter-Typen (Herstellerfilter, Attributs-, Eigenschafts-, Merkmalsfilter usw.) innerhalb der Toolbar können unschöne Umbrüche entstehen. Um dies entgegenzuwirken und die Filteroptionen nebeneinander zu platzieren, können Sie diese Funktion aktivieren.
Wichtig: Sollten Sie alle Filteroptionen im Shopbuilder außerhalb der Toolbar platzieren, so ist es dringend notwendig, dass diese Funktion aktiviert wird.
Beispiel Konfigurations-Code
Der finale Konfigurationscode, der dann in die Plugin-Konfiguration eingefügt wird, könnte dann z.B so aussehen:
filterDropColumns: 3;
filterDropCollapseOption: B;
Es ist übrigens nicht notwendig, dass Sie alle Konfigurationsnamen und Konfigurationswerte in die entsprechende Plugin-Konfiguration einfügen. Sie können lediglich die Konfiguration auswählen, die Sie auch benötigen bzw. wo sie eine Änderung vornehmen wollen. Die Darstellung funktioniert auch vollkommen ohne einen solchen Code.
3.3 Hinterlegung des Konfigurations-Codes
Unabhängig davon ob Sie den den Code über den Editor generieren oder diesen manuell über die Liste zusammenstellen, wird dieser global innerhalb der Plugin-Konfiguration des FilterDrop Plugins eingefügt:
Nach dem Einfügen die Konfiguration über das Disketten-Symbol speichern. Bei Nutzung des Shopbuilders bitte unbedingt Punkt 1.4 beachten.
3.4 Sonstiges
Schaltflächenbezeichnungen sowie diverse andere Texte können Sie über den Menüpunkt CMS → Mehrsprachigkeit in ihrem Plentymarkets-System ändern. Wählen Sie dazu das entsprechende Plugin-Set über die Auswahlfelder aus. Navigieren Sie zum rechten Panel und wechseln Sie ggf. die Zielsprache. Über der Punkt FilterDrop können Sie nun die Bezeichnungen für die jeweilige Sprache ändern. Speichern Sie Ihre Anpassungen und stellen Sie danach das Plugin-Set bereit (s. Punkt 1.3)
Ferner können Sie in der Plugin-Konfiguration des FilterDrop-Plugins eigenes CSS hinterlegen. Dies macht dann Sinn, wenn Sie Änderungen an der Darstellung der Filter vornehmen wollen, die nicht über die Konfigurations-Codes abgedeckt sind.
4. Troubleshooting
Sollten Sie Probleme bei der Einrichtung aufkommen, bitten wir Sie nachfolgende Einrichtungsschritte zu kontrollieren. In den allermeisten können die Probleme damit gelöst werden:
- Plugin-Priorität des FilterDrop-Plugins innerhalb des Plugin-Sets prüfen (s. Punkt 1.2)
- Bei Verwendung des Shopbuilders müssen die Widgets neu generiert werden (s. Punkt 1.4)
- Plugin-Set bei jeder Neuinstallation sowie bei Updates neu bereitstellen (s. Punkt 1.3)
Wenn Sie sämtliche Punkte abhaken können und das Problem weiterhin besteht, bitten wir Sie uns zu kontaktieren.
5. Kompatibilität
| Ceres Version | Kompatibel |
|---|---|
| Version =< 4.6.0 |  |
| Version => 5.0.0 |  (*) |
*Das Plugin ist VUE SSR-Kompatibel
3 „Gefällt mir“