ZX Home Page Products Carousel

ZX Home Page Products Carousel

FREE

Add a rotating slider to your home page and automatically display your latest products, specials, featured, bestsellers or simply a custom list of products.

We DO offer professional installation service for the module, although you're most welcome to install it yourself. Installation is simple, but some basic code understanding is required.

FREE DOWNLOAD PRO install service - $20

Add a responsive rotating slider to your home page and automatically display your latest products, specials, featured, bestsellers or simply a custom list of products.

Admin controls allow you to choose the type of products you wish to rotate. If the automated options are not good enough, you can create a list of products that you want to see in the slider. You can also set the number of products displayed, as well as change some other settings.

NOTE: some CSS tweaks might be required after installing the module - please understand that every store is unique it's almost impossible to create this kind of module that will work out of the box without any tweaks for any website using any template.

IMPORTANT: this module has a support thread in the official Forum. If you have ANY problems installing or using the module, please check the Forum. If the question hasn't already been answered, feel free to post your question there. Please understand that it might take some time before you get a reply. Private support via email is available only as commercial (paid) support.


Based on Owl Carousel and using jQuery

Owl Carousel is one of the most popular jQuery plugins used to rotate/slide website elements. It's fast, simple and well supported, and it's licensed under MIT. It's API has a lot of options making it easy to customize and use.

Touch and Drag Support

Designed specially to boost mobile browsing experience. Mouse drag works great on desktop too!

Fully Responsive

Almost all options are responsive and include very intuitive breakpoints settings.

Controlled from the admin

You don't need to understand code to use the plugin - just click a few options in the admin and you're ready to go. If you add new products, it will automatically be shown on your home page. If you put a new product on Special, it will automatically show up in the slider. Bestsellers list can change all the time - most popular products will automatically be picked and placed on your home page. Of course, all depending on the Carousel Mod you choose.

Current Version: 1.0
jQuery version: 1.8.3+
Additional jQuery libraries Owl Carousel (packed)
Database Affected: YES - backup your database
Core Files Affected: none
Template Files Affected: 3

Installing

Requirements

This plugin was built for Zen Cart version 1.5.5 or higher. jQuery and Font Awesome are considered included. If you're using an earlier version of Zen Cart or your template doesn't load it, please make sure you're loading jQuery and Font Awesome on your home page. Both are available from CDNs, or you can load it from your own server. If you don't want to use Font Awesome, simply modify tpl_index.slider.php and load your own prev/next images.


Before you proceed, make a backup of your database. Installation is done at your own risk.

Unzip the files from "files" directory to your computer. Connect to your server via FTP. Check your admin directory name and rename the one in this package accordingly. Next, check your template directory. You can do that by going into your Zen Cart admin section and go to Tools->Template Selection and check what it says under Template Directory. Of course, you're interested in the one you're currently using. Now, browse the files you just unzipped and go to includes/templates directory. Rename "YOUR_TEMPLATE" to the actual template name, and rename YOUR_ADMIN to the name of your admin directory. Now, upload your files using your FTP client (I recommend using Filezilla) to the store root. Be careful, the store root directory on the server is where your store is installed, not necessarily domain root.

There are 3 files that might get overwritten:

  • includes/templates/YOUR_TEMPLATE/css/index_home.css
  • includes/templates/YOUR_TEMPLATE/templates/tpl_index_default.php
  • includes/templates/YOUR_TEMPLATE/templates/tpl_index_categories.php

In case you have made any changes to those files, make sure you merge it carefully. Otherwise, you can simply overwrite.

If your index_home.css file needs merging, make sure you place the new @import rules at the top of the file.

After you have finished uploading the files, go to your Zen Cart admin section and simply refresh the admin. You should see a notice that the plugin was installed and find a new entry in the Configuration menu.

In case this automated installation fails for whatever reason, you can run the SQL patch manually. Go to Tools->Install SQL Patches. Use the provided sql file, copy/paste the content and click the Submit button. Make sure you use the appropriate file that matches your Zen Cart version. If you're not sure which version you're using, go to Tools->Server/Version Info.


Configuration

To configure the module, go to Admin->Configuration->ZX Products Carousel
The module is disabled by default, you should enable it if you want to use it.
All options are self-explanatory. For more information about each option, you can simply click on it.


Additional information

If you want to change the look of your slider, you can edit the includes/templates/YOUR_TEMPLATE/css/index_home.css file - that's just about everything you'll need to edit.


Common Issues

I tested the plugin many times and it was also checked by other people, so it should work when you are using a well coded template and plugins. Here is a list of common issues and how to solve them:

  • Your template or another plugin includes another jquery version in a bad way. You can easily check that by using the console of your browser. If using Firefox or Chrome, you can right-click on any element, select Console tab and refresh the page. If you get an error in the console, like: jQuery.owlCarousel is not a function
    in 99% of cases, you have a jQuery issue that is caused by another module or your template. Please understand that I normally do not fix these issues for free. When you are unsure which module or template is causing this issue, install this module on a clean Zen Cart installation without any other modules and use the classic template, then activate each of your modules one after another and check when the issue comes up.

Sources and Credits

External libraries used in this plugin: