Shopware plugin

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

There are extensive setting options in the plugin configuration area. In addition to various settings for the player, as well as the appearance in the front end, an option - displayOnlyForThisProductID - is available for testing purposes to limit the output of the player in the frontend. This allows you to restrict the output to the product ID listed in the text field as CSV.

Under the menu Items -> AJAX-ZOOM you will find the overview of all main articles and the number of 360 degree views defined by AJAX-ZOOM, as well as videos. You can easily find an item through field search, as well as sort the list. Use this table to edit / add the 360 product views and videos.

Creating a new 360 / 3D degree product view is very easy. While creating a new entry you can immediately select a ZIP file that has been previously moved to a specific "ZIP" directory, e.g. uploaded via FTP. During the creation of the entry, the plugin unpacks the pictures from the selected ZIP archive and places the pictures in the plugin structure. Alternatively, you can also upload the images directly via the backend interface. This will appear immediately after the entry has been created.

After creating, you can change or define several settings. For a product with variations, you have the option to assign a 360 only to specific variations. It is also possible to set nearly all the settings of the AJAX ZOOM player for each 360 degree object individually, as well as to create hotspots and / or product tour (see below).

In case that through internal or external production you have many 360 degree sets at once, which need to be assigned to specific products, you can simply use the 360 Batch Import feature of the plugin. Within the AJAX-ZOOM plug-in, under the menu item Administration -> Batch Import 360 you will find the convention, how to name the ZIP files with 360 images, so that they are imported automatically by the batch import function and assigned to the corresponding product numbers or IDs. This automation tremendously saves you time and thus costs.

360 degree "Product Tour"

The 360 "Product Tour" Editor is very easy to use. Simply select areas of interest in your 360 / 3D view and press the Crop button. The editor automatically creates thumbnails of these areas and places them in the separate gallery slider. When the user clicks a thumbnail in the front end, the player rotates the 360 view and zooms to the selected area. There are several predefined animation options available.

Furthermore, as an administrator, you have the option of providing the selected area with title and multilingual description. The description automatically appears after the rotation animation ends. If title is defined, a button with the title appears and the user can click on it and see the entire description. The description may include HTML and thus any content, including e.g. YouTube videos, whereby a shortcode for YouTube and iframe is provided.

So if you want to say something quickly about the product, you can do it fast with the help of the "Product Tour" Editor. Having a little practice it takes less than two minutes to create a professional presentation.

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

Compared to the "Product Tour", the operation of the hotspot editor is more complicated. This is because there are far more possibilities to design the hotspots. Anyway, it takes a lot of training to work with the editor without stress.

The hotspots are generally about defining the position of these markers in the image and providing them with an interaction. For a 360 degree view you first have to place a hotspot on individual frames of a 360 view. You can do this roughly by dragging and dropping via thumbnails overview, later positioning them in the AJAX-ZOOM Player, also using Drag & Drop. Then choose the look. Predefined are several PNG icons or CSS classes.

When the positioning is done, you can create a label and, if necessary, a connecting line between the hotspot and the label. There are many (many) predefined design options.

Finally, if you want something to happen when you click on a hotspot, you can set an interaction. There are predefined interactions like a link or, similar to the product tour, a layered window with multilingual definable content, YouTube videos etc. You can also define your own JavaScript function and basically let everything happen on click.

There are many other interesting features, such as displaying certain hotspots (groups) only at a certain zoom level - interesting in the context of the product tour, both working together very well.

If you are not under the pressure of time, you should look into the Hotspot Editor and you will discover the variety of possibilities, which are limited only by your imagination. There is nothing comparable on the market. And there is definitely nothing packed into a plugin for Shopware, where you do not have to program anything.

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

The AJAX-ZOOM plugin for Shopware has a sophisticated management of videos that can be added in addition to or instead of 360 degree views. You have the possibility to define videos from sources such as Youtube, Vimeo, Dailymotion or direct links to mp4 files. As a cloud to mp4 videos you can also use e.g. Vimeo service.

The plugin gives an overview of all the videos and products to which these videos are linked. For each language you can optionally define your own video source.

You can manually maintain the definition of the entire video table for each product via the backend, but you can also create an Excel file with all the necessary data and synchronize it with the database.

