Wieder einmal möchte ich zeigen wie man mit jQuery und wenigen Zeilen Code viel bewirken kann.

Damit unsere Produkte besser/edler in Szene gesetzt werden, möchte ich einen Spiegeleffekt haben. Anstatt die Produkte einzeln zu bearbeiten soll jQuery diese Tätigkeit für uns übernehmen .
Wie schön – es gibt dafür ein Plugin auf www.digitalia.be.

Voraussetzung: Installation von jQuery Base oder manuelle Installation von jQuery.

Die Umsetzung ist sehr einfach. Wir müssen nur das JQuery-Plugin einbinden, im Produktlisting die Bilder mit der Klasse “reflection” versehen und das Plugin aufrufen.

Umsetzung

1. Plugin einbinden
Kopieren Sie die Datei reflection.js nach skin/frontend/[ihr interface]/[ihr theme]/js/
Sie finden alle Dateien als ZIP-Download am Ende dieses Tutorials.

Öffnen Sie die Datei app/design/frontend/[ihr interface]/[ihr theme]/layout/page.xml und fügen Sie folgende Zeile

<action method="addItem"><type>skin_js</type><name>js/reflection.js</name></action>

vor die Zeile

<action method="addItem"><type>skin_css</type><name>css/iestyles.css</name><params/><if>lt IE 8</if></action>

2. list.phtml anpassen
Öffnen Sie die Datei app/design/frontend/[ihr interface]/[ihr theme]/templates/catalog/product/list.phtml. Die folgenden Änderungen beziehen sich auf das Default-Template aus Magento Version 1.3.2.2.

In Zeile 51 und 99 fügen Sie das Attrribut class=”reflection” hinzu

...
  <img class="reflection" src="<?php echo  ...
...

vor der Funktion getToolbarHtml() rufen wir das Reflection-Plugin auf.

...
</div>

<?php endif; ?>

   <script type="text/javascript">
     jQuery(document).ready(function(){
       jQuery(".product-image a img").reflect();
     });
   </script>

<?php echo $this->getToolbarHtml() ?>
<?php endif; ?>

wenn Sie möchten können Sie die Parameter Höhe und Transparenz anpassen. Der Aufruf erfolgt dann wie folgt.

       jQuery(".product-image a img").reflect({height:0.1,opacity:0.50});

Testen können Sie die Parameter auf der Website der Herstellers.

Ansehen könnt Ihr es auf unserer Testinstallation unter www.demo-store.de.

ACHTUNG: Wenn Sie das modern Theme einsetzen, ändert sich der Aufruf in:

...
jQuery("a.product-image img").reflect();
...