Shop Produktlisten Filter
Über die Filterbar-Komponente können Sie dem Shop-Besuchern eine Filter-Option für die Produktsuchergebnisse und die Kategorie-Produktlisten zur Verfügung stellen.
Short-Facts
- Konfigurierbare Filter zu Produktsuche und Produktkategorien
- Konfigurierbare Ausgabeformat pro Produktfilter
- Kontextbezogene Produktfilter in den Produktkategorien mit Vererbung an die Unterkategorien
- Erweiterbar um eigene Filter-Ausgabeformate
Die Filter für eine Kategorie werden über die Kategorie-Felder "Kategorie-Filter-Attribute" und "Filter-Vererbung" festgelegt. In dem Feld "Kategorie-Filter-Attribute" werden die Spaltenlabels der Produkt-Attribtue hinterlegt, die für die Kategorie als Filter genutzt werden sollen. Mehrere Attribute-Spaltenlabels werden durch Komma "," getrennt.
Über das "Filter-Vererbung" kann festgelegt werden, ob die Kategorie die Filter seiner Vaterkategorie erbt. Die Vererbung von Filtern kann über beliebige Ebenen fortgesetzt werden.
Die Vererbung von Filtern kann mit neuen Filter-Attributen kombiniert werden. Eine Kategorie kann also aus ihrer Vaterkategorie Filter erben und diese geerbten Filtern um eigene Filter-Attribute erweitern.
Die Filter für die Produktsuche werden im eCMS-Admin in der Konfiguration des Plugins "ecms_plugin_siteconfig" hinterlegt.
ecs: product: filter_defaults: - field: "<attribute-spaltenlabel>" type: "<attribute-datentyp>" - field: "<attribute-spaltenlabel>" type: "<attribute-datentyp>" - ...
In der "filter_defaults" Array-Liste können beliebig viele Filter-Attribute hinterlegt werden. Im Array-Key "field" wird das Spaltenlabel des Produkt-Attribtues eingetragen und im Array-Key "type" sein Datentyp (z.B. "text", "integer", "float", etc.).
Wie die Produktsuche-Filter, werden die Ausgabeformate für die Filter in der Konfiguration des Plugins "ecms_plugin_siteconfig" eingetragen.
ecs: product: filter_formats: <attribute-spaltenlabel>: format: "<filterformat-label>" params: <filterformat-parameter-array> <attribute-spaltenlabel>: format: "<filterformat-label>" params: <filterformat-parameter-array> ...
In dem "filter_formats" Array verwenden Sie das Spaltenlabel des Filter-Attribute als Array-Key. Im Array-Key "format" tragen Sie das vollständige Label des Formates ein, welches als Produktlisten-Filter genutzt werden soll. Über den Array-Key "params" können Sie ein Parameter-Array ans Filter-Format übergeben.
Nachfolgend ein Konfiguration-Beispiel mit den Produkt-Attributen Varianten-Farbe ("prdv_color") und Brand ("brand").
ecs: product: filter_defaults: - field: prdv_color type: text - field: brand type: text filter_formats: prdv_color: format: mein_produkt_filter_farbe params: show_icon: true show_text: false brand: format: mein_produkt_filter_marke params: show_icon: true show_text: true
Wird zu einem Filter-Attribute kein Ausgabeformat konfiguriert, verwendet die Filterbar standardmässig das Format "ecs_product_list_filter_default".
Damit die Filter im Shop-Frontend bei Produktliste angezeigt werden, muss die Filterbar-Option in den Parametern des Produktlisten-Formats aktiviert sein.
Die Filterbar wird von der Produktliste als XSource-Inhalt bereitgestellt und muss über einen XSource-Platzhalter " %{eCMS-SRCX:ecs-product-list-filterbar}%" in die Seite eingefügt werden. Dieses Verfahren erlaubt es, die Produktlisten-Filter frei auf der Seite platzieren zu können.
Sie können die Filterbar um eigene Filter-Formate erweitern. Am einfachsten erstellen Sie ein neues Filter-Format, in dem Sie den neuen Filter vom Basis-Filter-Format "ecs_product_list_filter_default" anleiten.
Das "ecs_product_list_filter_default" Filter-Format erhält von der Filterbar eine distinct Werte-Liste aus dem konfigurierten Filter-Attribute, z.B. alle Farben aus dem Produkt-Attribute "prdv_color". Erstellt daraus eine Filter-Liste mit einer Multiple-Choice-Auswahl, d. h. der Shop-Besucher kann mehrere Filter-Optionen aktivieren.
Um die Ausgabe des "ecs_product_list_filter_default" Filters zu ändern, überschreiben Sie in ihrem eigenen Filter-Format einfach die Render-Methoden "render_filter_start", "render_filter_end", "render_filter_option".
Im folgenden Beispiel, wird ein Farb-Filter um ein farbiges Rechteck vor dem Farbenname erweitert:
class mein_produkt_filter_farbe extends ecs_product_list_filter_default { protected function render_filter_option($params) { switch ($params['value']) { case 'schwarz': $opt = '<span style="background-color:#000000;width:16px;height:16px;display: inline-block;"> </span> '.$params['value']; break; case 'weiss': case 'weiß': $opt = '<span style="background-color:#ffffff;width:16px;height:16px;display: inline-block;"> </span> '.$params['value']; break; case 'blau': $opt = '<span style="background-color:#0000CC;width:16px;height:16px;display: inline-block;"> </span> '.$params['value']; break; default: $opt = $params['value']; break; } return '<li class="'.$this->params['option_css_class'].' '.$params['xclass'].'"> <a href="'.$this->filterOption_getActionURL($params['value']).'" class="'.$this->params['option_name_css_class'].'">'.$opt.'</a> </li>'; } }