Wenn Sie Produkte mit Sonderpreisen versehen, möchten Sie mit diesen Produkten auch den Absatz erhöhen. Um dies zu erreichen sollten diese Produkte bereits im Produktlisting besonders ausgezeichnet werden. Die Anzeige des durchgestrichenen alten Preises und zum Vergleich den neuen Preis reicht dafür nicht mehr aus. Wir benötigen für das Auge des Betrachters ein deutliches STOPP.

Beispiele für die Umsetzung:

Um die Aufgabe zu lösen umgeben wir das Bild mit einem DIV-Tag. Innerhalb dieses DIV’s befindet sich die Auszeichnung und das Produktbild. Per CSS können wir die Auszeichnung über das Produktbild positionieren.

Pseudocode:

<div>
 <IMG src=“sonderpreis_auszeichnung.gig“>
 <IMG src=“produktbild.jpg“></div>

Umsetzung

Schritt 1: Das Produktlisting für List-Mode erweitern

Öffnen Sie die Datei app\design\frontend\default\blank\template\catalog\products\list.html und suchen Sie nach dem Code <?php // Product Image ?> (ca. Zeile 47).
Den darunter liegenden Code bis zu <?php // Product description ?> ersetzen.

<div class="product-image">
 <?php // Product Image ?>
 <? if ( ($_product->getFinalPrice() - $_product->getPrice()) < 0) { ?>
 <img class="special_image" src="<? echo $this->getSkinUrl('images/special_price.png'); ?>">

 <? } ?>
 <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>">
 <img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135, 135); ?>" width="135" height="135" alt="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" /></a></div>

Schritt 2: Das Produktlisting für Grid-Mode erweitern

Öffnen Sie nochmals die Datei app\design\frontend\default\blank\template\catalog\products\list.html und suchen Sie nach <?php // Grid Mode ?>. Den 8 Zeilen darunter liegenden Code nach <td> bis zu <h3 class=“product-name“> … ersetzen mit:

<div class="product-image">
 <?php // Product Image ?>
 <? if ( ($_product->getFinalPrice() - $_product->getPrice()) < 0) { ?>
 <img style="special_image" class="special_image" src="<? echo $this->getSkinUrl('images/special_price.png'); ?>">

 <? } ?>
 <a class="product-image" href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>">
 <img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135, 135); ?>" width="135" height="135" alt="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" /></a></div>

Download der fertigen list.phtml

Schritt3: Erstellen der Grafik

Als Beispiel habe ich eine Grafik in Adobe Illustrator erstellt. In Photoshop wurde die Datei mit einem Schlagschatten verssehen und als PNG abgespeichert.

Download der Beispielgrafik (.ai,.psd,.png): images_specials.zip

Kopieren Sie die Datei special_price.png in den Ordner skin\frontend\default\blank\images

Schritt 4: CSS-Formatierung

Öffnen Sie die Datei skin\frontend\default\blank\css\style.css und fügen Sie folgenden CSS-Code hinzu.

/* Label for Special-Price ==================== */
.special_image {
 position: absolute;
 z-index:1;
 margin: -3px 0 0 95px;
}
/* ============================================ */

Um die Position der Grafik zu ändern, müssen Sie das Attribute margin ändern. Die CSS-Syntax lautet: margin: [oben] [recht] [unten] [links]

Das war es – nun sollte Ihr Label bei Produkten mit Sonderpreisen erscheinen Beispiel: http://www.toysonline.ch/marken/scout.html. Wer möchte kann seine Varianten als Kommentar hier vorstellen.