Dynamic Content in OpenCart: Modifying the side column with the cycle plugin

We modified the latest product block in the center column with the jQuery cycle plugin. Now, if we want to show our products on the side columns with the jQuery cycle, then this recipe will guide us to our destination.

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 an earlier recipe: Installing jQuery and jCarousel.

2. How to do it

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

1. To use the plugin, first, we need to add the required file links to the latest.tpl file as we are using the jQuery cycle for latest products. We add the following line in our latest.tpl file:

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

2. Then, like our previous recipes, we will remove the table-based style and instead, use div-based styles:

<table cellpadding=”2″ cellspacing=”0″ style=”width: 100%;”>

//…

<tr>

//…

</tr>

//..

</table>

3. And, we write the following tag in place of the table element:

<div class=”slideshow”>

//…

</div>

4. We also li tag with a div See the following code:

//remove this tags

<li>

//…

</li>

//replace with the following element

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

//…

</div>

5. Now, we initialize the cycle plugin with the code below:

<script type=”text/Javascript”>

$(document).ready(function() {

$(‘.slideshow’).cycle({

fx:’fade’

});

});

</script>

6. If we go to the browser, then we can see the following changes:

7. We will add some styling to the above The products are displaying on the left side of the side column. To make it centered, we add margin to the style:

.slideshow .slideshow-image-container { margin-left: 60px; }

8. Our right column changes like this:

9. We add a border to our We do the following styling addition:

.slideshow .slideshow-image-container {

margin-left: 60px;

border: 5px solid #ddd;

}

10. When we go to the browser, we find the following state of our right side bar:

11. We need to add some padding and make our text aligned to the So, we also add the following styles:

.slideshow .slideshow-image-container {

margin-left: 60px;

border: 5px solid #ddd;

padding:5px;

text-align: center;

}

12. We refresh our browser and see our changes in action:

3.  There is more

You can also add this plugin on the left side of our OpenCart store. Just change the position of the module from the module section of the admin panel.

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