Sehr geehrte POWERGAP Shop Betreiber,
ab heute bietet Ihnen POWERGAP eine neue Möglichkeit für die Eingrenzung des Suchergebnisses im Shop.
Der Kunde kann nun im Shop mit Hilfe von Slidern zusätzliche Dinge eingrenzen. Beispielsweise (Grafik unten) alle Artikel zwischen 10 und 300 Euro oder mit bestimmten Bewertungen. Bei Weinshops, sind z.B. Eingrenzungen für Jahrgänge oder Alkoholgehalt möglich, sofern diese in einem numerischen Feld in der Datenbank vorliegen.
Nachdem der Slider bewegt wurde, wartet das System genau eine Sekunde und ruf vom Server das neue Ergebnis ab. Wenn der Besucher etwas schneller ist, kann er mehrere Eingrenzungen auf einmal mit den Slidern einstellen, bevor die Seite sich auffrischt.
Diese Slider können mit allen numerischen Feldern aus der Artikeltabelle eingestellt werden. Denkbar sind nun auch Spezial-Programmierungen, die z.B. nachts ein bestimmtes Feld mit errechneten Werten füllen, um dann darauf eingrenzen zu können. Hierzu können Sie uns gern ansprechen, wenn Sie eigene Ideen haben.
Die Einrichtung:
1. CSS für die Slider in Layout > Schriften / CSS > all / root hinzufügen:
(Das ist das Basis-Layout, wie es im Demoshop zu sehen ist)
2. JQuery Datein einbinden:
Achtung! Wenn Sie schon jQuery benutzen importieren Sie bitte nur den 2te Script.
Dieser Code muss in Sonstiges > Sonstige Einstellungen > JS Head:
<script language="javascript" type="text/javascript" src="x_js.php?j=jquery18"></script>
<script language="javascript" type="text/javascript" src="x_js.php?j=jquery-ui-c-19"></script>
3. Den SE Slider einschalten
über Sonstiges Grundeinstellungen > Punkt 9 > SE Slider auf AN
4. Die Verwaltung mit STRG + F5 neu laden und unter Layout Suchergebnis > Suchergebnis Slider den Slider wie folgt Konfigurieren:
Standard Konfiguration ist:
Das besagt, dass in allen Suchergebnissen die Slider Preis und Bewertung angezeigt werden sollen.
Die Syntax für einen Slider ist wie folgt:
[(Bedingung),
(NAME)#(DB Feldname)#(minimum)#(maximum)#(einheit),
...,
(NAME_n)#(DB Feldname_n)#(minimum_n)#(maximum_n)#(einheit_n)]
[(Bedingung_m),
(NAME_n+1)#...
]
Hier ein kleines Beispiel für ein Weinshop:
[alle,
Preis#vk#1#3000#EUR,
Bewertung#f2#0#5#Sterne
]
[aug_13,
Alkoholgehalt#x1#11#20#%
]
[ag_2,
Jahrgang#x2#1889#2012#Jahr
]
Diese Konfiguration sagt, dass immer der Slider Preis und Bewertung angezeigt werden soll. In der Aug 13 soll zudem noch der Slider Alkoholgehalt eingeblendet werden. Hier ist der Alkoholgehalts Zahl im Feld x1 gespeichert.
In der AG 2 wird dann noch ein Slider "Jahrgang" eingeblendet., die Werte dazu sind in der DB in Feld x2 gespeichert.
Sollten Sie Probleme bei der Einrichtung haben können wir Ihnen dieses Feature in der Standard Version für ca. eine viertel Stunde Aufwand einrichten. Wie oben schon angesprochen können aber auch gezielt sehr aufwendige Erweiterungen programmiert werden, die ganz auf Ihre Bedürfnisse hin auch z.B. Branchenspezifische Möglichkeiten schaffen. Sprechen Sie uns einfach dazu an.
ab heute bietet Ihnen POWERGAP eine neue Möglichkeit für die Eingrenzung des Suchergebnisses im Shop.
Der Kunde kann nun im Shop mit Hilfe von Slidern zusätzliche Dinge eingrenzen. Beispielsweise (Grafik unten) alle Artikel zwischen 10 und 300 Euro oder mit bestimmten Bewertungen. Bei Weinshops, sind z.B. Eingrenzungen für Jahrgänge oder Alkoholgehalt möglich, sofern diese in einem numerischen Feld in der Datenbank vorliegen.
Nachdem der Slider bewegt wurde, wartet das System genau eine Sekunde und ruf vom Server das neue Ergebnis ab. Wenn der Besucher etwas schneller ist, kann er mehrere Eingrenzungen auf einmal mit den Slidern einstellen, bevor die Seite sich auffrischt.
Diese Slider können mit allen numerischen Feldern aus der Artikeltabelle eingestellt werden. Denkbar sind nun auch Spezial-Programmierungen, die z.B. nachts ein bestimmtes Feld mit errechneten Werten füllen, um dann darauf eingrenzen zu können. Hierzu können Sie uns gern ansprechen, wenn Sie eigene Ideen haben.
Die Einrichtung:
1. CSS für die Slider in Layout > Schriften / CSS > all / root hinzufügen:
/* SEE Slider*/
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.ui-slider { position: relative; text-align: left; }
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; }
.ui-slider-horizontal { height: .8em; }
.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
.ui-slider-horizontal .ui-slider-range-max { right: 0; }
.ui-widget-content { border: 1px solid lightgrey; background: #FFF; }
.ui-widget-header { border: 1px solid lightgrey; background: #CCC; }
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid lightgrey; background: #E6E6E6; }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #333; background: #E6E6E6;}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #333; background: #E6E6E6; }
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {border: 1px solid #cccccc; background: #eeeeee; }
.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {border: 1px solid #333; background: #E6E6E6;}
.ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; }
.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); }
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { -moz-border-radius-topleft: 6px; -webkit-border-top-left-radius: 6px; -khtml-border-top-left-radius: 6px; border-top-left-radius: 6px; }
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { -moz-border-radius-topright: 6px; -webkit-border-top-right-radius: 6px; -khtml-border-top-right-radius: 6px; border-top-right-radius: 6px; }
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { -moz-border-radius-bottomleft: 6px; -webkit-border-bottom-left-radius: 6px; -khtml-border-bottom-left-radius: 6px; border-bottom-left-radius: 6px; }
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { -moz-border-radius-bottomright: 6px; -webkit-border-bottom-right-radius: 6px; -khtml-border-bottom-right-radius: 6px; border-bottom-right-radius: 6px; }
.ui-widget-overlay { background: #5c5c5c; opacity: .8;filter:Alpha(Opacity=80); }
.ui-widget-shadow { margin: -7px 0 0 -7px; padding: 7px; background: #cccccc; opacity: .6;filter:Alpha(Opacity=60); -moz-border-radius: 8px; -khtml-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }
.slider_see_ges{background:#FFF;border:1px solid #ddd;padding-left:15px;padding-right:15px;margin-top:10px;-khtml-border-radius:4px;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;margin-right:10px;padding-bottom:5px !important;padding-bottom:15px;}
.slider_see_werte input{border:0;background:transparent}
.slider_see_werte .dcm{width:30px;text-align:right;margin-right:4px;}
.slider_see_werte .bewer_p{width:10px;}
.slider{margin:5px 5px 15px 5px;}
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.ui-slider { position: relative; text-align: left; }
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; }
.ui-slider-horizontal { height: .8em; }
.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
.ui-slider-horizontal .ui-slider-range-max { right: 0; }
.ui-widget-content { border: 1px solid lightgrey; background: #FFF; }
.ui-widget-header { border: 1px solid lightgrey; background: #CCC; }
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid lightgrey; background: #E6E6E6; }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #333; background: #E6E6E6;}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #333; background: #E6E6E6; }
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {border: 1px solid #cccccc; background: #eeeeee; }
.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {border: 1px solid #333; background: #E6E6E6;}
.ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; }
.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); }
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { -moz-border-radius-topleft: 6px; -webkit-border-top-left-radius: 6px; -khtml-border-top-left-radius: 6px; border-top-left-radius: 6px; }
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { -moz-border-radius-topright: 6px; -webkit-border-top-right-radius: 6px; -khtml-border-top-right-radius: 6px; border-top-right-radius: 6px; }
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { -moz-border-radius-bottomleft: 6px; -webkit-border-bottom-left-radius: 6px; -khtml-border-bottom-left-radius: 6px; border-bottom-left-radius: 6px; }
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { -moz-border-radius-bottomright: 6px; -webkit-border-bottom-right-radius: 6px; -khtml-border-bottom-right-radius: 6px; border-bottom-right-radius: 6px; }
.ui-widget-overlay { background: #5c5c5c; opacity: .8;filter:Alpha(Opacity=80); }
.ui-widget-shadow { margin: -7px 0 0 -7px; padding: 7px; background: #cccccc; opacity: .6;filter:Alpha(Opacity=60); -moz-border-radius: 8px; -khtml-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }
.slider_see_ges{background:#FFF;border:1px solid #ddd;padding-left:15px;padding-right:15px;margin-top:10px;-khtml-border-radius:4px;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;margin-right:10px;padding-bottom:5px !important;padding-bottom:15px;}
.slider_see_werte input{border:0;background:transparent}
.slider_see_werte .dcm{width:30px;text-align:right;margin-right:4px;}
.slider_see_werte .bewer_p{width:10px;}
.slider{margin:5px 5px 15px 5px;}
(Das ist das Basis-Layout, wie es im Demoshop zu sehen ist)
2. JQuery Datein einbinden:
Achtung! Wenn Sie schon jQuery benutzen importieren Sie bitte nur den 2te Script.
Dieser Code muss in Sonstiges > Sonstige Einstellungen > JS Head:
<script language="javascript" type="text/javascript" src="x_js.php?j=jquery18"></script>
<script language="javascript" type="text/javascript" src="x_js.php?j=jquery-ui-c-19"></script>
3. Den SE Slider einschalten
über Sonstiges Grundeinstellungen > Punkt 9 > SE Slider auf AN
4. Die Verwaltung mit STRG + F5 neu laden und unter Layout Suchergebnis > Suchergebnis Slider den Slider wie folgt Konfigurieren:
Standard Konfiguration ist:
[alle,Preis#vk#1#3000#EUR,Bewertung#f2#0#5#Sterne]
Das besagt, dass in allen Suchergebnissen die Slider Preis und Bewertung angezeigt werden sollen.
Die Syntax für einen Slider ist wie folgt:
[(Bedingung),
(NAME)#(DB Feldname)#(minimum)#(maximum)#(einheit),
...,
(NAME_n)#(DB Feldname_n)#(minimum_n)#(maximum_n)#(einheit_n)]
[(Bedingung_m),
(NAME_n+1)#...
]
Hier ein kleines Beispiel für ein Weinshop:
[alle,
Preis#vk#1#3000#EUR,
Bewertung#f2#0#5#Sterne
]
[aug_13,
Alkoholgehalt#x1#11#20#%
]
[ag_2,
Jahrgang#x2#1889#2012#Jahr
]
Diese Konfiguration sagt, dass immer der Slider Preis und Bewertung angezeigt werden soll. In der Aug 13 soll zudem noch der Slider Alkoholgehalt eingeblendet werden. Hier ist der Alkoholgehalts Zahl im Feld x1 gespeichert.
In der AG 2 wird dann noch ein Slider "Jahrgang" eingeblendet., die Werte dazu sind in der DB in Feld x2 gespeichert.
Sollten Sie Probleme bei der Einrichtung haben können wir Ihnen dieses Feature in der Standard Version für ca. eine viertel Stunde Aufwand einrichten. Wie oben schon angesprochen können aber auch gezielt sehr aufwendige Erweiterungen programmiert werden, die ganz auf Ihre Bedürfnisse hin auch z.B. Branchenspezifische Möglichkeiten schaffen. Sprechen Sie uns einfach dazu an.
