Shop Produktlisten Filter

Einleitung

Ü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

Filter Konfiguration

Produktkategorie

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.

Produktsuche

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.).

Filter-Formate

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".

Filter aktivieren

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.

Eigene Filter-Formate erstellen

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>';
	    }    
	}