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.
Neu: Optional display of 360 degree animations and videos in a tab on product detail page.
Neu: Show 360 / 3D in "produkt worlds" / CMS or else where.
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.
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.
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.
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.
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.
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.
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.
The AJAX-ZOOM product tour can be used with both the AJAX ZOOM mouseover player, as well as the standard Shopware product view slider.
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.
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:
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:
/engine/Shopware/Plugins/Community/Frontend/AjaxZoom/zip
directory and can be removed later.
/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.)
/engine/Shopware/Plugins/Community/Frontend/AjaxZoom/axZm
.
/engine/Shopware/Plugins/Community/Frontend/AjaxZoom/
/engine/Shopware/Plugins/Community/Frontend/AjaxZoom/axZm
/engine/Shopware/Plugins/Community/Frontend/AjaxZoom/pic
is writable by PHP (e.g. chmod 0775)Please see installation steps above. Proceed with manual installation.
$_SERVER['PHP_AUTH_PW']
/ $_SERVER['PHP_AUTH_USER']
are not set.
This is because integrating the editors in the backend required 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
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';
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:
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.
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;
/engine/Shopware/Plugins/Community/Frontend/AjaxZoom
with the last AJAX-ZOOM Plugin for Shopware version.
/engine/Shopware/Plugins/Community/Frontend/AjaxZoom/axZm
with the latest AJAX-ZOOM version.
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).
Some shared hosting companies such as "1&1" allow the users without root access to create their custom php.ini
files
and "install" Ioncube loader this way.
However, this custom php.ini
has only effect on the folder where into you place it.
It has no impact on subfolders as you might suspect.
Therefore, if you are dealing with this method of installing the loader, you must copy your custom php.ini
into several folders.
If AJAX-ZOOM module for your system installs itself into, e.g., /modules/ajaxzoom
directory,
you must place the custom php.ini
into /modules/ajaxzoom/axZm/
folder and
into, e.g., /admin12345/
folder (or wherever installing the modules takes place).
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.
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° вид';
/zoomConfigCustomAZ.inc.php
one level up,
outside of the "ajaxzoom" plugin directory, so when you update the plugin this file does not get overwritten.
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:
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.
There is no need to order AJAX-ZOOM before you have successfully installed and tested it! You can test in the test environment as long as necessary.
Since 2017, the AJAX-ZOOM plugin for shopware is also available in Shopware Plugin Store. If you purchase the plugin there, please contact us via the contact form, so that we can issue you the license key.
AJAX-ZOOM main files are downloaded automatically when the plugin is installed. If you want to manually install the AJAX-ZOOM Plugin for Shopware, see installation steps above.
The license price primarily depends on the number of different images, which are displayed on a domain in the AJAX-ZOOM viewer. If you have sub-shops and all sub-shops are operated on the same server, then the license of each sub-shop must be able to cover all different images or images of the 360 (depending on what you use AJAX-ZOOM for) for all subshops. However, the multistore price regulation can reduce the license costs. For the complete license agreement, please visit the download section.
Added COLLATE=utf8_unicode_ci
when database tables are created.
To use live-support-chat, you need to have Skype installed on your device. In case live support over Skype is not available immediately, please leave us a message or send an email by using the contact form.
We answer every inquiry or question that relates to the AJAX-ZOOM software!
Also to mention: great and dedicated support. Vadim reacts extremely fast, has tips and solutions for any issue that might occur.