AJAX-ZOOM Module Übersicht

Im Frontend von Magentos Produktdetailseite ersetzt das AJAX-ZOOM-Plugin für Magento den Standard-Viewer durch den responsiven Bildzoom + optionale 360 Grad Ansichten + Videos AJAX-ZOOM-Erweiterung. Optional können Sie die 360-Produktansichten mit einer definierbaren jQuery-Selector in eine Registerkarte oder an eine andere Stelle auf der Seite einfügen. In diesem Fall bleibt der Standard-Bildbetrachter erhalten oder Sie können ihn durch ein anderes Plugin eines Drittanbieters ersetzen.

Im Backend können Administratoren mehrere 360 Produktbilder hochladen oder aus ZIP-Dateien importieren, die zuvor z.B. über FTP hochgeladen wurden. Sie können jede 360-Produktansicht mit individuellen Einstellungen konfigurieren und einer Kombination von verbundenen Produkten zuordnen. Außerdem besteht die Möglichkeit, Videos von YouTube, Vimeo oder einen Link zum mp4-Stream zu definieren. Wie bei den 360-Produktansichten können Sie diese Videos nur bestimmten Produktvariationen zuordnen und sogar unterschiedliche Videoquellen für verschiedene Sprachen angeben. Für Ihre regulären Produktbilder müssen Sie nichts ändern. Sie können jedoch anklickbare und interaktive Hotspots hinzufügen.

Im Front-Office auf der Produktdetailseite ersetzt das AJAX-ZOOM-Modul für PrestaShop die Standard-Produktansichten durch die responsive "zoom on hover" AJAX-ZOOM Erweiterung, mit der auch optional 360 Produktspins und Videos in einem Viewer angezeigt werden. Alternativ können Sie das Modul so konfigurieren, dass nur die 360 Grad Produktansichten auf einer zusätzlichen Registerkarte oder an einem anderen Ort via einen frei definierbaren jQuery-Selektor platziert werden.

Im Back Office können Administratoren mehrere 360- oder 3D-Produktansichten hochladen oder sie aus ZIP-Dateien importieren, die zuvor z.B. über FTP hochgeladen wurden. Administratoren können jeden 360-Spin mit individuellen Einstellungen konfigurieren, z.B. die Rotationsgeschwindigkeit und -richtung einstellen. Außerdem können Administratoren festlegen, dass ein bestimmter 360-Produkt-Spin nur bei bestimmten Produktvariationen angezeigt wird.

Das Modul unterstützt auch Videos aus verschiedenen Quellen wie YouTube oder Vimeo. Bei normalen Bildern besteht die Möglichkeit, anklickbare Hotspots mit einer Menge vordefinierter Funktionen hinzuzufügen. Das Gleiche und mehr können Sie für 360 Produktansichten tun.

Basierend auf den Woo- und WordPress-Hooks ersetzt das AJAX-ZOOM Plugin auf der Produktdetailseite die Standardansicht der Produktbilder durch den AJAX-ZOOM Viewer.

Neben regulären Bildern kann der Viewer auch 360 Grad Produktansichten und Videos anzeigen. Im Frontend verbindet sich der Viewer mit den Varianten der Artikel und ändert die Bilder, wenn der Benutzer zwischen den Varianten wechselt. Diese Funktionalität hat sich bisher als stabil in allen Templates erwiesen.

Anstatt den vorhandenen Bildbetrachter auf der Produktseite zu ersetzen, können Sie den AJAX-ZOOM-Viewer auch mit Ihren 360-Produktansichten im Produktbeschreibungsteil oder an einem anderen Ort mithilfe des Kurzcodes platzieren. Auf diese Weise ist es möglich, ein anderes Drittanbieter-Plugin zur Anzeige der Bilder zu verwenden oder den von dem Template beizubehalten.

Im Backend von WordPress können Administratoren mehrere 360- oder 3D-Produktbilder hochladen und, falls verfügbar, sogar ausgewählten Produktvarianten zuordnen. Dasselbe können Sie mit Videos tun. Dies ist auch eine zusätzliche Funktion, die das Plugin dem Formular zum Bearbeiten der Artikel hinzufügt.

