To-Top Link: Einführung

Um die Usability des Shops zu verbessern eignet sich ein To-Top Link besonders. Damit entfällt das lästige nach oben Scrollen beim Durchsehen längerer Produktbeschreibungen.

Wir wollen hier nicht nur einen einfachen Textlink erstellen. Denn das könnten Sie recht einfach in das Template von Magento integrieren. Folgende Anforderungen stelle ich an meinen To-Top Link.

1. Der Link soll beim Scrollen immer sichtbar sein (Wie “Speichern” im Backend von Magento)
2. Der Link soll nur sichtbar sein, wenn gescrollt wird
3. Das Ein- und Ausblenden mit Fade-Effekt
4. Der Link soll als grafischen Button dargestellt werden
5. Bei MouseOver soll der Button animiert werden
6. Beim Klick auf den Button möchte ich ein “Smooth” Scrolling
7. Enden soll das Scrolling mit einem Bounce-Effekt
8. Der Einsatz für mehrere Sprachen soll berücksichtigt werden

Nachdem wir die Bedingungen zur Erstellung unseres To-Top Links kennen, nun die Überlegungen zur Umsetzung. Zuerst brauchen wir die grafische Umsetzung für den Button. Diese werden wir in Photoshop erstellen und die einzelnen Teile des Buttons als PNG-Bilder speichern. Alle Aktionen wie das Fading, MouseOver, Scrolling  sowie das Bouncing  werden wir mit JQuery umsetzen.

Dieses Umsetzung werde ich in folgende Kapitel unterteilen:

1. Bilder in Photoshop erstellen
2. jQuery - Scrolling
3. jQuery - Button-Animation
4. Umsetzung in Magento

Das Ergebnis sehen Sie in unserem Demoshop http://shop.mxperts.de oder www.toysonline.ch beim Scrollen.

2 Kommentare to “To-Top Link: Einführung”

1. jQuery in Magento integrieren | Magento Experts sagt:

   30. Mai 2009 um 18:34

   [...] nun können Sie mit jQuery-Scripten in Ihrem Magento-Shop arbeiten. In weiteren Workshop (wie z.B. http://www.mxperts.de/to-top-link-einfuhrung/) werden wir noch einiges mit jQuery [...]

   Zum Antworten anmelden
2. ds_1984 sagt:

   1. Juni 2009 um 15:28

   Schöne Einführung die Lust auf mehr macht.

   Zum Antworten anmelden