Page Peel Effekt / Werbung in der Ecke

Der Blog www.sohtanaka.com zeigt in einem Beitrag, wie man ohne Flash einen Page Peel Effekt erstellen kann. Das ist eine schöne Funktion um Marektingaktion zu unterstreichen, oder um z.B. auf RSS-Feeds oder die Newsletteranmeldung hinzuweisen.

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

Ich habe die Daten so aufbereitet, damit das ganze in Magento funktioniert und innheralb weniger Minuten eingerichtet ist.
Der Vorteil dieser Variante - man kommt ohne Flash aus und reduziert die Kundengruppe nicht auf Benutzer die das Flash-Plugin installiert haben.

Umsetzung

Wir erstellen in unserem Skin eine Javascript-, sowie eine CSS-Datei und fügen den Page-Peel Code in unsere Template.
Ich verwende hier das Default Interface & Theme. Dies müssen Sie natürlich an Ihren Shop anpassen!

1. Datei: skin\frontend\default\default\js\jquery.pagepeel.js

jQuery(document).ready(function(){
  //Page Flip on hover
	jQuery("#pageflip").hover(function() {
		jQuery("#pageflip img , .msg_block").stop()
			.animate({
				width: '307px',
				height: '319px'
			}, 500);
		} , function() {
		jQuery("#pageflip img").stop()
			.animate({
				width: '50px',
				height: '52px'
			}, 220);
		jQuery(".msg_block").stop()
			.animate({
				width: '50px',
				height: '50px'
			}, 200);
	});
});

2. Datei: skin\frontend\default\default\css\jquery.pagepeel.css

#pageflip {
	position: relative;
	right: 0; top: 0;
	float: right;
	z-index: 10000;
}
#pageflip img {
	width: 50px; height: 52px;
	z-index: 99;
	position: absolute;
	right: 0; top: 0;
	-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
	width: 50px; height: 50px;
	overflow: hidden;
	position: absolute;
	right: 0; top: 0;
	background: url(../images/subscribe.png) no-repeat right top;
}

3. Folgende Bilder müssen in den Ordner skin\frontend\default\default\images:

page_flip.png

subscribe.png

4. CSS & Jacascript integrieren - Datei app\design\frontend\default\default\layout\page.xml
Fügen Sie folgende Zeilen:

<action method="addItem"><type>skin_js</type><name>js/jquery.pagepeel.js</name></action>
<action method="addCss"><stylesheet>css/jquery.pagepeel.css</stylesheet></action>

vor die Zeilen

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

5. Nun müssen Sie noch das Template app\design\frontend\default\default\template\page\html\header.phtml anpassen. Fügen Sie die folgende Zeilen unter den Kommentarblock nach ?> ein.

...
	<div id="pageflip">
		<a href="http://www.mxperts.de/feed/"><img src="<?php echo $this->getSkinUrl('images/page_flip.png'); ?>" alt="" /></a>
		<div class="msg_block"></div>
	</div>
...

Für Ihre eigenen Aktionen passen Sie das href-Attribut aus dem A-Tag an und ersetzen Sie die Datei subscribe.png mit Ihrer erstellten Grafik.

Danach sollte das Script auch schon funktionieren -> http://shop.mxperts.de, www.toysonline.ch.
Nun kann man das ganze natürlich noch erweitern, indem man daraus eine Erweiterung erstellt und über das Backend den Link, die Grafik und den Status der Funktion editieren kann. Aber das überlasse ich Euch

7 Kommentare to “Page Peel Effekt / Werbung in der Ecke”

1. uws sagt:

   5. August 2009 um 10:54

   Jau, das ist mal ein richtig feines Gimmick. Ich habs mal eingebaut, aber die subscribe.png wird nicht angezeigt und beim oeffnen der ecke wird der header nach rechts verschoben. Woran kann das liegen?

   Zum Antworten anmelden
   • Johannes Teitge sagt:

     5. August 2009 um 11:04

     Hallo,

     was für ein Template nutzt Du? Passt das bei Dir mit dem CSS? Eventuell mal Link senden.

     Gruß
     Johannes Teitge

     Zum Antworten anmelden
2. uws sagt:

   5. August 2009 um 11:13

   tja, den ganzen Code noch mal geprueft und nun gehts. Also, herzlichen Dank fuer die tollen Tipps und Tricks auf dieser Seite.

   Zum Antworten anmelden
3. ds_1984 sagt:

   12. August 2009 um 12:12

   Also ich hatte das gleiche Problem, es lag bei mir am Caching - ganz klar, also nicht am Tutorial & dem Code.

   In meinem Beispiel wird die Ecke anders platziert, kann auch ganz nett sein.
   http://www.tutorials.golox.eu/

   Läuft & sieht gut aus - Danke!

   Daniel

   Zum Antworten anmelden
4. selsys sagt:

   14. August 2009 um 13:37

   Hallo,

   Ich habe es so wie beschrieben eingebaut, aber dann wird mir nur das quasi zugeklappte Pagepeel gezeigt, das sich nicht ausrollt beim hovern.
   Beim draufklicken geht dann der neue Link auf..
   IE und FF zeigen jeweils einen Javascriptfehler in Zeile 1 an.

   Woran könnte sowas liegen?

   Zum Antworten anmelden
   • selsys sagt:

     14. August 2009 um 16:15

     HalloHat sich erledigt, lag an einem Fehler von mir

     Zum Antworten anmelden
   • Johannes Teitge sagt:

     14. August 2009 um 21:36

     Schön dass es doch noch geklappt hat - danke für das Feedback.

     Gruß
     Johannes Teitge

     Zum Antworten anmelden