Latest version: 5.4.25 (Change Log)
Release date: November 8th, 2023
Download AJAX-ZOOM Software

Opencart module

Demo frontend 2.0/3.0 Demo frontend 1.5

Compatibility

Opencart - 1.5.x, 2.0.x, 2.1.x, 2.2.x, 2.3, 3.0.x
[last tested with Opencart 3.0.3.8]
PHP 5.4 - 8.x

In the frontend template, the AJAX-ZOOM plugin for OpenCart replaces the area that displays product images with the AJAX-ZOOM "zoom on hover" extension. Besides efficient displaying high-resolution images, the AJAX-ZOOM extension features 360 views and 3D multi-level product views. Administrators can create those views directly in the backend area of the OpenCart system. They can upload the 360 images over the interface or import them from ZIP files that were previously uploaded to a specified folder.

It is possible to configure each 360-spin individually or adjust the settings globally over the backend interface. With the hotspots editor that opens in a new window, administrators are able to create interactive markings on the 360 product views.

With a different editor, that is also a part of the backend integration, there is a possibility to create 360 product tours by selecting areas of the 360 view and describing them. The software automatically creates a slider gallery with thumbnails of those areas. When the user clicks on a thumbnail, the viewer spins and zooms to that spot using a selectable animation.

For regular images, there are no changes required. The AJAX-ZOOM plugin automatically fetches and displays them as an item in the thumbnails gallery along with the 360 product views if present.

You can freely download the AJAX-ZOOM plugin for Opencart and test it in your development environment!

General features

Backend screenshots

Frontend screenshots

Handling regular images

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

Handling 360°/3D

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

Requirements

Installing Opencart Ver. 1.5.x

  1. Make sure VQMOD is installed!
  2. Unpack the ZIP file for Opencart Ver. 1.5.x and upload everything into the root of your store."
  3. You can manually download AJAX-ZOOM and upload the content of "/axZm" folder into "/ajaxzoom/axZm" now or let the installer make it instantly for you later.
  4. Make sure that "/ajaxzoom", "/ajaxzoom/pic" and "/ajaxzoom/zip" are writable by PHP (e.g. chmod 0775). Best make it 0777 first.
  5. Now AJAX-ZOOM should be visible in Extensions > Mudules. Install the module now.
  6. After installation, please check that there is "/ajaxzoom/axZm" folder and that it is not empty. If not, please see troublehooting.
  7. Does not help? Contact our support!

Installing Opencart Ver. 2.x, 3.x

  1. Upload the AJAX-ZOOM extension for Opencart 2.x ZIP file over Extension -> Extension Installer in the Backend of your shop installation.
  2. In Extension > Modifications at the top of the page, press the blue "refresh" button.
  3. Make sure that "/ajaxzoom", "/ajaxzoom/pic" and "/ajaxzoom/zip" are writable by PHP (e.g. chmod 0775). Best make it 0777 first!
  4. Install the Module in Extension > Modules now.
  5. After installation, please check that there is "/ajaxzoom/axZm" folder and that it is not empty. If not, please see troublehooting.
  6. In extensions -> modifications hit "refresh" button.
  7. That is not required, but for ocmod adjustments, you could rename install.xml into ajaxzoom.ocmod.xml and copy it into /system folder. Then in extensions -> modifications hit "refresh" button whenever changes are made in ajaxzoom.ocmod.xml

Troubleshooting

Dear webmaster or whoever reads this. OpenCart is a software where you need to know what you are doing, and if you do, you can do a lot with it. For example, the templates or themes are not standardized, so manual adjustments are frequently needed.

If you have installed Opencart as a beginning shop owner with no coding experience and encounter troubles where you don't understand where to start looking to solve the problem, in this case, we recommend you either hire a professional that supervises your e-commerce intend or don't use Opencart at all! PrestaShop, for example, is undoubtedly a better choice for non-coders than Opencart. The modules system is much more stable. It uses predefined "hooks" and not code replacement as Opencart does to modify something. And you also get more features out of the box without any modules.

In short, and to summarize: OpenCart is a fundamental cart engine that programmers have created for programmers. If you are not a programmer and don't have a programmer who helps, you better don't start using OpenCart.

AJAX-ZOOM core files

During installation, the installer downloads AJAX-ZOOM core files automatically. In some cases, e.g., when 'allow_url_fopen' is disabled or timeout occurs, the process can fail without notice. Please check that the folder /ajaxzoom/axZm (in Opencart 3, the path is /system/library/vendor/ajaxzoom/axZm) exists and it is not empty. If it does not exist or it is empty, please download AJAX-ZOOM from our page and extract axZm folder into /ajaxzoom/axZm (or /system/library/vendor/ajaxzoom/axZm in Opencart 3), manually via FTP.

