Der letzte Schrei im Bereich Visual Layer in eCommerce-Shops ist der Crossover-Effekt für Produktfotos auf Kategorieseiten. Heute werden wir diese Lösung in wenigen, einfachen Schritten für einen auf der Magento-Plattform basierenden Shop implementieren. Darüber hinaus werden wir dafür keine einzige in JavaScript geschriebene Zeile verwenden.
1. Attribut
Dieses Tutorial setzt voraus, dass Attribute verwendet werden können, die für jedes Produkt bereits standardmäßig durch Megento hinzugefügt wurden. Um ein zusätzliches Foto auf der Kategorieseite anzuzeigen, wird das Attribut „Thumbnail“ verwendet. Die Produkte werden nun bearbeitet, indem die gewünschten Fotos den Produkten hinzugefügt und ihr Typ auf Thumbnail eingestellt wird:
2. Kopieren der Kategorievorlagendatei
Wenn das Attribut verwendet werden kann und die Bilder für alle Produkte eingestellt sind, ist es an der Zeit, sie auf der Kategorieseite anzeigen zu lassen. Zu diesem Zweck wird, wenn ein eigenes Vorlagenpaket verwendet wrid, überprüft, ob die Datei list.ptml an einem der folgenden Orte vorhanden ist:
app/design/frontend/[Paketname]/[Vorlagenname]/template/catalog/product/
app/design/frontend/[Paketname]/default/template/catalog/product/
Wenn diese Datei zuvor bearbeitet wurde, ist sie sicherlich dort zu finden. Sollte das der Fall sein, kann mit Schritt 3 fortgefahren werden. Sollte diese Datei allerdings nicht an einem der oben genannten Orte aufzufinden sein, ist sie an einen dieser Orte zu kopieren. Zu diesem Zweck navigiert man in das Paket Base: app/design/frontend/base/default/template/catalog/product/ und kopiert die Datei list.phtml hinein. Es ist darauf zu achten, dass die Ordnerstruktur beibehalten wird. Am Ende sollte folgende Struktur vorliegen:
app/design/frontend/[Paketname]/[Vorlagenname]/template/catalog/product/list.phtml
bzw.
app/design/frontend/[Paketname]/default/template/catalog/product/list.phtml
In dieser Datei ist der Code zu finden, der für die Kategorieansicht, sowohl Raster- als auch Listenansicht, zuständig ist.
3. Anpassung der Kategorievorlage
Nach dem Öffnen der Datei list.phtml im bevorzugten Editor ist der Teil des Codes, der das Bild des Produktes anzeigt, zu suchen. In Magento 1.9.0.1 beginnt der Teil im Paket Base für die Listenansicht in Zeile 50 und sieht in etwa folgendermaßen aus:
<code><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135); ?>" width="135" height="135" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" /></a></code>
Es sieht zwar nicht sehr elegant aus, funktioniert aber ;) Dieser Teil des Codes wird nun zur Organisation und zum Hinzufügen der neuen Bilder in der Ansicht direkt über den bereits vorhandenen Bildern leicht angepasst:
<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>">
<?php if($_product->getThumbnail()): ?>
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail')->resize(135); ?>" width="135" height="135" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'thumbnail'), null, true) ?>" />
<?php endif;?>
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135); ?>" width="135" height="135" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
</a>Hinweis: Der angegebene Code ist ein Auszug aus einer Originalvorlage, sodass sich die Größe der Bilder von der Größe der Beilder in einem anderen Paket unterscheiden kann. Der neue Teil des Codes ist an die Größe der eigenen Bilder anzupassen.
4. Noch ein wenig Zauberei – CSS
Vorrausetzung ist, dass der Speicherort der CSS-Datei bekannt ist, die das Aussehen des Shops definiert. Es müssen nun lediglich nur noch einige wenige Zeilen am Ende der Datei hinzugefügt werden:
.product-fade-image-wrapper {
position: relative
}
.product-fade-image + img {
position: absolute;
top: 0;
left: 0;
opacity: 1;
transition: opacity .4s ease-out
}
.product-fade-image + img:hover {
opacity: 0Nach dem Speichern mit Strg+S kann man nun den wunderschönen Crossfader-Effekt auf der Kategorieseite bewundern.
5. Rasteransicht
Da sich die Seite mit der Listenansicht bereits wie gewünscht verhält, ist die gleiche Lösung nun auch für die Rasteransicht zu implementieren. Bei der Originalvorlage des Pakets Base ist der Code in Zeile 95 zu finden. Nun ist noch einmal folgender Teil anzupassen:
<code><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135); ?>" width="135" height="135" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" /></a></code>
in:
<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>">
<?php if($_product->getThumbnail()): ?>
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail')->resize(135); ?>" width="135" height="135" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'thumbnail'), null, true) ?>" />
<?php endif; ?>
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135); ?>" width="135" height="135" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
</a>
