Filternavigation: Unterschied zwischen den Versionen

Aus e-vendo Wiki
Wechseln zu: Navigation, Suche
Zeile 30: Zeile 30:
  
  
<div style="background:#f2f2f2; border:1px solid #dedede; box-shadow:0 0 5px #dedede;">
+
<div style="background:#f2f2f2; border:1px solid #dedede; box-shadow:0 0 5px #dedede; margin-bottom:15px;">
 
<div style="display:inline-block; margin-right:20px; margin-left:5px; vertical-align:top;">
 
<div style="display:inline-block; margin-right:20px; margin-left:5px; vertical-align:top;">
 
[[image:filternavi f0.png|border|verweis=]]
 
[[image:filternavi f0.png|border|verweis=]]
Zeile 45: Zeile 45:
 
</div>
 
</div>
  
 
+
<div style="background:#f2f2f2; border:1px solid #dedede; box-shadow:0 0 5px #dedede; margin-bottom:15px;">
<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;">
 
<div style="display:inline-block; margin-right:20px; margin-left:5px; vertical-align:top;">
 
[[image:filternavi f1.png|border|verweis=]]
 
[[image:filternavi f1.png|border|verweis=]]
Zeile 61: Zeile 60:
 
</div>
 
</div>
  
 
+
<div style="background:#f2f2f2; border:1px solid #dedede; box-shadow:0 0 5px #dedede; margin-bottom:15px;">
<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;">
 
<div style="display:inline-block; margin-right:20px; margin-left:5px; vertical-align:top;">
 
[[image:filternavi f2.png|border|verweis=]]
 
[[image:filternavi f2.png|border|verweis=]]
Zeile 77: Zeile 75:
 
</div>
 
</div>
  
 
+
<div style="background:#f2f2f2; border:1px solid #dedede; box-shadow:0 0 5px #dedede; margin-bottom:15px;">
<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;">
 
<div style="display:inline-block; margin-right:20px; margin-left:5px; vertical-align:top;">
 
[[image:filternavi f3.png|border|verweis=]]
 
[[image:filternavi f3.png|border|verweis=]]
Zeile 91: Zeile 88:
 
</div>
 
</div>
  
 
+
<div style="background:#f2f2f2; border:1px solid #dedede; box-shadow:0 0 5px #dedede; margin-bottom:15px;">
<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;">
 
<div style="display:inline-block; margin-right:20px; margin-left:5px; vertical-align:top;">
 
[[image:filternavi f4.png|border|verweis=]]
 
[[image:filternavi f4.png|border|verweis=]]
Zeile 104: Zeile 100:
 
</div>
 
</div>
 
</div>
 
</div>
 
  
 
<div style="background:#f2f2f2; border:1px solid #dedede; box-shadow:0 0 5px #dedede;">
 
<div style="background:#f2f2f2; border:1px solid #dedede; box-shadow:0 0 5px #dedede;">
Zeile 118: Zeile 113:
 
</div>
 
</div>
 
</div>
 
</div>
 
 
 
  
  

Version vom 4. März 2016, 12:03 Uhr

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. Legen Sie 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 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.

Filternavi f1.png

Anzeigetyp 1

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

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

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

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

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

Grafiken werden in dieser Darstellungsweise nicht angezeigt.


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 (Radioboxen) und 4 (Checkboxen) diese in passendem Zusammenhang zum Wert in Mehrfachauswahl festzulegen, also 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.


Beispiel

Im Onlineshop soll in einem Thema eine solche Darstellung erscheinen, mit deren Hilfe der Besucher die Artikel z.B. nach Farbe oder Radgröße filtern kann:


verweis


  • 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:


Datei:Filternavigation Artikel Eigenschaften.jpg