

Sehr geehrte Kunden,
das heutige Update stellt Ihnen eine schöne Möglichkeit vor dem Besucher in den Suchergebnissen einen Button anzubieten, über den er eine Schnellansicht eines Artikels im Highslide öffnen kann!
Die Schnellansicht kann aber nur dann genutzt werden, wenn auch das "Artikeldetailanzeige per HTML-Template" (http://www.powergap.de/forum/index.php?topic=800.0) aktiv ist und genutzt wird!
Der Vorteil macht sich besonders bei visuell geprägten Einkäufen für den Besucher bemerkbar. Beispielsweise in Mode-Shops. Denn "Klicks" in eine Artikeldetailanzeige sind ja eigentlich etwas nervig, wenn man z.B. bei Artikeln aus dem Bereich Mode nicht wirklich viele Informationen abrufen möchte, sondern einfach nur ein paar zusätzliche Bilder (z.B. Vergrößerungen) oder man sich ggfl. schon entschieden hat und nur noch Farbe und Größe auswählen möchte, um den Artikel in den Warenkorb zu legen. Wenn das passiert ist, dann kann man bei einer Schnellansicht auch viel bequemer weiter blättern im zuvor angeschauten Suchergebnis und muss nicht wieder mühsam zurück klicken.
Die Schnellansicht haben wir so entwickelt, dass diese von den Suchmaschinen nicht beachtet wird. Diese sollen ja weiterhin nur den optimierten Content der vollständigen Artikeldetailanzeige spidern. Die Schnellansicht hat dazu den Canonical-Eintrag der bisherigen Artikeldetailanzeige. Um ganz sicher zu gehen, sollten Sie das neue Skript sa.php über Sonstiges > Server > Pflege robots.txt mit dem Eintrag:
Disallow: /sa.php
für die Suchmaschinen sperren. Für alle Neuinstallationen stellen wir das ab sofort so ein, allerdings ist es uns nicht möglich das händisch in allen produktiven Shops einzutragen. Wir bitten da um Ihre Mithilfe.
Hier ein Beispiel für einen solchen Button in einem Suchergebnis:

und das Highslide:

Die Schnellansicht hat natürlich ein eigenes Design, was sich ganz individuell per Template anpassen lässt. Auch die gewohnte Blättern-Funktion (wenn aktiviert) ist in dem Highslide eingebunden, damit der Besucher aus der Kategorie oder dem Hersteller bequem durchblättern kann. Das Blättern passiert dabei sehr schnell, das die Seiten ja deutlich schlanker sind. Sprich besonders bequem zum schnellen Stöbern in einem Modeshop.
Legt man den Artikel in den Warenkorb, sollte man die Funktion Layer nach Schritt "in den Warenkorb" nutzen. In dieser Kombination sieht es auch in Sachen Usability optimal aus:

Die Einrichtung dieser Funktion ist etwas aufwendiger. Denn über Layout > Artikelanzeige > Template > Pflege muss zunächst ein auf das eigene Shopdesign angepasstes neues Template entwickelt werden. Man legt also ein neues Template an. Synonyme siehe www.powergap.de/forum/index.php?topic=249 .
Hier ein einfacher Beispielcode, wie er in dem Beispiel oben verwendet wird:
<div id="a_#form" name="a_#form" style="border: 0px solid #000000; width:800px;">
<table width="800" border="0" cellpadding="3" cellspacing="0"><tr><td valign="top" rowspan="4">
<table cellspacing=0 cellpadding=0 style="border: 1px solid #DDDDDD;margin-top:5px;"><tr><td align=center>
<div id="preview_ct" class="ada_p_pic">#pic</div>
</td></tr>
<tr><td><div class="mini_img_ct">#mini_farben<img src="img/l1.gif" height=62 width=1></div></td></tr>
</table>
</td>
<td valign=top>#artikel_name1<img src="img/l1.gif" width="3" height="1" alt=""><span class="b">Art.-Nr.: #anr</span></td></tr>
<tr><td valign=top colspan="2"><div style="margin-left:12px;">#basket</div>
<div style="margin:10px;">#artikel_text</div></td></tr></table>
</div>
<table width="800" border="0" cellpadding="3" cellspacing="0"><tr><td valign="top" rowspan="4">
<table cellspacing=0 cellpadding=0 style="border: 1px solid #DDDDDD;margin-top:5px;"><tr><td align=center>
<div id="preview_ct" class="ada_p_pic">#pic</div>
</td></tr>
<tr><td><div class="mini_img_ct">#mini_farben<img src="img/l1.gif" height=62 width=1></div></td></tr>
</table>
</td>
<td valign=top>#artikel_name1<img src="img/l1.gif" width="3" height="1" alt=""><span class="b">Art.-Nr.: #anr</span></td></tr>
<tr><td valign=top colspan="2"><div style="margin-left:12px;">#basket</div>
<div style="margin:10px;">#artikel_text</div></td></tr></table>
</div>
Über Layout > Artikelanzeige > Template > Zuweisung kann man ebenso per Regelwerk das Design des Template sogar je AG, AUG, usw.. separat gestalten:

Achten Sie darauf, dass es schlicht ist. SCHNELLansicht bedeutet, dass der Besucher da keine Romane lesen möchte und auch keine Details. Diese Ansicht sollte gegenüber der Standard-Artikeldetailanzeige deutlich schlanker sein. Nur dann würde diese Funktion auch Sinn machen. Letztendlich kann man zumindest bei Modeshops, sogar auf einen beschreibenden Text verzichten. Denn hier zählen am meisten ja nur die Bilder..
In dem Template kann man auch Module einschalten, die dort sicher keinen Sinn machen. Beispiel Bewertungen. Bei vielen dieser Module haben wir die Verlinkung nicht umprogrammiert. Würde man diese also einblenden und der Kunde klickt auf den Link, dann öffnet sich innerhalb des Highslides der gesamte Shop! Falls Sie da eines der Module aber benötigen, müssten wir für Sie zunächst etwas umprogrammieren, damit sich der Link eben über target="_top" öffnet. Da der Aufwand bei so vielen Modulen zu groß für dieses Projekt gewesen wäre, können wir das also nur individuell für Sie anbieten, wenn denn mal Bedarf besteht.
Über Layout > Suchergebnis > Template muss nun auch noch der Button "Schnellansicht" eingefügt werden. Hier ein Beispielcode:
<div style="display:none;" id="se_info_#anr">
<a href="#sa_link" rel="nofollow" onclick="return hs.htmlExpand(this, { objectType: 'iframe', width: 880, height: 650, dimmingOpacity: 0.70, align: 'center' } ) "><img src="img/details_sa.gif" alt="Schnellansicht" title="Schnellansicht" style="border: 0px;"></a><br>
</div>
<a href="#sa_link" rel="nofollow" onclick="return hs.htmlExpand(this, { objectType: 'iframe', width: 880, height: 650, dimmingOpacity: 0.70, align: 'center' } ) "><img src="img/details_sa.gif" alt="Schnellansicht" title="Schnellansicht" style="border: 0px;"></a><br>
</div>
Das Synonym #sa_link erzeugt den entsprechenden Link für die Schnellansicht. Das Highslide kann wie üblich an eigene Vorstellungen im Design und der Größe angepasst werden.
Damit dieser Button nur dann erscheint, wenn man mit der Maus über dem jeweiligen Artikel steht, muss das <DIV>, das das gesamte Template einschließt, folgender Code angehängt werden:
onmouseover="document.getElementById('se_info_#anr').style.display = '';" onmouseout="document.getElementById('se_info_#anr').style.display = 'none';"
D.h. alt statt:
<div style="border:1px solid #EEEEEE; width:340px;">.......</div>
neu so:
<div style="border:1px solid #EEEEEE; width:340px;" onmouseover="document.getElementById('se_info_#anr').style.display = '';" onmouseout="document.getElementById('se_info_#anr').style.display = 'none';">.......</div>
Die Einrichtung bieten wir Ihnen natürlich auch an, falls Sie das nicht selbst machen möchten. Angepasst an Ihr CI schätzen wir den Aufwand bei nur einem Template auf ca. 30 Minuten. Aufwändiger wird es nur, wenn man z.B. je Artikelgruppe eigene separate Template benötigt. Bei Weinshops, die unterschiedliche Foto-Formate je AG nutzen ist das beispielsweise nötig.