Filternavigation: Unterschied zwischen den Versionen

Aus e-vendo Wiki
Wechseln zu: Navigation, Suche
(Ausblenden spezifischer Seiten)
 
(13 dazwischenliegende Versionen von 3 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
 +
{{btt}}
 
Mit Hilfe der Filternavigation wird dem Shopbesucher die Möglichkeit geboten, die aktuelle Artikelliste anhand vom Shopbetreiber vordefinierter Kriterien sinnvoll zu filtern, also einzugrenzen.
 
Mit Hilfe der Filternavigation wird dem Shopbesucher die Möglichkeit geboten, die aktuelle Artikelliste anhand vom Shopbetreiber vordefinierter Kriterien sinnvoll zu filtern, also einzugrenzen.
  
 
Voraussetzung ist, dass in der Konfiguration der Warenwirtschaft entsprechende Eigenschaftsklassen, -gruppen und Eigenschaften festgelegt sind und dass die Artikel einer Eigenschaftsklasse zugeordnet und mit den passenden Werten belegt sind.
 
Voraussetzung ist, dass in der Konfiguration der Warenwirtschaft entsprechende Eigenschaftsklassen, -gruppen und Eigenschaften festgelegt sind und dass die Artikel einer Eigenschaftsklasse zugeordnet und mit den passenden Werten belegt sind.
  
Diese Definitionen und Zuordnungen können manuell in der {{link|Konfiguration_-_Artikel_-_Artikeleigenschaften|Konfiguration ERP}} sowie der {{link|Artikelverwaltung_-_Reiter_Onlineshop|Artikelverwaltung}} vorgenommen oder über einen {{link|Datenimport - Reiter Artikeleigenschaften|Datenimport}} eingepflegt werden.
+
Diese Definitionen und Zuordnungen können manuell in der {{link|Konfiguration - Artikeleigenschaften|Konfiguration ERP}} sowie der {{link|Artikelverwaltung_-_Reiter_Onlineshop|Artikelverwaltung}} vorgenommen oder über einen {{link|Datenimport - Reiter Artikeleigenschaften|Datenimport}} eingepflegt werden.
  
  
Zeile 11: Zeile 12:
 
== Festlegung der Filterklassen, -gruppen und -einträge ==
 
== Festlegung der Filterklassen, -gruppen und -einträge ==
  
Die Definition der Filterklassen, -gruppen und -einträge erfolgt in der {{link|Konfiguration_-_Artikel_-_Artikeleigenschaften|Konfiguration der Artikeleigenschaften}}.
+
Die Definition der Filterklassen, -gruppen und -einträge erfolgt in der {{link|Konfiguration - Artikeleigenschaften|Konfiguration der Artikeleigenschaften}}.
  
 
Für jede Artikelgruppe, die in ihrer Filterung separat betrachtet werden soll, ist je eine eigene Eigenschaftsklasse anzulegen.
 
Für jede Artikelgruppe, die in ihrer Filterung separat betrachtet werden soll, ist je eine eigene Eigenschaftsklasse anzulegen.
Zeile 26: Zeile 27:
  
 
Legen Sie hier für jede Eigenschaftsgruppe den '''Gruppentyp''' und den '''Anzeigetyp''' fest:
 
Legen Sie hier für jede Eigenschaftsgruppe den '''Gruppentyp''' und den '''Anzeigetyp''' fest:
 +
  
 
===Gruppentyp===
 
===Gruppentyp===
 +
 
;:Anzeige
 
;:Anzeige
 
:Bedeutet, dass diese Gruppe auschließlich für die Anzeige in der Detailansicht der Artikel verwendet wird.
 
:Bedeutet, dass diese Gruppe auschließlich für die Anzeige in der Detailansicht der Artikel verwendet wird.
Zeile 37: Zeile 40:
  
 
===Anzeigetypen===
 
===Anzeigetypen===
 +
 
Die Anzeigetypen sind nur für die Filternavigation von Bedeutung. Im Standard-Layout werden die folgende Werte bisher unterstützt (Filtereinträge sind die Eigenschaften der Gruppe).
 
Die Anzeigetypen sind nur für die Filternavigation von Bedeutung. Im Standard-Layout werden die folgende Werte bisher unterstützt (Filtereinträge sind die Eigenschaften der Gruppe).
  
  
<div style="background:#f2f2f2; border:1px solid #dedede; box-shadow:0 0 5px #dedede; margin-bottom:15px;">
+
{{gbox|filternavi f0.png||Anzeigetyp 0&#58; einfache Liste|Einfache Auflistung der Filtereinträge.
<div style="display:inline-block; margin-right:20px; margin-left:5px; vertical-align:top;">
 
[[image:filternavi f0.png|border|verweis=]]
 
</div>
 
 
 
<div style="display:inline-block; vertical-align:top;">
 
;Anzeigetyp 0&#58; einfache Liste
 
Einfache Auflistung der Filtereinträge.
 
  
 
Liegt eine Grafik für den Filtereintrag vor, so wird diese vor dem Text eingeblendet.
 
Liegt eine Grafik für den Filtereintrag vor, so wird diese vor dem Text eingeblendet.
Zeile 53: Zeile 50:
 
Liegt keine Grafik vor, so wird das Zeichen » eingeblendet.
 
Liegt keine Grafik vor, so wird das Zeichen » eingeblendet.
  
Diese Liste hat keine maximale Höhe.
+
Diese Liste hat keine maximale Höhe.}}
</div>
 
</div>
 
  
<div style="background:#f2f2f2; border:1px solid #dedede; box-shadow:0 0 5px #dedede; margin-bottom:15px;">
+
{{gbox|filternavi f1.png||Anzeigetyp 1&#58; textbasierte Liste|Filtereinträge werden in einer Listbox ohne Grafiken dargestellt.
<div style="display:inline-block; margin-right:20px; margin-left:5px; vertical-align:top;">
 
[[image:filternavi f1.png|border|verweis=]]
 
</div>
 
 
 
<div style="display:inline-block; vertical-align:top;">
 
;Anzeigetyp 1&#58; textbasierte Liste
 
Filtereinträge werden in einer Listbox ohne Grafiken dargestellt.
 
  
 
Diese Form der Anzeige bietet sich an, wenn es eine hohe Zahl von möglichen Filtereinträgen gibt.
 
Diese Form der Anzeige bietet sich an, wenn es eine hohe Zahl von möglichen Filtereinträgen gibt.
  
Durch die Listbox ist die Höhe fest vorgegeben und es entsteht bei Notwendigkeit automatisch ein vertikaler Scrollbalken.  
+
Durch die Listbox ist die Höhe fest vorgegeben und es entsteht bei Notwendigkeit automatisch ein vertikaler Scrollbalken.}}
</div>
 
</div>
 
  
<div style="background:#f2f2f2; border:1px solid #dedede; box-shadow:0 0 5px #dedede; margin-bottom:15px;">
+
{{gbox|filternavi f2.png||Anzeigetyp 2&#58; grafische Liste|Filtereinträge werden rein über ihre Grafiken dargestellt.
<div style="display:inline-block; margin-right:20px; margin-left:5px; vertical-align:top;">
 
[[image:filternavi f2.png|border|verweis=]]
 
</div>
 
 
 
<div style="display:inline-block; vertical-align:top;">
 
;Anzeigetyp 2&#58; grafische Liste
 
Filtereinträge werden rein über ihre Grafiken dargestellt.
 
  
 
Diese Darstellung eignet sich bspw. besonders gut für Farben.
 
Diese Darstellung eignet sich bspw. besonders gut für Farben.
  
Der Text eines Filtereintrages wird lediglich angezeigt, wenn diesem keine Grafik zugewiesen wurde.
+
Der Text eines Filtereintrages wird lediglich angezeigt, wenn diesem keine Grafik zugewiesen wurde.}}
</div>
 
</div>
 
  
<div style="background:#f2f2f2; border:1px solid #dedede; box-shadow:0 0 5px #dedede; margin-bottom:15px;">
+
{{gbox|filternavi f3.png||Anzeigetyp 3&#58; Radio Button Group|Die Filtereinträge werden durch eine Radio Button Group dargestellt, die dem Nutzer mitteilt, dass nur eine Option wählbar ist.
<div style="display:inline-block; margin-right:20px; margin-left:5px; vertical-align:top;">
 
[[image:filternavi f3.png|border|verweis=]]
 
</div>
 
  
<div style="display:inline-block; vertical-align:top;">
+
Pro Filtereintrag entsteht eine Radiobox. Hat der Filtereintrag auch eine Grafik, so wird diese in dem Eintrag mit angezeigt.}}
;Anzeigetyp 3&#58; Radio Button Group
 
Die Filtereinträge werden durch eine Radio Button Group dargestellt, die dem Nutzer mitteilt, dass nur eine Option wählbar ist.
 
  
Pro Filtereintrag entsteht eine Radiobox. Hat der Filtereintrag auch eine Grafik, so wird diese in dem Eintrag mit angezeigt.
+
{{gbox|filternavi f4.png||Anzeigetyp 4&#58; Checkboxes|Filtereinträge werden durch Checkboxen dargestellt, die dem Nutzer mitteilt, dass mehrere Optionen wählbar sind.
</div>
 
</div>
 
  
<div style="background:#f2f2f2; border:1px solid #dedede; box-shadow:0 0 5px #dedede; margin-bottom:15px;">
+
Pro Filtereintrag entsteht eine Checkbox. Hat der Filtereintrag auch eine Grafik, so wird diese in dem Eintrag mit angezeigt.}}
<div style="display:inline-block; margin-right:20px; margin-left:5px; vertical-align:top;">
 
[[image:filternavi f4.png|border|verweis=]]
 
</div>
 
  
<div style="display:inline-block; vertical-align:top;">
+
{{gbox|filternavi f5.png||Anzeigetyp 5&#58; Drop Down-Menü|Es entsteht ein Drop Down-Menü mit den Filtereinträgen (im Bild ausgeklappt zu sehen).
;Anzeigetyp 4&#58; Checkboxes
 
Filtereinträge werden durch Checkboxen dargestellt, die dem Nutzer mitteilt, dass mehrere Optionen wählbar sind.
 
 
 
Pro Filtereintrag entsteht eine Checkbox. Hat der Filtereintrag auch eine Grafik, so wird diese in dem Eintrag mit angezeigt.
 
</div>
 
</div>
 
 
 
<div style="background:#f2f2f2; border:1px solid #dedede; box-shadow:0 0 5px #dedede;">
 
<div style="display:inline-block; margin-right:20px; margin-left:5px; vertical-align:top;">
 
[[image:filternavi f5.png|border|verweis=]]
 
</div>
 
 
 
<div style="display:inline-block; vertical-align:top;">
 
;Anzeigetyp 5&#58; Drop Down-Menü
 
Es entsteht ein Drop Down-Menü mit den Filtereinträgen (im Bild ausgeklappt zu sehen).
 
  
 
Grafiken werden in dieser Darstellungsweise nicht angezeigt.
 
Grafiken werden in dieser Darstellungsweise nicht angezeigt.
</div>
 
</div>
 
  
 +
Die Möglichkeit einer Mehrfachauswahl wird für diesen Typ nicht empfohlen.}}
  
 
===Mehrfachauswahl===
 
===Mehrfachauswahl===
Zeile 150: Zeile 101:
  
 
[[image:artikeleigenschaften_bsp-filter.png|verweis=]]
 
[[image:artikeleigenschaften_bsp-filter.png|verweis=]]
 +
 +
 +
Im Shop kann dies dann wie im untenstehenden Bild aussehen. Es zeigt die Artikeldetailansicht.
 +
 +
[[image:artikeleigenschaften bsp-eigenschaften-filter.png|border|verweis=]]
 +
 +
 +
==Ausblenden spezifischer Seiten==
 +
 +
Über Änderungen an den Templates kann die Filternavigation bearbeitet werden. Hier soll nur auf die populäre Möglichkeit, die Filternavigation von einzelnen Seiten zu exkludieren, eingegangen werden.
 +
 +
 +
Dazu muss in der Datei <tt>layout.inc.php</tt> das Array <tt>$confPropertyFilter['NoSites']</tt> hinterlegt werden.
 +
 +
Um also bspw. die Filternavigation auf Suchergebnisseiten und den Shopthemen mit den Nummern 1224 sowie 1280 auszublenden, muss folgender Code generiert werden:
 +
 +
{{code|<nowiki>$confPropertyFilter['NoSites'] = array('search','catalog' => array('p' => array(1224,1280)));</nowiki>}}
 +
 +
 +
Weitere Informationen finden sich in der Referenzdokumentation der Templates. Diese lassen sich auf folgendem Weg erreichen:
 +
*{{link|Shop-Management|Shop-Management}}
 +
*Menüpunkt ''Dokumentation''
 +
*Unterpunkt ''Dokumentation''
 +
*Unterpunkt ''Shop-Referenzdokumentation der Templates''
 +
*Es öffnet sich ein neuer Tab mit der Referenzdokumentation.
 +
 +
Informationen zur Filternavigation finden sich dort unter:
 +
*Menüpunkt ''layout.inc.php''
 +
*Unterpunkt ''Filter''

Aktuelle Version vom 23. Oktober 2023, 15:18 Uhr

zum Anfang der Seite

Mit Hilfe der Filternavigation wird dem Shopbesucher die Möglichkeit geboten, die aktuelle Artikelliste anhand vom Shopbetreiber vordefinierter Kriterien sinnvoll zu filtern, also einzugrenzen.

Voraussetzung ist, dass in der Konfiguration der Warenwirtschaft entsprechende Eigenschaftsklassen, -gruppen und Eigenschaften festgelegt sind und dass die Artikel einer Eigenschaftsklasse zugeordnet und mit den passenden Werten belegt sind.

Diese Definitionen und Zuordnungen können manuell in der Konfiguration ERP sowie der Artikelverwaltung vorgenommen oder über einen Datenimport eingepflegt werden.



Festlegung der Filterklassen, -gruppen und -einträge

Die Definition der Filterklassen, -gruppen und -einträge erfolgt in der Konfiguration der Artikeleigenschaften.

Für jede Artikelgruppe, die in ihrer Filterung separat betrachtet werden soll, ist je eine eigene Eigenschaftsklasse anzulegen.

Innerhalb der Eigenschaftsklasse wiederum ist für jede Filtergruppe je eine Eigenschaftsgruppe anzulegen.


Wählen Sie im Modul "Artikeleigenschaften" die gewünschte Artikeleigenschaftsgruppe aus und klicken Sie auf Bearbeiten.

Sie gelangen in das folgende Fenster:

Artikeleigenschaften config-gruppe.png


Legen Sie hier für jede Eigenschaftsgruppe den Gruppentyp und den Anzeigetyp fest:


Gruppentyp

Anzeige
Bedeutet, dass diese Gruppe auschließlich für die Anzeige in der Detailansicht der Artikel verwendet wird.
Filter
Bedeutet, dass diese Gruppe lediglich in der Filternavigation verwendet wird.
Anzeige + Filter
Bedeutet, dass diese Gruppe sowohl in der Filternavigation verwendet als auch in der Detailansicht des Artikels zur Anzeige gebracht wird.


Anzeigetypen

Die Anzeigetypen sind nur für die Filternavigation von Bedeutung. Im Standard-Layout werden die folgende Werte bisher unterstützt (Filtereinträge sind die Eigenschaften der Gruppe).


Filternavi f0.png

Anzeigetyp 0: einfache Liste

Einfache Auflistung der Filtereinträge.

Liegt eine Grafik für den Filtereintrag vor, so wird diese vor dem Text eingeblendet.

Liegt keine Grafik vor, so wird das Zeichen » eingeblendet.

Diese Liste hat keine maximale Höhe.

Filternavi f1.png

Anzeigetyp 1: textbasierte Liste

Filtereinträge werden in einer Listbox ohne Grafiken dargestellt.

Diese Form der Anzeige bietet sich an, wenn es eine hohe Zahl von möglichen Filtereinträgen gibt.

Durch die Listbox ist die Höhe fest vorgegeben und es entsteht bei Notwendigkeit automatisch ein vertikaler Scrollbalken.

Filternavi f2.png

Anzeigetyp 2: grafische Liste

Filtereinträge werden rein über ihre Grafiken dargestellt.

Diese Darstellung eignet sich bspw. besonders gut für Farben.

Der Text eines Filtereintrages wird lediglich angezeigt, wenn diesem keine Grafik zugewiesen wurde.

Filternavi f3.png

Anzeigetyp 3: Radio Button Group

Die Filtereinträge werden durch eine Radio Button Group dargestellt, die dem Nutzer mitteilt, dass nur eine Option wählbar ist.

Pro Filtereintrag entsteht eine Radiobox. Hat der Filtereintrag auch eine Grafik, so wird diese in dem Eintrag mit angezeigt.

Filternavi f4.png

Anzeigetyp 4: Checkboxes

Filtereinträge werden durch Checkboxen dargestellt, die dem Nutzer mitteilt, dass mehrere Optionen wählbar sind.

Pro Filtereintrag entsteht eine Checkbox. Hat der Filtereintrag auch eine Grafik, so wird diese in dem Eintrag mit angezeigt.

Filternavi f5.png

Anzeigetyp 5: Drop Down-Menü

Es entsteht ein Drop Down-Menü mit den Filtereinträgen (im Bild ausgeklappt zu sehen).

Grafiken werden in dieser Darstellungsweise nicht angezeigt.

Die Möglichkeit einer Mehrfachauswahl wird für diesen Typ nicht empfohlen.

Mehrfachauswahl

In der Eigenschaftsgruppe kann über den Wert in Mehrfachauswahl nun noch angegeben werden, ob die Einträge innerhalb dieser Gruppe nur einzeln (Wert N) ausgewählt werden können oder ob man hier auch eine Mehrfachauswahl (Wert J) vornehmen kann. Es wird dringend empfohlen, bei den Anzeigetypen 3 (Radio Button Group) und 4 (Checkboxes) darauf zu achten, diese in passendem Zusammenhang zum Wert in Mehrfachauswahl festzulegen: Bei Anzeigetyp 3 sollte Mehrfachauswahl auf dem Wert N stehen und bei Anzeigetyp 4 sollte Mehrfachauswahl auf dem Wert J stehen.

In jeder Filtergruppe müssen dann wiederum die Filtereinträge festgelegt werden. Dies sind nun die Einträge, die in der Filternavigation dann dargestellt werden. Dafür legt man pro Filtergruppe (Artikeleigenschaftsgruppe) die Artikeleigenschaften an. Wichtig ist, dass diese die Anzeigeoption nur Onlineshop oder eConnect und Onlineshop gesetzt bekommen. Sie müssen weiterhin einen Namen erhalten und optional eine Grafik.


Festlegung der Filterwerte bei den Artikeln

Damit nun die Artikel über die Filternavigation auch gefunden werden, ist es zum Einen wichtig, dass die Artikel der passenden Eigenschaftsklasse zugewiesen werden. Diese Zuordnung erfolgt in der Artikelverwaltung.

Weiterhin müssen nun die Filtereinträge beim Artikel gefüllt werden, die bei diesem Artikel zutreffen. Beim Aktivieren eines Filters werden alle Artikel angezeigt, bei denen für diese Eigenschaft ein Wert hinterlegt ist (das Feld darf also nicht leer sein).

  • Wird die Eigenschaftsgruppe sowohl für die Anzeige in der Artikeldetailansicht als auch für die Filterung verwendet, so muss der in der Artikeldetailansicht anzuzeigende Wert für die Eigenschaft eingetragen werden.
    Wenn die Filtergruppe zwar vom Gruppentyp Anzeige+Filter ist aber die Eigenschaft selbst in der Artikeldetailansicht ausgeblendet werden soll, bietet sich jedoch das Zeichen x (ein kleines X) an. Andere Werte werden in der Artikeldetailansicht angezeigt (was durchaus auch sinnvoll genutzt werden kann, wenn man z. B. den Farbwert "rot" noch näher erklären will, z. B. mit "bordeaux").
  • Wird die Eigenschaftsgruppe ausschließlich zur Filterung verwendet, so reicht ein "Ankreuzen" der Eigenschaften aus, bei deren Auswahl der Artikel angezeigt werden soll.
    Tragen Sie z.B. den Wert x in die jeweilige Eigenschaft ein.


  • Der Begriff Fahrräder muss dann als Eigenschaftsklasse definiert und den entsprechenden Artikel zugewiesen werden.
  • Die "Teilüberschriften" Farbe, Federung, Rahmenhöhe, Rahmenmaterial und Radgröße sind als Eigenschaftsgruppen in der Eigenschaftsklasse anzulegen.
  • Die Einzelpunkte, z.B. die einzelnen Radgrößen 26 inch und 28 inch sowie die einzelnen Farben, sind innerhalb der jeweiligen Eigenschaftsgruppe als Eigenschaft anzulegen.
    Diesen Eigenschaften sind dann bei den einzelnen Artikeln die entsprechenden Werte zuzuordnen:


Artikeleigenschaften bsp-filter.png


Im Shop kann dies dann wie im untenstehenden Bild aussehen. Es zeigt die Artikeldetailansicht.

Artikeleigenschaften bsp-eigenschaften-filter.png


Ausblenden spezifischer Seiten

Über Änderungen an den Templates kann die Filternavigation bearbeitet werden. Hier soll nur auf die populäre Möglichkeit, die Filternavigation von einzelnen Seiten zu exkludieren, eingegangen werden.


Dazu muss in der Datei layout.inc.php das Array $confPropertyFilter['NoSites'] hinterlegt werden.

Um also bspw. die Filternavigation auf Suchergebnisseiten und den Shopthemen mit den Nummern 1224 sowie 1280 auszublenden, muss folgender Code generiert werden:

Templ code-blk.png
$confPropertyFilter['NoSites'] = array('search','catalog' => array('p' => array(1224,1280)));


Weitere Informationen finden sich in der Referenzdokumentation der Templates. Diese lassen sich auf folgendem Weg erreichen:

  • Shop-Management
  • Menüpunkt Dokumentation
  • Unterpunkt Dokumentation
  • Unterpunkt Shop-Referenzdokumentation der Templates
  • Es öffnet sich ein neuer Tab mit der Referenzdokumentation.

Informationen zur Filternavigation finden sich dort unter:

  • Menüpunkt layout.inc.php
  • Unterpunkt Filter