Tutorial: Einbinden einer Artikel-Zoomfunktion

In diesem Beitrag möchte ich Ihnen erklären, wie Sie mit etwas Verständnis für HTML/JavaScript eine Artikel-Zoomfunktion in Ihren plentymarkets-Webshop einbauen können. Besonders bei Fashion- oder Lifestyle-Produkten ist eine Zoomfunktion sehr vorteilhaft, um dem Käufer mit einem vergrößerten Artikelbild einen besseren optischen Eindruck der Ware vermitteln zu können.

Einpflegen der benötigten Dateien

Die Zoomfunktion benötigt zwei Plugin-Dateien für das JavaScript-Framework jQuery, welches im plentymarkets-Webshop bereits geladen wird:

• jquery.jqzoom-core-pack.js
• jquery.jqzoom.css

Beide Dateien können Sie zusammen mit einigen Beispielanwendungen über den folgenden Link herunter laden: Download
Hinweis: Sie benötigen WinZip zum Entpacken der Datei.

Laden Sie die benötigten Dateien auf ihren Webspace. Dafür loggen Sie sich in ihr plentymarkets-System ein und öffnen dort das Menü Start > Webspace. Melden Sie sich nun im AjaxPlorer mit Ihren plentymarkets-Logindaten an. Laden Sie die zwei benötigten Dateien hoch.

Tipp: Wenn Sie die Zoomfunktion in mehreren Multishops nutzen möchten, laden Sie die Dateien in das Verzeichnis layout und legen dort einen neuen Ordner an. Dieser ist von jedem Multishop aus erreichbar.

Einbinden der jQuery Plugin Dateien

Damit die jQuery Plugins im Webshop eingesetzt werden können, müssen sie nun im gewünschten Layout eingebunden werden.

Öffnen Sie das Menü Layout > Layout-Generator. Im Dropdown-Menü Seiten-Layout wählen Sie das Template MainLayoutContent.

Dort fügen Sie bitte im Bereich [ MainLayout_Content_AdditionalMeta ] den folgenden Code ein:

 

 

Achten Sie hier darauf, den Pfad /layout/js/ anzupassen, falls Sie die Dateien in einem anderen Ordner gespeichert haben.

Einbindung in SingleArticle

Wir gehen hier davon aus, dass Sie die Zoom-Funktion in ihrer Artikel-Detailansicht verwenden. Öffnen Sie nun im Menü Layout > Layout-Generator unter Artikelansichten das Template SingleArticle.

Dort fügen Sie nun folgenden Code ein:

 

 

Hinweis: Die Erklärung der einzelnen Parameter folgt zum Schluss dieses Tutorials.

Als nächstes müssen Sie ihr Produktbild folgendermassen aufbauen:

$MiddleSizeImage1

Die class="jqzoom" sorgt dafür, dass unser JavaScript "weiß", welches Bild für den Zoom verwendet werden soll. Die Angabe rel="gal1" wird hingegen nur verwendet, wenn Sie mehr als ein Produktbild anzeigen möchten. Sollte dies der Fall sein, müssen auch die anderen Bilder ihrer SingleArticle-Seite erweitert werden.

Als Beispiel dient uns der folgende Code.

usw.

Hervorheben des aktiven Bildes

Um Ihren Kunden den größtmöglichen Komfort zu gewährleisten, sollten Sie noch das aktuelle Bild farblich hervorheben. Dies können Sie relativ einfach über CSS regeln. Der jQuery-Zoom setzt auf das momentan aktivierte Artikelbild automatisch die CSS-Class zoomThumbActive. Öffnen Sie dazu die CSS-Datei Ihres Shopsystems im Menü Layout > Layout-Generator und klicken Sie dort auf den Link CSS. Dieser befindet sich direkt unter der normalen Navigationsleiste. Dort fügen Sie einfach folgenden Code ein:

.zoomThumbActive { border:1px solid red;}

Nun besitzt das aktuelle Bild einen roten Rahmen, was ihn von den anderen Thumbs unterscheidet.

Resultat

Als Ergebnis könnte ihr Bilder-Zoom dann z.B. so aussehen:

 

Die Parameter kurz erklärt

zoomType: 'reverse'
Der jQuery-Zoom hat mehrere Darstellungsoptionen, was die Interaktivität des Users mit dem Bild betrifft. Revers heißt in diesem Fall, dass das Bild abgedunkelt wird bzw. mit einem Schleier versehen wird und nur ein kleiner Bereich des Bildes original dargestellt wird. Als Alternative stehen Ihnen zur Verfügung: drag, innerzoom und standard. Testen Sie am besten alle durch, um die für Sie optimale Einstellung zu finden.

lens:true
Diese Option aktiviert oder deaktiviert die kleine "Lupe", die erscheint, sobald Sie mit der Maus über das Bild fahren. Weitere Option: false

preloadImages: true
Diese Option sorgt dafür, dass die großen Produktbilder bereits beim Laden der Seite vorgeladen werden. Man verhindert so den unschönen Effekt, dass Bilder, während der Besucher auf der Detailseite ist, nachgeladen werden müssen.

alwaysOn:false
Wenn Sie diese Option auf true setzen, wird das Fenster, in dem die Vergrößerung stattfindet, dauerhaft angezeigt.

title:false
Wenn Sie diese Option auf true setzen, wird in dem Fenster, in dem die Vergrößerung stattfindet, ein Bildname eingeblendet. Als Standard dient hier das title-Attribut des kleinen Bildes.

---