Shopware plugin

Demo frontend AJAX-ZOOM mouseover Demo frontend Shopware5 gallery Download Shopware plugin Download AJAX-ZOOM

In the frontend AJAX-ZOOM module for Shopware is based on responsive mouseover zoom + optional 360°. However, starting from plugin version 1.2.4 there is an exclusive option for Shopware 5 customers to inject only AJAX-ZOOM 360 degree player directly into default product image slider.

In backend there is a possibility for administrators to upload several 360's or import them from zip files or folders, which were previously uploaded e.g. over ftp. Each individual 360° can be configured with separate AJAX-ZOOM settings and attached to a properties combinations same way it can be done with regular images on default. For regular images there are no changes required.

New: 360 degree "Hotspots" with integrated Hotspot Editor in the backend.

New: 360 degree "Product Tour" with backend integration.

Neu: Integration of 360°, videos into default Shopware5 image slider / gallery.

Neu: Video - HTML5, YouTube, Vimeo... Batch import of 360 images for different articles, batch import of videos from CSV / XLS, export the videos to a sitemap suitable for Google - video SEO.

General features

  • Absolutly responsive mouseover area and flyout zoom window
  • Adjustable to fit the size of any responsive elements on the page over smart jQuery like selector
  • Adjustable for fixed or flexible image proportions
  • Permanent or automatic inner zoom depending on resolution and responsive layout
  • Support for Shopware images tied to product variations
  • Works great on touch-enabled devices
  • Optional 360°/3D support with (pinch) zoom and full screen view
  • Optional responsive thumbnails slider integration
  • Responsive modal or full screen views on click with AJAX-ZOOM
  • Fast "progressive" loading of high resolution images
  • Instant (on-the-fly) generation of all thumbnails
  • 360 degree / 3D "Product Tour" with editor in the backend
  • Hotspots on 360/3D including hotspots configurator in the backend
  • Multilanguage
  • 100+ other options
  • All components adjustable over Shopware plugin settings
  • API for developers of all skill levels
  • Continuous development and improvements, technical support

Backend screenshots

Shopware 360 degree Backend Shopware 360 degree Backend Shopware 360 degree Backend Shopware 360 degree Backend Shopware 360 degree Backend Shopware 360 degree Backend Shopware 360 degree Backend Shopware 360 degree Backend Shopware 360 degree Backend

360 degree "Product Tour"

Shopware 360 degree product tour Shopware 360 degree product tour Shopware 360 degree product tour Shopware 360 degree product tour Shopware 360 degree product tour Shopware 360 degree product tour

Hotspots editor - hotspots and the 360 degree "Product Tour" can be combined

Shopware 360 degree Shopware 360 degree with hotspots Shopware 360 degree with hotspots Shopware 360 degree with hotspots Shopware 360 degree with hotspots Shopware 360 degree with hotspots

Video - HTML 5 (Videojs), Youtube, Vimeo, Dailymotion...

Shopware Video Backend Shopware Video Backend Shopware Video Backend Shopware Video Backend Shopware Video Backend Shopware Video Backend

Frontend screenshots

Shopware 360 degree Shopware 360 degree Shopware 360 degree Shopware 360 degree Shopware 360 degree Shopware 360 degree

Default gallery / slider

Shopware 360 degree Shopware 360 degree Shopware 360 degree

360 degree "Product Tour"

Shopware 360 degree product tour Shopware 360 degree product tour Shopware 360 degree product tour

Handling regular images

For the regular images there is no need to do anything.

Handling 360°/3D

To add 360° images go to 'Items' -> 'AJAX-ZOOM' panel and select a product. There you will be able to:

  • Define one ore more 360° spins for the product.
  • Upload 360° images right from the backend or
  • Select a zip file which contains images for a 360° set to import. These zip files must be uploaded in /engine/Shopware/Plugins/Community/Frontend/AjaxZoom/zip directory and can be removed later.
  • After importing or uploading the images manually you will be able to make some adjustments for this particular 360°, e.g. change rotation speed and many other options available for AJAX-ZOOM.
  • Preview 360° in Fancybox before publishing.
  • Activate / deactivate 360° view.
  • Select combinations, e.g. color and size for which a 360° view should be shown. You can add more than one 360° view for a product.
  • Create a 360° "Product Tour" with descriptions, videos... No programming knowledge is required.
  • Add clickable and labeled hotspots to 360° / 3D animations. Requires some practice.