Darüber hinaus bietet das AJAX-ZOOM-Plugin die Möglichkeit, mehrere Bilder für Produktvarianten hochzuladen. Wenn Sie bereits das offizielle WooCommerce-Plugin für weitere Variantenbilder verwenden, werden diese ebenfalls im AJAX-ZOOM-Viewer angezeigt.

Zu allen Produktbildern und 360 Produktspins können Sie anklickbare Hotspots über den Hotspot-Editor direkt im Backend von WordPress hinzufügen.

Trotzdem gibt es ein AJAX-ZOOM Plugin für Shopware. Im Frontend kann der Shopware 5 Slider durch den AJAX-ZOOM-Viewer ersetzt werden, er kann jedoch auch die 360-Produktansichten und -videos dem Array von Elementen dem standard Shopware 5 Slider hinzufügen. Alternativ können Sie das Plugin so konfigurieren, dass die 360-Produktansicht in einer Registerkarte platziert wird.

Außerdem besteht die Möglichkeit, den Produktwelten oder anderen Seiten die 360 Produkt Drehungen durch Kopieren und Einfügen von HTML-Code hinzuzufügen.

Im Backend können Administratoren 360 Bilder hochladen oder importieren. Es gibt auch ein Importskript, mit dem Sie beliebig viele 360 Bilder zu vielen Produkten hinzufügen, den AJAX-ZOOM-Cache erstellen und automatisch die 360-Spins für die Anzeige im Frontend freischalten können.

Das Hinzufügen von Videos von YouTube, Vimeo oder eines Links zu mp4-Streams ist ebenfalls Bestandteil des AJAX-ZOOM Plugins für Shopware. Die Miniaturansichten für Videos werden automatisch abgerufen, Sie können jedoch auch eigene Miniaturansichten hochladen oder erstellen. Es gibt auch ein Skript, um die Videoliste mit einer Excel-Datei zu synchronisieren und die Map für Google zu exportieren.

Darüber hinaus können Administratoren interaktive Hotspots für normale Bilder und 360 Produktansichten erstellen. Weiterhin ist es möglich 360 Produkttouren über den integrierten Editor zu erstellen.

Das AJAX-ZOOM-Plugin für OXID bietet 360-Bildansichten und Bilder mit tiefem Zoom. Im Frontend ersetzt die "Zoom in Hover" AJAX-ZOOM-Erweiterung den Standard-Bildbetrachter. Administratoren können die 360-Bilder und -bilder für 3D-Ansichten über das Backend hochladen oder diese aus Dateien importieren, die zuvor über FTP als ZIP hochgeladen wurden.

Über integrierte Editoren können außerdem interaktive Hotspots und 360 Produkttouren erstellt werden. Eine separate Konfiguration jedes Satzes der 360 Bilder ist nicht erforderlich, aber möglich. Alle spezifischen Optionen der AJAX-ZOOM "Zoom in Hover" Erweiterung können auch über das Backend geändert werden. Der AJAX-ZOOM-Cache wird immer dann erstellt, wenn der Viewer den Inhalt öffnet. Alternativ besteht die Möglichkeit, den Cache über das visuelle Batch-Tool zu erstellen, das ebenfalls Teil des Backends ist.

Nachdem Sie das AJAX-ZOOM-Plugin für OXID installiert haben, können Sie es für die Ausgabe im Frontend deaktivieren und dessen Möglichkeiten im Backend erkunden. Sie können es auch nur für ausgewählte Produkte aktivieren und beispielsweise A/B- oder QA-Tests durchführen. Es ist übrigens in allen AJAX-ZOOM Plugins für E-Commerce-Systeme möglich.