For each video, you can upload a preview image or interactively set mp4 video files to mp4.

To crown video functionality, you can create an XML file that can be submitted to Google manually or via a cron job for optimal video SEO.

AJAX-ZOOM Batch Tool

You do not necessarily have to use the batch tool, because if image tiles and other AJAX-ZOOM caches have not been generated yet, AJAX-ZOOM will generate them on-the-fly, either when they are loaded into the player at "preview" in the backend or latest when they appear at the frontend.

However, if you have thousands of images, it is a good idea to batch process all existing images, which you plan to show over AJAX-ZOOM, before launching the new website or before enabling AJAX-ZOOM at frontend. With this new batch file it is possible to cover up to 100% of all caches, which AJAX-ZOOM will generate on-the-fly if not present.

On daily basis, when you add 360 / 3D images to your already existing or new products, you can keep the 360 / 3D sets disabled for the frontend and process any amount of 360 sets later with this batch tool, while it will automatically activate a 360 / 3D set one by one after the batch finished processing it.

Frontend screenshots

Please click the buttons at top of this page to see the life links to the screenshots below! The screenshots below show Shopware product detail view when AJAX ZOOM is fully enabled via plugin option.

Default gallery / slider

These are views, when Shopware default slider is activated per option. You can let AJAX-ZOOM inject the 360 views and videos into the default Shopware product view slider. All unique possibilities like product tour or hotspots are preserved.

360 degree "Product Tour"

The AJAX-ZOOM product tour can be used with both the AJAX ZOOM mouseover player, as well as the standard Shopware product view slider.

360 degree and Video within a tab

You can display AJAX ZOOM 360 degree / 3D views, as well as videos by option and optionally in tabs. The new tab is automatically created whenever a 360 degree view or video is defined for a product.

Handling regular images

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

When product images are displayed with AJAX-ZOOM mouseover / slider + fullscreen, you can optionally place hotspots (clickable markers in the image) on regular images. This is done with the same editor, which is also used for 360-degree animations:

Handling 360°/3D

To add 360° images go to 'Items' -> 'AJAX-ZOOM' panel and select a product. Alternatively, log in as an administrator in the browser and in new tab call www.your-domain.com/backend/AjaxZoom. 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 installed on the server or within AJAX-ZOOM plugin directory. The plugin for Shopware is not encrypted. However, some AJAX ZOOM main files require Ioncube:

• 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.

Backend password over .htpasswd / .htaccess

The hotspots and 360 degree tour editors may not work in the backend if the whole page is protected by e.g. .htpasswd / .htaccess which is is often the case during the development phase, and the $_SERVER['PHP_AUTH_PW'] / $_SERVER['PHP_AUTH_USER'] are not set. This is because integrating the editors in the backend requred to use "cUrl" internally, meaning, that the server accesses itself via http(s). To allow it to do so, its own server IP, that is, where Shopware is running, must be excluded from password entry. Under Apache, you can rule out the own server IP like this

AuthType Basic
Require valid-user
AuthName "Please enter password"
AuthUserFile /www/passwords/.passwd
Allow from xxx.xxx.xxx.xxx
Satisfy Any

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 https://en.community.shopware.com/_detail_1653.html

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

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

Backend via HTTPS

27.09.2017 - in the back end, AJAX-ZOOM appears as a "Lightweight Backend Module" in the virtual window. If you call the backend via https://www.your-shop/backend/, it may happen that the module does not load in the virtual window. We are not quite sure at the moment whether it is on our plugin or it is a bug in the Shopware or from which version on it is fixed. The problem has so far been reported by operators of the Shopware 5.1 versions.

If it is not loaded in the virtual window, but you can easily access the AJAX-ZOOM plug-in via https://www.your-shop/backend/backend/AjaxZoom in the backend, you could quickly patch the /themes/Backend/ExtJs/backend/base/component/Shopware.ModuleManager.js to make a "Lightweight Backend Modules" work with https in the virtual window:

Replace the following code within the mothod createContentFrame

frame = Ext.get(Ext.DomHelper.createDom({
	'id': Ext.id(),
	'tag': 'iframe',
	'cls': 'module-frame',
	'width': '100%',
	'height': '100%',
	'border': '0',
	'src': (fullPath ? name : '{url module="backend" controller="" fullPath}' + name),
	'data-instance': instance
}));

