5 jQuery Plugins für WooCommerce

jQuery ist ein Framework für Javascript. Es soll den Entwicklern die Arbeit erleichtern und stellt dafür eine vereinfachte Syntax bereit. In den letzten Jahren hat sich jQuery schon zum Quasi-Standard für die cross-browser-kompatible Umsetzung von Effekten und Animationen im Web etabliert. Auch wenn durch den steigenden Browser-Support von CSS3 mittlerweile vieles auch ohne JavaScript erledigt werden kann, bin ich froh jQuery als Teil meiner Werkzeugkiste zu wissen.

jQuery Plugins

Als Nutzer von WordPress und WooCommerce ist euch der Begriff „Plugin“ geläufig. In jQuery handelt es sich dabei im wesentlichen um gekapselte Funktionen, die einen bestimmten Zweck erfüllen sollen. Ihr kennt das sicherlich von einigen großen Online Shops, oder auch von direkten Konkurrenten. MegaMenüs, aufwändige Animationen beim Überfahren von Elementen mit der Maus, umfangreiche Slider und Carousel-Objekte und vieles mehr.

In meiner täglichen Arbeit bei der Umsetzung von individuellen WooCommerce-Lösungen bin ich natürlich öfter mit umfangreichen Ansprüchen von Kunden konfrontiert und habe mir über die Zeit eine kleine Liste an hilfreichen jQuery-Plugins zusammengestellt, die ich nun mit euch Teilen möchte.

Backstretch

Mit dem jQuery Backstretch Plugin könnt ihr eueren Elementen Hintergrundbilder hinzufügen.
Dabei sorgt das Plugin dafür, dass das Element den gesamten Container dem es zugewiesen wird ausfüllt. Dieses Plugin setzte ich relativ häufig ein. Gerade bei der Umsetzung von Startseiten mit diversen Teasern oder der Arbeit mit großen Hintergrundbildern ist diese Lösung Gold wert. Responsive? Klar, Backstretch passt das Bild für jeden möglichen Viewport an und ihr könnt euch um andere Dinge kümmern.

Das Plugin besorgt ihr euch am besten gleich auf Github unter Backstretch

Vide

Ein aktueller Trend, nicht nur im E-Commerce, ist der Einsatz von Fullscreen-Videos. Hier eine Lösung zu finden, die auch in allen gängigen Browsern gut funktioniert, ist nicht einfach. Ich nutze dafür das jQuery-Plugin Vide. Vide unterstützt alle gängigen Browser (IE9+). Dazu müsst ihr nur eure Videos in den entsprechenden Formaten bereitstellen. Dazu nutzt ihr am besten diesen kleinen Online-Konverter: cloudconverter. Ein praktisches Anwendungsbeispiel von Vide findet ihr übrigens direkt auf unserer Startseite.

Die aktuelle Version von Vide gibt es natürlich bei Github: Vide

Unslider

Jeder Online-Shop möchte seine Produkte bestmöglich präsentieren. Ein häufiger Anwendungsfall hierfür ist der Einsatz eines Carousels. Viele der aktuellen WooCommerce-Plugins sind hier sehr mit Werbung überladen, oder bringen bereits umfangreiche Style-Angaben mit, die nur in den seltensten Fällen zum Design eures WooCommerce Shops passen. Das stört den Entwickler nicht weniger, als den Shop-Betreiber. Aus diesem Grund suchte ich nach einer möglichst cleanen Möglichkeit der Umsetzung für Carousels. Fündig wurde ich beim jQuery Plugin Unslider. Dieses kleine Plugin (2,6KB) ermöglicht die schnelle und einfache Umsetzung von Carousels – ohne tausende Optionen, die man in der Regel nicht benötigt.

Ihr findet alles Wissenswerte zu Unslider direkt auf der passenden Website dazu: Unslider.

Theia Sticky Sidebar

Das jQuery Plugin Theia Sticky Sidebar ermöglicht es euch eure Elemente in Bezug zu diversen Abhängigkeiten zu fixieren und mitscrollen zu lassen. Am einfachsten lässt sich das an Hand einer Sidebar erklären: Ihr habt auf euerer Produktseite den Summary-Bereich (Preise, Kurzbeschreibung, Kaufen-Button) und möchtet diesen ab einem bestimmten Punkt fixieren (z.B. weil eure Produktbeschreibung sehr lang ist. Mit Hilfe dieses Plugins könnt ihr den Zeitpunkt bestimmen, ab wann euer Summary-Bereich ein fixiertes Element wird. Außerdem lässt sich dieser Effekt auch wieder aufheben (z.B. weil das Ende der Produktseite erreicht ist).

Diesen Effekt gibt es bereits als fertiges WordPress-Plugin bei CodeCanyon: Theia Sticky Sidebar. Das jQuery-Plugin findet ihr wie üblich bei Github.

StickUp

In den meisten Online Shops ein Bonuspunkt für die Usability: eine fixierte Navigation am oberen Bildschirmrand. Das erreicht ihr mit dem jQuery-Plugin StickUp. Da eine reine Fixierung am oberen Bildschirm auch mit Hilfe von CSS ermöglicht werden würde, wozu dann StickUp verwenden? StickUp kann mehr als nur die einfache Fixierung. Ihr könnt selbst bestimmen zu welchem Zeitpunkt die Navigation „sticky“ werden soll, so z.B. erst, wenn der User den aktuellen Above-the-Fold-Bereich verlässt. Außerdem könnt ihr farbliche Anpassungen an der Navigation vornehmen, da Stickup dynamisch weitere Klassen hinzufügt, sobald der Trigger einsetzt. So könnt ihr z.B. eure Navigation zunächst transparent gestalten und sobald die Navigation am oberen Rand fixiert wird, diese in z.B. weiß einfärben.

Ihr findet das Plugin auf der eigenen Github-Seite: StickUp.

Wie integriere ich das in meinen WooCommerce-Shop?

Der Vorgang unterscheidet sich natürlich von Plugin zu Plugin. Ein erster Anlauf-Punkte sollte bei allen Lösungen die verlinkte Github-Seite sein. Dort erhaltet ihr eine kurze Instruktion zum Einbau und der Funktionsweise des Plugins. Eine potenzielle Fehlerquelle möchte ich allerdings vorweg nehmen. Die Einbindung des Scriptes in WordPress.

wp_enqueue_script
WordPress stellt dafür diese Funktion bereit. Eine genaue Erläuterung dazu findet ihr im WP-Codex: wp_enqueue_script.