Requirements

  • PHP 5.2+
  • Shopware Ver. 5.1.0 or later.
  • Free Ioncube loaders or Sourceguardian loaders installed on the server
  • ZIP
  • allow_url_fopen enabled (for instantly downloading AJAX-ZOOM main application and placing it in "/engine/Shopware/Plugins/Community/Frontend/AjaxZoom/axZm" directoy. If allow_url_fopen is disabled you will have to do it manually, please see "Troubleshooting" section on this page.)

Installing

Upload plugin over plugin manager

  1. Switch to Configuration -> Plugin Manager and in the left menu choose "installed".
  2. At top click on "Upload plugin" and choose the ZIP file with AJAX-ZOOM plugin for Shopware.
  3. If everything goes well and AJAX-ZOOM main script files can be instantly download by the plugin, which can last a while, you will be able to activate the plaugin after installation.
  4. In case nothing happens or you will get an error message, please download AJAX-ZOOM main script, unpack the ZIP locallay and upload only the content of "/axZm" folder into "/engine/Shopware/Plugins/Community/Frontend/AjaxZoom/axZm".

Manual installation

  1. Unpack and upload the plugin for Shopware in "/engine/Shopware/Plugins/Community/Frontend/AjaxZoom/"
  2. Unpack and upload the content of "/axZm" folder from AJAX-ZOOM main script into "/engine/Shopware/Plugins/Community/Frontend/AjaxZoom/axZm"
  3. Make sure that "/engine/Shopware/Plugins/Community/Frontend/AjaxZoom/pic" is writable by PHP (e.g. chmod 0775)
  4. Now AJAX-ZOOM should be visible in Plugin Manager at very bottom in "uninstalled" section.
  5. Click on "install" icon.
  6. After installation you might need to clear cache in Configuration -> Cache/Performance and reload the browser window.

Troubleshooting

AJAX-ZOOM has not been downloaded instantly

Please see installation steps above. Proceed with manual installation.

Replace images and AJAX-ZOOM cache

If Shopware is managed over external tools (not over Backend) and item images are replaced keeping the same file name, then AJAX-ZOOM does not get notice of it and AJAX-ZOOM cache is not cleared for this image. With the Ver. 1.2.3+ we have implemented several CLI commands to clear AJAX-ZOOM cache for all images of an item or specific (named) image files. Please configure your external tools accordingly (call CLI command over API) when image file is replaced or item is deleted. For more information in CLI please see http://en.community.shopware.com/_detail_1653.html

As a temporal Solution you could add following config parameters to /engine/Shopware/Plugins/Community/Frontend/AjaxZoom/zoomConfigCustomAZ.inc.php

	$zoom['config']['cTimeCompare'] = 'filectime'; 
	$zoom['config']['dynamicThumbsCtime'] = 'filectime';
	

DB collate

2016-07-07 - before Plugin version 1.1.3 tables were created without COLLATE. If you want to change it after plugin is installed, you can execute the following directly in the DB:


alter table ajaxzoom360 convert to character set utf8 collate utf8_unicode_ci; 
alter table ajaxzoom360set convert to character set utf8 collate utf8_unicode_ci; 
alter table ajaxzoomproducts convert to character set utf8 collate utf8_unicode_ci; 
alter table ajaxzoomproductsimages convert to character set utf8 collate utf8_unicode_ci; 
alter table ajaxzoomlicenses convert to character set utf8 collate utf8_unicode_ci; 
alter table ajaxzoomtokens convert to character set utf8 collate utf8_unicode_ci; 

Mouseover image does not show any more (sometimes)