with this:

// Set path as variable
var frame_src = (fullPath ? name : '{url module="backend" controller="" fullPath}' + name);

// Check if protocol is https
if (location.protocol === 'https:') {

	// Replace http: with https:
	frame_src = frame_src.replace('http:', 'https:');
}

frame = Ext.get(Ext.DomHelper.createDom({
	'id': Ext.id(),
	'tag': 'iframe',
	'cls': 'module-frame',
	'width': '100%',
	'height': '100%',
	'border': '0',
	'src': frame_src, // path as variable
	'data-instance': instance
}));

Since obviously this path

(fullPath ? name : '{url module="backend" controller="" fullPath}' + name)

is not resolved correctly, it seems that it is a bug within Shopware core system. With the above changes it will be fixed. The bug does not disturb the functionality of the frontend.

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; 

Other

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

Known issues

Shopware 5.4 and LAMP under Windows (not Linux)

In Shopware 5.4 versions the plugin will not work in the backend with LAMP under Windows, e.g. XAMPP, because of a Shopware bug. https://issues.shopware.com/issues/SW-21477

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.

Shopware 5.3.(?) plugin license error

Since Shopware Version 5.3. (?), AJAX ZOOM is marked as unlicensed in Plugin Manager for customers who have not purchased AJAX ZOOM through Shopware Community Store, and a message appears stating that you may have been the victim of counterfeiting. Before Shopware Version 5.3 (?) This message did not appear. The message does not come from AJAX-ZOOM, but from Shopware Community Store and can be currently ignored. Legally, everything is fine and of course you are not a victim of product counterfeiting. The functionality of the shop in the frontend is not affected.

The intention of Shopware AG to check the authenticity of licenses for extensions sold through Community Store is generally correct. For us, however, it does mean that there is currently no technical solution to the problem. We could not foresee this development and have placed the AJAX-ZOOM plugin in the Shopware Community Store before SW Ver. 5.3 was released. Now it leads to this message for customers who have purchased a license directly from us. If you have any idea how to solve this dilemma, then please contact us.

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.

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. You can, of course, continue to update the plug-in for Shopware and AJAX-ZOOM manually via FTP:

• Overwrite /engine/Shopware/Plugins/Community/Frontend/AjaxZoom with the last AJAX-ZOOM Plugin for Shopware version.
• Overwrite /engine/Shopware/Plugins/Community/Frontend/AjaxZoom/axZm with the latest AJAX-ZOOM version.
• Update plugin in Plugin Manager.

FAQ

How to install "ionCube Loader"?

ionCube loader is a widely used PHP extension, and it is required to operate AJAX-ZOOM on your server. Before installing the loader, please check if it is not already installed on your server. To check this, you can look into the output of phpinfo();. You can also use get_loaded_extensions PHP function - print_r( get_loaded_extensions() ); to see if ionCube is installed.

If you do not detect ionCube on your server, please visit the official ionClube loaders page. There you can find "Loader Installer" and "Loader Wizard", which guide you guidance on installing the loader that matches your operating system (Windows, Linux, FreeBSD, OpenBSD, OS X, Solaris).

Many hosting companies do also have a guide in their FAQ on how to do this specifically for their configurations. Lastly, a mail to your hosting’s provider support surely helps. ionCube is industry standard and should be a copy & paste answer for your hosting provider. If not, you should switch your hosting provider immediately.

Please note, that each PHP version requires a different loader extension. When your provider offers a possibility to switch between several PHP versions, and you have added ionCube extension over a separate php.ini on your own, please think about updating this php.ini file to link to the appropriate ionCube extension file.

Restarting the Server (e.g. Apache) might be needed for the new extension to load (changes in php.ini effectively occur).

Do I need a license key to test AJAX-ZOOM module / plugin?

No, AJAX-ZOOM should work out of the box. For some modules / plugins, AJAX-ZOOM does not install itself, if "ionCube" extension is not present on the server (see above). Other than that, there is are limitations on the number of images and image resolution of the demo version. If you would like to test AJAX-ZOOM with higher resolution images ( > 3.2 megapixels / million pixels), please request an "Evaluation" license key for your dev domain / subdomain free of charge.