Templates

The modification system in Opencart ist quite error-prone. Especially if you change the frontend template or install a new theme, this search in VQMOD / OCMOD might not find the requested string to put the code before or after:


<file path="catalog/view/theme/*/template/product/product.tpl">
    <operation>
        <search><![CDATA[
            <?php if ($thumb || $images) { ?>
        ]]></search>
        <add position="before"><![CDATA[
            <?php echo $ajaxzoom; ?>
            ]]></add>
    </operation>
</file>
    

For OpenCart 3, you would need to modify this modification to show in a theme that has a differently structured template:


    <file path="catalog/view/theme/*/template/product/product.twig">
        <operation>
            <search index="0"><![CDATA[{% if thumb or images %}]]></search>
            <add position="replace"><![CDATA[
                {{ ajaxzoom }}
                {% if thumb or images %}
                ]]></add>
        </operation>
    </file>
    

This results in AJAX-ZOOM not showing at all on the product detail page. In this case, you should adjust the "Search" statements manually. For ocmod adjustments, you could rename install.xml into ajaxzoom.ocmod.xml and copy it into the /system folder. Then in extensions -> modifications hit "refresh" button whenever changes are made in ajaxzoom.ocmod.xml;

Modifications in general

As already mentioned above, the modification system in Opencart is mighty but error-prone. For example, if you or a different module have already made modifications, the modifications in the install.xml may fail.

Consider this modification in Opencart 3 install.xml


<file path="admin/controller/common/column_left.php">
    <operation>
        <search><![CDATA[if ($this->user->hasPermission('access', 'catalog/product')) {]]></search>
        <add position="before"><![CDATA[
        if ($this->user->hasPermission('access', 'catalog/product')) {
            $catalog[] = array(
                'name'       => 'AJAX-ZOOM',
                'href'     => $this->url->link('extension/module/ajaxzoom/products', 'user_token=' . $this->session->data['user_token'], true),
                'children' => array()
            );
        }
            ]]></add>
    </operation>
</file>
    

If you have renamed the "admin" folder to another name, the above operation will fail. It may be possible to write the mods better than that (let us know if there is a solution), but anyway, you should best look into install.xml of the package before installing and check if all paths and mods will work with what you have already modified.

Other

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

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" 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).

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

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

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° вид';
You can also move the file [ajaxzoom plugin directory] /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.

Download

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

The license price primarily depends on the number of different images, which are displayed on a domain in the AJAX-ZOOM viewer. For the complete license agreement, please visit the download section.

Changelog

Ver. 3.1
2018-06-29
Small adjustments and notes for the new AJAX-ZOOM (core files) "simpleMode" option and "Simple" license type.
Ver. 3.0
2017-04-30
Implemented new AJAX-ZOOM mouseover zoom 5. Several fixes. Also tested in XAMPP. After update, please "reset" AJAX-ZOOM module settings!
Ver. 2.1.1
2016-10-28
Small fix in install.xml
Ver. 2.1
2016-07-14
Added hotspot editor. Updated 360 product tour editor. Few other fixes.
Ver. 2.0
2016-06-17
Added support for Opencart Version 2.2.0.0; corrected some bugs which caused notices / warnings. Tested again Opencart Versions 1.5 - 2.2
Ver. 1.2
2016-06-14
Added 360 degree "Product Tour" and made some other improvements.
Ver. 1.1
2016-05-05
Fixed database table prefix issue
Ver. 1.0.0
2016-01-20
Opencart module released

Comments (4)

Vadim Jacobi 2019-03-01 20:15:10
Vadim Jacobi Under the /ajaxzoom/pic/ directory there should be these folders: 360, cache, tmp, zoomgallery, zoommap, zoomthumb, zoomtiles_80. Make sure that PHP can write in those folders. Set appropriate CHMOD. Other than that, the error images should contain the path of what is missing. Please check that this path is correct.
Wredot 2019-03-01 13:56:08
Wredot I upload image (single and zip file) and all time no image, only: Image does not exist.
Vadim Jacobi 2016-10-21 01:18:36
Vadim Jacobi As of today, the module does not support Opencart 2.3. We are working on this issue.
Luciano 2016-10-21 00:51:45
Luciano After installing the extension, it seems that everything went well, but when I try to edit and save, I get the message

"You do not have permission to access this page, please refer to your system administrator."

I've added all the permissions the user group Administrator in System > Users > User Group > Administrator

Can you help me?

Leave a Comment

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.

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!

Live-Support-Chat