In the front office at the product detail page, the AJAX-ZOOM module for PrestaShop replaces the default product views with the responsive zoom on hover AJAX-ZOOM extension capable of displaying 360 product spins and videos in one product viewer. On mobile devices, the viewer transforms into an image slider.
New: alternatively, you can configure the module to display only 360 product views and videos in an extra tab or any other place by defining a jQuery selector. In the first case, the module creates an additional HTML tab automatically. If set as a tab or the jQuery selector way, the default image box is kept, which allows you to use a different module for standard images. Thus, if you prefer, you can also use AJAX-ZOOM only as a 360-product viewer apart from the main image viewer and only for products for which 360 images are available.
In the back-office, administrators can upload several 360 or 3D product views or import them from ZIP files, which were previously uploaded, e.g., over FTP. You can configure every 360 spins with individual settings, e.g., set rotation speed and direction. Furthermore, you can arrange to show a particular 360-product spin only with unique product variations. Thus, there is a possibility to, e.g., define a separate 360-product view for each color variant of the same product.
The module supports defining videos from many sources such as YouTube, Vimeo, or links to an mp4 source and displays that video in "video-js" or browsers HTML5 player. Localization is possible in that you define alternative video sources or keys for each country or language. Like with the 360-product spins, there is a possibility to let specific videos display only with selected product variations.
There are no changes for regular images except that when the module is active, the quality of uploading images via BO is not reduced. You can also add clickable hotspots with a ton of predefined features to regular images via the integrated AJAX-ZOOM hotspot editor.
For your 360 product views, besides interactive and clickable hotspots, you can alternatively or additionally create 360 product tours via the second AJAX-ZOOM editor that is present in the back-office as well. Both editors have multi-language support.
Creating a 360 / 3D product view is reasonably straightforward. Please see the screenshots to see how you can do it step by step.
The 360 interactive product tour is an optional enhancement of your 360 / 3D images. You can easily create such a touch in a short time with the integrated editor.
Hotspots are interactive markings on the images. They can have interactions like a popup with additional information as HTML / text and videos but do not necessarily need to have them. The module offers a very extensive hotspot editor integrated directly into the admin backend. The 360 product tour and hotspots work great together / at the same time.
You can also add hotspots to regular images, not just 360 spin views.
Add videos from YouTube, Vimeo, and other services or define a link to mp4 video, which will play in HTML5 video player. The functionality will also let you define separate video sources for each frontend language.
If you want to display specific 360 / 3D images on your shop's CMS pages, you can copy & paste the offered code and place it into the WYSIWYG editor at the place where you want a 360 spin to appear.
Create the cache for AJAX-ZOOM using the integrated batch tool. However, you do not necessarily need to use the batch tool because if image tiles and other AJAX-ZOOM caches are not present yet, AJAX-ZOOM processes the images on the fly. Latest, when they appear at the frontend. However, if you have thousands of images, it is useful to batch process all existing pictures you plan to show via AJAX-ZOOM before launching a new website or before enabling AJAX-ZOOM at the frontend.
It is possible to manually create a 3D multi-line (multi-row) view from within the back end by uploading images line by line. The recommended way is to use a ZIP file and import all rows automatically. Nevertheless, if you want to upload the pictures via the backend, please see the below screenshots for the step-by-step instruction.
An easier way to create 3D multi-row views is to import the images from a ZIP file that was previously uploaded in a specified folder.
Typically, you do not have to change any AJAX-ZOOM settings to make it work. However, if you want to personalize the look and feel, you will find many options for that in the configuration area.
For trying out the module, we recommend using the "displayOnlyForThisProductId" option first. This option allows you to activate AJAX-ZOOM exclusively for specific products only.
For more real impressions, please check out the links at the top of this page!
For regular images, there is no need to do anything. You can upload them as always. However, depending on the PrestaShop version, the original uploaded images might already be compressed by the PrestaShop image class. After activating AJAX-ZOOM, this compression is disabled, and if you are not satisfied with the quality, you might want to reupload your high-resolution images.
Staring from Module version 1.7, you can also add hotspots to regular images, not just 360-degree product views! The image files are not changed, and you can always edit, remove, or disable the hotspots.
To add 360° images, switch to the 'CATALOG' -> 'Products' panel, and select a product. There should be a new AJAX-ZOOM tab. In this tab, you will be able to:
post_max_size
and upload_max_filesize
PHP options directly in your php.ini file or a control system that allows you to achieve the same.
module_prestashop_ajaxzoom_{version}.zip
file,
which you can download from this page as a test version for free.
/modules/ajaxzoom/axZm
folder does not exist,
please look for solutions in the "Troubleshooting" section on this page.
Solving those most common errors in short:
/modules/ajaxzoom/axZm
directory via FTP.
Download the AJAX-ZOOM main files from this page, unpack and upload the entire axZm
folder
via FTP to /modules/ajaxzoom/
directory on your server.
enableInFrontDetail
option.
Alternatively, you can enter one or a couple IDs of a product into the displayOnlyForThisProductID
configuration field.
This way, AJAX-ZOOM is activated only for products with those numbers.
post_max_size
and upload_max_filesize
directly in your php.ini file or a control system that allows you to achieve the same.
You may also need to increase the limit in BO under Advanced Parameters -> Administration -> Upload quota -> Maximum size for a product's image.
The default value in the newer PrestaShop versions is 2 MegaBytes.
post_max_size
and upload_max_filesize
directly in your php.ini file or a control system that allows you to achieve the same.
You may also need to increase the limit in BO under Advanced Parameters -> Administration -> Upload quota -> Maximum size for a product's image.
The default value in the newer PrestaShop versions is 2 MegaBytes.
When logging in as administrator, please do it in the same domain using the same protocol as your front-office!
Front-office | Back-office |
---|---|
https://www.domain.com | https://www.domain.com/admin |
https://domain.com | https://domain.com/admin |
http://www.domain.com | http://www.domain.com/admin |
http://www.domain.com | http://www.domain.com/admin |
https://subdomain.domain.com | https://subdomain.domain.com/admin |
http://subdomain.domain.com | http://subdomain.domain.com/admin |
By now, we should have fixed all the technical error issues, which are real technical issues. So today, those messages mainly result from browsers' Cross-Origin policy when making AJAX requests (Asynchronous JavaScript And XML). According to this policy, a cross-origin request is defined as requests between different domains, same domains but different subdomains, or even the same domains but different protocols.
Strictly speaking, by this definition, a www before the domain name is a subdomain even if both addresses return the same content. If you have activated a redirect, e.g., from www.yourdomain.com to yourdomain.com (without www) for the frontend (or the other way around), then please also login under yourdomain.com/admin1235 to your backend (same as a redirect for the frontend, so if in the frontend you have a redirect to www.yourdomain.com, then please also login under www.yourdomain.com/admin1235 in the back-office).
The same issue arises with different protocols at the back-office and the frontend - HTTP vs. HTTPS. If every request redirects to HTTPS on the frontend, then also please log in to your back-office via HTTPS and not HTTP!
In case you can exclude the Cross-Origin cause of the "TECHNICAL ERROR" alert described above, please contact our support and provide the information that you gather in the following way:
fc=module&module=ajaxzoom
in the URL.
/ajaxzoom/override/classes/ImageManager.php
and reinstall/activate the AJAX-ZOOM module for PrestaShop.
Since this override is not critical for AJAX-ZOOM and even optional, you can safely remove this file.
/modules/ajaxzoom/axZm
folder,
or create a new php.ini with something like zend_extension=/vrmd/webserver/php56/lib/ioncube_loader.so
.
In the browser, enter https://www.your-domain.com/modules/ajaxzoom/axZm/zoomLoad.php
.
If there is text stating something about IonCube, there is a problem with IonCube not working correctly.
Please find more information on that in the "FAQ" section below.
https://www.your-domain.com/modules/ajaxzoom/axZm/zoomLoad.php
in the browser address bar.
If the file zoomLoad.php is physically present, but you get an error 404 (not present) or error 500 (server error),
the most likely reason is that the folders or files permissions (chmod) have values where a group can edit them.
Especially on shared hosts, the server configuration often treats this as an unacceptable security issue.
You will most likely need to set the folders permission level (chmod) to 0755 and the files permission level (chmod) to 0644.
Skip the leading zero if you are using an FTP program such as FileZilla.
Please ensure that you have installed the latest version of the module. Since the PrestaShop store's validation process may take time and additional efforts, the module version that you have downloaded from there could not be up to date. However, you can always download the latest version from this website, and in case that this troubleshooting section does not help you further, we can still help you get things running using the latest codebase.
The zoom script triggers by the inline JavaScript code that inserts into product.tpl via a hook. That can be more to the bottom of the page. If there is a JavaScript error caused by a different module, which occurs above or before the AJAX-ZOOM initialization code, the browser stops there. Consequently, the AJAX-ZOOM script does not trigger.
Press the F12 button to open the developer tools (best use Chrome) and make sure that there are no JavaScript errors in the console. Track the errors to a module responsible for poorly written JavaScript and temporarily disable the suspicious module to ensure you are on the right path. Contact the developer of this module with the issue you have.
Such a JavaScript error may also be caused by a browser's extension that strips JavaScript files that track users. If, after stripping an inline script refers to a none existing JavaScript function or method, it may cause JavaScript errors that break all other functionalities triggered by JavaScript.
Under "Advanced Parameters" -> "Performance", disable "Smart cache for JavaScript" and "Smart cache for CSS", make sure AJAX-ZOOM is working, then you can enable it again.
Besides AJAX-ZOOM, that is a general procedure when you install new modules, which add references to JavaScript and CSS files.
If that does not help and the same problem persists, make sure that you or some other plugin does not insert a second jQuery-core script, e.g. in the footer template. Loading a second jQuery-core below the already inserted jQuery-core and jQuery-dependent JavaScript plugins causes all those plugins to be "errazed".
In some themes the product.tpl is missing the "product footer" hook, or it is "hidden" inside a different "if" statement. That is not something we could do via our module, so if there are no JS errors and there are no changes on the product detail page, please make sure that the HOOK code is present and does not depend on any other conditions.
In newer PrestaShop versions, you would need something like this in /themes/YOURTHEME/templates/catalog/product.tpl
of your theme:
{block name='product_footer'}
{hook h='displayFooterProduct' product=$product category=$category}
{/block}
In older PrestaShop versions, the code for the hook will look like this:
{if isset($HOOK_PRODUCT_FOOTER) && $HOOK_PRODUCT_FOOTER}{$HOOK_PRODUCT_FOOTER}{/if}
If the corresponding option to show AJAX-ZOOM in Quick-View is enabled but AJAX-ZOOM does not show up,
open /themes/YOURTHEME/templates/catalog/_partials/quickview.tpl
and make sure that you have
{hook h='displayProductAdditionalInfo' product=$product}
row somewhere at the bottom of that template.
https://www.your-domain.com/modules/ajaxzoom/axZm/zoomLoad.php
in the browser address bar,
receive the "AJAX-ZOOM is working!" message, but it takes forever to load, please do the following:
/modules/ajaxzoom/zoomConfigCustomAZ.inc.php
)
/modules/ajaxzoom/zoomConfigCustomAZ.inc.php
and hard code your licensing data as a core AJAX-ZOOM option (of course, replace the values with your licensing data):
$zoom['config']['licenses'] = array(
'your-domain.com' => array(
'licenceType' => 'Basic',
'licenceKey' => 'AAABBBCCC',
'error300' => 'DDDEEEFFF'
),
'your-other-domain.com' => array(
'licenceType' => 'Basic',
'licenceKey' => 'DDDEEEFFF',
'error300' => 'DDDEEEFFF'
)
);
If the RewriteBase is set in .htaccess or app config file or similar you might need to change some settings in AJAX-ZOOM config file
(/modules/ajaxzoom/axZm/zoomConfig.inc.php
) to make things work properly.
Having tested AJAX-ZOOM extension on PC (localhost) with Prestashop package from "Bitnami" (default settings)
we were able to get AJAX-ZOOM working under these conditions:
the url path to Prestashop was http://192.168.178.27/prestashop
, whereby the document root on PC was
C:/xampp/apps/prestashop/htdocs
and not C:/xampp/apps/prestashop/htdocs/prestashop
as one would expect.
This is due to RewriteBase which is enabled on default.
Also the document root here changed from standard XAMPP root which is C:/xampp/htdocs;
so as of now all these settings need to be set manually in /modules/ajaxzoom/axZm/zoomConfig.inc.php
for AJAX-ZOOM this way:
$zoom['config']['fpPP'] = 'C:/xampp/apps/prestashop/htdocs';
$zoom['config']['installPath'] = '/modules/ajaxzoom';
$zoom['config']['urlPath'] = '/prestashop/modules/ajaxzoom';
$zoom['config']['rewriteBase'] = '/prestashop';
Normally, you would not need to modify the template file. If, however, you want to substantially change the front-office functionality, e.g., implement a different AJAX-ZOOM example, you can do that.
The major AJAX-ZOOM template is located at /modules/ajaxzoom/views/templates/front/ajaxzoom.tpl
.
If you modify that file directly, it will be overwritten when you update the plugin.
Thus, you need to place it at a different location before modifying it.
PrestaShop does not allow you to define an exact location outside of the module for a template file,
but it allows you to override a template file from generally any module.
These are the locations based on the _isTemplateOverloadedStatic
method from /classes/module/Module.php
/* /classes/module/Module.php */
protected static function _isTemplateOverloadedStatic($module_name, $template)
{
if (Tools::file_exists_cache(_PS_THEME_DIR_ . 'modules/' . $module_name . '/' . $template)) {
return _PS_THEME_DIR_ . 'modules/' . $module_name . '/' . $template;
} elseif (Tools::file_exists_cache(_PS_THEME_DIR_ . 'modules/' . $module_name . '/views/templates/hook/' . $template)) {
return _PS_THEME_DIR_ . 'modules/' . $module_name . '/views/templates/hook/' . $template;
} elseif (Tools::file_exists_cache(_PS_THEME_DIR_ . 'modules/' . $module_name . '/views/templates/front/' . $template)) {
return _PS_THEME_DIR_ . 'modules/' . $module_name . '/views/templates/front/' . $template;
} elseif (Tools::file_exists_cache(_PS_PARENT_THEME_DIR_ . 'modules/' . $module_name . '/' . $template)) {
return _PS_PARENT_THEME_DIR_ . 'modules/' . $module_name . '/' . $template;
} elseif (Tools::file_exists_cache(_PS_PARENT_THEME_DIR_ . 'modules/' . $module_name . '/views/templates/hook/' . $template)) {
return _PS_PARENT_THEME_DIR_ . 'modules/' . $module_name . '/views/templates/hook/' . $template;
} elseif (Tools::file_exists_cache(_PS_PARENT_THEME_DIR_ . 'modules/' . $module_name . '/views/templates/front/' . $template)) {
return _PS_PARENT_THEME_DIR_ . 'modules/' . $module_name . '/views/templates/front/' . $template;
} elseif (Tools::file_exists_cache(_PS_MODULE_DIR_ . $module_name . '/views/templates/hook/' . $template)) {
return false;
} elseif (Tools::file_exists_cache(_PS_MODULE_DIR_ . $module_name . '/views/templates/front/' . $template)) {
return false;
} elseif (Tools::file_exists_cache(_PS_MODULE_DIR_ . $module_name . '/' . $template)) {
return false;
}
return null;
}
As you can see, the places you can save your modified version of the template are limited.
Thus, if you want to modify the ajaxzoom.tpl file, save it as, e.g.,
/themes/'._THEME_NAME_.'/modules/ajaxzoom/views/templates/front/ajaxzoom.tpl
and modify it there!
This migraion works provided that the products' IDs do not change after the migration.
ps_ajaxzoom
.
The ps_
prefix may be different in your installation.
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" packages, which can guide you through the installation process matching your operating system (Windows, Linux, FreeBSD, OpenBSD, OS X, Solaris).
Many hosting companies also have a guide in their FAQ on how to do this specifically for their configurations. Lastly, a mail to your hosting provider's 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 the "ionCube" extension via 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 an effect on the folder whereinto 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 the 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 the "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 or subdomain free of charge.
If you do not have a development server but would like to install the AJAX-ZOOM plugin on your production website, you should go to module/plugin settings and set the "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 via the plugin options and within the AJAX-ZOOM's core PHP configuration file.
1. All plugin options are accessed over the backend. For example, if you want to add Russian translation to the "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 the default language (please keep it) and want to add a 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.
The 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 of adding a translation to strings 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.
Usually, you do not need to download AJAX-ZOOM core as the module for PrestaShop automatically downloads it during the installation process. If, however, the automatic downloading of the core files fails, you will need to download that package manually. For more details, please see the installation section above.
Also, there is no need to order AJAX-ZOOM before you have successfully installed and tested it! You can download the AJAX-ZOOM module for PrestaShop and try/test it for free.
The license price primarily depends on the number (sum) of different images displayed on a domain in the AJAX-ZOOM viewer. To see the complete license agreement, please visit the download section.
/modules/override/ImageManager.php
till we have an universal solution for that
as it caused problems across different Prestashop versions.
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!