OpenCart 1.4 Template Design Cookbook

Over 50 incredibly effective and quick recipes for building modern eye-catching OpenCart templates

(For more resources on Opencart, see here.)

Customizing the cycle plugin

In this recipe, we use the jQuery cycle plugin with our products. We first download the jQuery cycle plugin.

Getting started

We need jQuery enabled for jQuery cycle to work with our store shop.

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 catalogviewjavascriptjquery.
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 image. 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 area. See the following image:

    

12. We need to do some styling to our product images. 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 aligned. 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:

    

    Unlock access to the largest independent learning library in Tech for FREE!

    Get unlimited access to 7500+ expert-authored eBooks and video courses covering every tech area you can think of.

    Renews at $15.99/month. Cancel anytime

    START FREE TRIAL

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.

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.

Getting started

We need jQuery enabled for jQuery cycle to work with our store shop.

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 element. 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 display. 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 image. 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 center. 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:

    

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.