Dynamic Content in OpenCart: Customizing the cycle plugin

We have placed jCarousel to display our products. In this recipe, we use the jQuery cycle plugin with our products. We first download the jQuery cycle plugin.

1.  Getting started

We need jQuery enabled for jQuery cycle to work with our store shop. We have already shown how to install jQuery in a earlier recipe.

2.  How to do it

Go through the following steps to customize the jQuery cycle plugin:

1. First, download the jQuery cycle JavaScript files from http://jquery.malsup.com/cycle/download.html. We extract the downloaded compressed file.

We will use the jquery.cycle.min.js. We copy this file to catalog\view\ javascript\jquery.

2. We need to add jQuery and the jQuery cycle JavaScript file into our file. For this recipe, we will add this plugin for the latest products in the home section. So, we add the following code in latest_home.tpl as we are not using the jQuery cycle plugin throughout the site:

<script type=”text/Javascript” src=”catalog/view/javascript/ jquery/ jquery.cycle.min.js”></script>

3. Then, we will modify the existing table-based structure to div-based. We remove the following code:

<table class=”list”>

//…

</table>

4. And in place of that we write the following:

<div class=”slideshow”>

//…

</div>

5. We also again remove the tr tag:

<tr>

//…

</tr>

6. And replace the td HTML tag with the following div tag:

<td style=”width: 25%;”>

//…

</td>

7. The required div tag is:

<div class=”slideshow-image-container”>

//…

</div>

8. We will initialize the jQuery cycle plugin with the following code:

<script type=”text/Javascript”>

$(document).ready(function() {

$(‘.slideshow’).cycle({

fx: ‘fade’

});

});

</script>

9. Now, go to the browser and refresh to see the effect of our change:

10. We center the product So, we add the following margin-left property to our image in the stylesheets.css file:

.slideshow .slideshow-image-container {

margin-left: 200px;

}

11. Then, the image container moves to the center of the latest product See the following image:

12. We need to do some styling to our product We will have a thick border around our image. So, we add these styling attributes:

.slideshow .slideshow-image-container {

margin-left: 200px;

border: 10px solid #ddd;

}

13. This creates a border around the product image like the following:

14. The product image and the descriptions are all left So, we make it centered by adding the following style tag:

.slideshow .slideshow-image-container {

margin-left: 200px;

text-align: center;

padding: 10px;

border:10px solid #ddd;

}

15. Now, our jQuery cycle looks like this:

3. There’s more…

You can also see the Accordion jQuery plugin. It is also a very popular jQuery plugin. You can add and initialize it in almost the same way. You can read the documentation of the plugin at http://plugins.jquery.com/project/accordion.

Source: Hasan Tahsin (2011), OpenCart 1.4 Template Design Cookbook, Packt Publishing.