In former module versions the "Pinterest" button was activated on default. Unfortunately the JavaScript for this Pinterest button was loaded from external source. Now this JavaScript was changed by Pinterest and it does produce JavaScript errors now, which might lead to mouseover images not loading properly. Please go to Backend of the Module and deactivate the Pinterest button!!! We will reimplement the integration without relying on external script from Pinterest as next.

Other

If you encounter any other troubles please report / contact our support. We will fix and document it with highest priority.

Known issues

Compatibility with other plugins

Plugins, which replace the frontend template in detail view, may influence the functionality of AJAX-ZOOM with default Shopware image slider enabled. Below is a list of known plugins:

  • Images of all variants - by K30 Webentwicklung

Shopware 5.2 (RC) CSRF Protection

2016-06-28 - for Shopware 5.2.0 which is not released yet CSRF Protection needs to be temporaly disabled as described here. We are working on universal solution with backward compatibility.
Fixed in plugin Ver. 1.2.0

German translation in Windows (not Linux)

German translation in snippets / templates does not work on windows, where instead of '/' the backslash '\' in DIRECTORY_SEPARATOR is used.

Update

Since AJAX-ZOOM Plugin for Shopware Ver. 1.3.2, both AJAX-ZOOM and the plug-in can be updated from the plug-in itself. Backups are automatically created for both, which can be restored if necessary.

Download

Download Shopware plugin Download AJAX-ZOOM

There is no need to order AJAX-ZOOM before you have successfully installed and tested it!

Changelog

Ver. 1.3.3
2017-01-26
Added few options.
Ver. 1.3.2
2017-01-08
Few bugfixes. Added the possibility to update AJAX-ZOOM and AJAX-ZOOM plugin for Shopware from plugin itself. Current installation of both is backuped and can be restored if needed.
Ver. 1.3.1
2016-12-31
AJAX-ZOOM main scripts (axZm folder) has to be updated for this release!
Complete revision of the Shopware plugin. New features include video integration, batch import of 360 images for different articles, batch import of videos from CSV / XLS, as well as export the videos to a sitemap suitable for Google.
Ver. 1.2.6
2016-10-17
Added event hook to delete AJAX-ZOOM cache for an image when image is deleted from media manager.
Ver. 1.2.5
2016-08-31
Added German translation
Ver. 1.2.4
2016-08-26
AJAX-ZOOM main scripts (axZm folder) has to be updated for this release! Also if you have current AJAX-ZOOM version installed.
Nue options. Among others the possibility to optionally inject AJAX-ZOOM 360 degree player into default image slider.
Ver. 1.2.3
2016-08-21
Added CLI commands.
Ver. 1.2.2
2016-08-15
Fixed SQL error resulting from "createMenuItem" while updating. Fixed paths for hotspot editor and 360 "Product Tour" if Shopware is installed in subdirectory.
Ver. 1.2.1
2016-08-12
Fixed small SSL fixed for 360 preview in backend.
Ver. 1.2.0
2016-08-05
AJAX-ZOOM main scripts (axZm folder) has to be updated too for this release!
  • CSRF protection problem was solved with keeping backward compatibility.
  • Integrated new hotspot editor.
  • Some other issues were fixed.
Ver. 1.1.3
2016-07-07
Added COLLATE=utf8_unicode_ci when database tables are created.
Ver. 1.1.2
2016-06-09
Fixed template variable name which could cause namespace collision with a different module.
Ver. 1.1.1
2016-05-31
Minor improvement.
Ver. 1.1.0
2016-05-12
Added 360 degree "Product Tour". Optimized product overview table in the backend.
Ver. 1.0.4
2016-04-22
Minor improvement.
Ver. 1.0.3
2016-04-12
Added article number to overview
Ver. 1.0.2
2016-04-07
Small correction.
Ver. 1.0.1
2016-01-31
Fixed several bugs.
Ver. 1.0.0
2015-12-07
Shopware plugin released.

Comments (0)

Leave a Comment

Name (required):
Email (required):
Website:
Your comment (no html):
Looking for a place to add a personal image? Visit www.gravatar.com to get Your own gravatar, a globally-recognized avatar. After you're all setup, Your personal image will be attached every time you comment.