If you do not have a development server but would like to install AJAX-ZOOM plugin on your production website, you should go to module / plugin settings and set "displayOnlyForThisProductID" option. This option allows you to enable AJAX-ZOOM only for specified product ID, so you can test the module / plugin thoroughly without affecting the entire shop / conduct A/B tests.

How to translate the plugin into other languages or change text strings?

The translation of the strings is done over the plugin options and within the AJAX-ZOOM core PHP config file.

1. All plugin options are accessed over backend. For example, if you want to add Russian translation to "zoomMsg360" option, which is defined as JSON, you would need to add "key" and "value" to this JSON.

    
{
    "en": "Drag to spin 360°, scroll to zoom in and out, right click and drag to pan",
    "de": "Ziehen um 360° zu drehen, zoomen mit dem Mausrad, rechte Maustaste ziehen verschiebt die Ansicht",
    "fr": "Faites glisser pour tourner à 360 °, faites défiler pour zoomer dans et hors, cliquer et faire glisser à droite pour vous déplacer",
    "es": "Arrastrar para girar en 360º, Rueda del ratón para utilizar el Zoom, botón derecho para mover la imagen"
}
    

So when you only need English as default language (please keep it) and want to add Russian translation string, you would change this option to

    
{
    "en": "Drag to spin 360°, scroll to zoom in and out, right click and drag to pan",
    "ru": "Крутить 360° левой кнопкой мыши, колесом увеличивать, правой кнопкой смещать zoom"
}
    

2. Some other text strings are located in [ajaxzoom plugin directory] /axZm/zoomConfig.inc.php file, which is part of AJAX-ZOOM core. Open this file in a text editor and find a string you are looking for. For example, you are looking for the "Click to load" message. It is located under $zoom['config']['spinNoInit'] option and looks like this:

    
$zoom['config']['spinNoInit'] = array(
    'enabled' => false,
    'file' => array('en' => 'click_to_load_en.png', 'de' => ''),
    'txt' => array(
        'en' => 'Click to load
360°
 view',
        'de' => 'Klicken um die
360° Ansicht
zu laden'
    ),
    'event' => 'click'
);
    

As you can see, this is a PHP array, and there are several other suboptions located in it. Best way to proceed is to either copy the entire array into zoomConfigCustomAZ.inc.php or copy only the suboption with locales into this file. You can find zoomConfigCustomAZ.inc.php outside of the /axZm folder in the plugin directory.

2a. The below is what you would add to [ajaxzoom plugin directory] /zoomConfigCustomAZ.inc.php file when you copy the entire array and add your translation, removing languages you do not need:

    
$zoom['config']['spinNoInit'] = array(
    'enabled' => true,
    'file' => array('en' => 'click_to_load_en.png', 'de' => ''),
    'txt' => array(
        'en' => 'Click to load
360°
 view',
        'ru' => 'Нажмите мышкой, чтоб загрузить 360° вид'
    ),
    'event' => 'click'
);
    

2b. Or you could just add the suboption to [ajaxzoom plugin directory] /zoomConfigCustomAZ.inc.php file like this:

    
$zoom['config']['spinNoInit']['txt'] = array(
    'en' => 'Click to load
360°
 view',
    'ru' => 'Нажмите мышкой, чтоб загрузить 360° вид'
);

// or

$zoom['config']['spinNoInit']['txt']['ru'] = 'Нажмите мышкой, чтоб загрузить 360° вид';
    

3. There is also a third possibility how to add a translation to strings, which are located in [ajaxzoom plugin directory] /axZm/zoomConfig.inc.php. In the backend, under plugin configuration, you can find "azOptions" and "azOptions360", which allow you to override configuration from [ajaxzoom plugin directory] /axZm/zoomConfig.inc.php related to frontend display. If we wanted to do the same as above over "azOptions360" plugin option (which is saved into the database), the result in your textarea would look like this:

{ "spinNoInit": { "enabled": true, "txt": { "ru": "Нажмите мышкой, чтоб загрузить 360° вид" } } }

Here, we do not need to define English, as the related JavaScript object will get extended by what you define in "azOptions360". The possibility number 2 above (writing into [ajaxzoom plugin directory] /zoomConfigCustomAZ.inc.php) is not applied then.

Download / Prices

Changelog

Comments (1)

Leave a Comment