Im Frontend ersetzt die AJAX-ZOOM-Erweiterung für OpenCart den Bildanzeigebereich des Templates durch die AJAX-ZOOM "Zoom on hover" Erweiterung. Neben der effizienten Anzeige von Bildern mit hoher Auflösung bietet die Erweiterung 360 Grad Ansichten sowie mehrstufige 3D-Produktansichten. Administratoren können diese Ansichten im Backend-Bereich des OpenCart-Systems erstellen. Sie können die 360-Bilder über die Benutzeroberfläche hochladen oder aus Dateien importieren, die zuvor in einen bestimmten Ordner hochgeladen wurden.

Es ist möglich, jeden 360-Spin-Vorgang individuell über die Backend-Oberfläche anzupassen. Mit dem Hotspots-Editor, der in einem neuen Fenster geöffnet wird, können Sie Punkte auf 360-Ansichten interaktiv markieren. Mit dem ähnlich integrierten Editor können Sie 360 ​​Produkttouren erstellen, indem Sie Teile der 360-Ansicht auswählen und beschreiben Die AJAX-ZOOM-Software erstellt automatisch eine Slider mit Miniaturbildern dieser Stellen. Wenn der Benutzer auf eine Miniaturansicht klickt, dreht und vergrößert der Viewer die Ansicht zu der gewählten Stelle. Die Animation ist wählbar.

Fürs Erste haben wir kein separates WordPress-Plugin. Unser neuestes WooCommerce-Plugin hat jedoch eine neue Funktion, die einen Shortcode generiert. Diesen können Sie überall in andere WordPress Seiten und Posts einfach per copy & paste einfügen.

Geplant ist ein Modul, welches voraussichtlich auf responsive Versionen dieser Beispiele basieren wird:

Für "xt:Commerce" und seine Derivate wie "xtcModified" bzw. "modified" oder "Gambio" gab es auf Vorlagenebene einen alten Integrationsleitfaden. Mit den neuen AJAX-ZOOM Versionen ist es nicht mehr funktionsfähig. Eine manuelle Basisintegration ist jedoch weiterhin möglich.

Derzeit ist es unsererseits nicht geplant, ein installierbares Modul für "xt:Commerce" zu erstellen. Wir müssen abwarten, ob neu eingeschlagene Strategie des Herstellers zum Erfolg verhilft. Wenn Sie jedoch ein bestehendes Modul für ein anderes System portieren möchten, kontaktieren Sie uns bitte.

Ihr E-Commerce System nicht dabei? Bitte lesen: prinzipiell können alle Beispiele oder deren Kombinationen auch in andere E-Commerce Systeme eingebunden werden. Die Hauptaufgabe besteht darin, die Pfade von den hochgeladenen Bildern in Ausgangsauflösung etwa über Template Variablen herauszufinden und an AJAX-ZOOM zu übergeben. AJAX-ZOOM wird dann diese Bilder automatisch für die Ansicht präparieren.

Bei 360 Grad Bildern empfiehlt sich bzw. ist das einfachste, wenn hochauflösende Bilder (Frames) über FTP hochgeladen werden. Als Referenz(en) für einen Artikel kann beispielsweise dessen ID dienen. Aus dem Template heraus muss dann mittels PHP oder einer anderen serverseitigen Sprache überprüft werden, ob ein bestimmtes Verzeichnis, z.B. /axZm/pic/zoom3d/{ID_des_Artikels} existiert und wenn ja, kann etwa ein Button für das Öffnen der 360 Grad Produktanimation in einer Lightbox angezeigt oder der Player direkt eingebettet werden. Dafür braucht man nur den Pfad zu den Bildern an AJAX-ZOOM mittels Parameter 3dDir=/axZm/pic/zoom3d/[ID_des_Artikels] zu übergeben. Fertig. Für einen einfachen Button schauen Sie sich z.B. example3.php oder example27.php

Wenn Sie example32.php oder Ähnliches einbauen wollen, dann besteht im Prinzip für Sie als Programmierer die gleiche Aufgabe. Sie müssen dann je nach Beispiel eben ein Teil des JavaScripts, welches AJAX-ZOOM startet und Bilder || 360 Grad Verzeichnisse definiert, dynamisch im Template mit Smarty oder PHP ausgeben.