Aufgrund einiger Anfragen, haben wir uns doch dazu entschlossen eine Schnee-Script für Magento vorzustellen. Wir zeigen Ihnen eine Lösung, mit welcher Sie innerhalb 5 Minuten ein Schnegestöber in Ihren Magento-Shop zaubern können.

Als Basis muss jQuery-Base installiert sein. Über die Backend-Einstellungen von jQuery-Base können wir das verwendete jQuery-Script jSnow einbinden.

Umsetzung

1. jQuery-Script jSnow

Downloaden Sie sich jquery.snow.js und kopieren Sie das Script in das Verzeichnis skin/frontend/default/[Ihr Theme]/js Ihres Webservers.

2. Einbinden der Javascript-Datei jquery.snow.js

Tragen Sie im Backend von magento, unter System -> Konfiguration -> JQUERY LIBRARIES -> jQuery im Bereich Javascript-Files jquery.snow.js ein.snow01

3. Aktivieren des Schneegestöbers

Tragen Sie im Backend von magento, unter System -> Konfiguration -> JQUERY LIBRARIES -> jQuery im Bereich Script1 oder Script2 folgenden Javascript-Code.

jQuery(function() {
  jQuery().jSnow( {
    flakes: 50,
    flakeCode:["•","*",'.'],
    flakeColor:["red"],
    flakeMaxSize: 30,
    flakeminSize: 12,
    fallingSpeedMax: 6,
    fallingSpeedMin: 1,
    zIndex: 1000,
   interval: 20

  });
});

snow02

Parameter:

flakes:
[Nummer] standard: 30
Die Anzahl der angezeigten Schneeflocken. Wir empfehlen zwischen 30 und 50 zu verwenden damit die Performance der Website nicht beinträchtigt wird.
flakeCode:
[Array] standard: ["•"]
Dieser Parameter definiert die Grafik und das aussehen der Schneeflocke(n). Sie können Text, Sonderzeichen-Code oder Bilder (nur GIF und PNG) verwenden.
flakeColor:
[Array] standard: ["#fff;"]
Dieser Parameter bestimmt die Farbe der Schneeflocke(n). Verwenden Sie die hexdezimale Schreibweise, zum Beispiel flakeColor:["#f00","#0f0","#00f"]
flakeMaxSize:
[Array] Nummer: 10
Die Maximale Größe der Schneeflocken in Pixel. Bei Verwendung von Bildern wird dieser Parameter ignoriert.
flakeMinSize:
[Array] Nummer: 10
Die Mindestgröße der Schneeflocken in Pixel. Bei Verwendung von Bildern wird dieser Parameter ignoriert.
fallingSpeedMax:
[Array] Nummer: 3
Maximale Geschwindigkeit, mit welcher die Schneeflocken fallen. (Pixel pro Step)
fallingSpeedMin:
[Array] Nummer: 1
Mindestgeschwindigkeit, mit welcher die Schneeflocken fallen. (Pixel pro Step)
zIndex:
[Nummer] Standard: “default”
Definition des Z-Index für die Schneeflocken. Bei Magento müssen wir das erhöhen – zum Beispiel auf 1000.
Interval:
[Nummer] Standard: 60
Mit diesem Parameter bestimmten Sie die auszuführen Steps pro Sekunden.

Zu sehen ist das auf www.demo-store.de. Zur Anschauung haben wir hier den Schnee in der Farbe rot definiert.
Nun wünsche ich viel Spaß beim Experimentieren mit den Einstellungsparametern.

Viele Grüße
Johannes Teitge