OpenCart Themes: Using the jCarousel Plugin

Exclusive offer: get 50% off this eBook here
OpenCart 1.4 Template Design Cookbook

OpenCart 1.4 Template Design Cookbook — Save 50%

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

$26.99    $13.50
by Tahsin Hasan | April 2011 | Open Source Web Development

Templates in OpenCart provide a powerful way to make your site look exactly the way you want either using a single template for the entire site or a separate template for each site section. Although it sounds like an easy task to build and maintain templates, it can be challenging to get beyond the basics and customize templates to meet your needs perfectly.

In this article by Tahsin Hasan, author of OpenCart 1.4 Template Design Cookbook, we'll cover:

  • Installing jQuery and jCarousel
  • Displaying products with jCarousel
  • Displaying products on jCarousel vertically

 

OpenCart 1.4 Template Design Cookbook

OpenCart 1.4 Template Design Cookbook

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

        Read more about this book      

(For more resources on Opencart, see here.)

Installing jQuery and jCarousel

In this recipe, we will download jQuery and jCarousel and also install them into our store. By default, OpenCart comes with jQuery installed.

Carousels have become a popular means to display products. There are many different types of carousels. But, we will use jCarousel for this recipe. You can use your favourite one.

Getting started

We need jQuery for our dynamic content throughout the site. jQuery is added by default with OpenCart. But here, we will also see how to download it and install it. We will download and install jQuery and jCarousel. First, we will go to the sites from where we can download them. If jQuery is not present in your site, you can download it from http://docs.jquery.com/Downloading_jquery. We will download the latest jQuery JavaScript file.

How to do it

First, we need to download the required files to use jCarousel. We need the jQuery JavaScript file and jCarousel JavaScript and css files. To check whether our site is jQuery-enabled or not, we can use web developer Firefox addons.

Click on the information tab of Web Developer:

OpenCart 1.4 Template Design Cookbook

It will display many sub-menus. Every sub-menu has its own importance. We select View JavaScript.

OpenCart 1.4 Template Design Cookbook

Then, a new tab will open containing all the JavaScripts for the web page in it. You can contract or expand the links. If our store already has jQuery, then we can find it in this page. Otherwise, it won't be in this page or it will show a 404 error.

OpenCart 1.4 Template Design Cookbook

Since our store is jQuery-enabled by default, we don't need to install jQuery. We have shown the installation of jQuery so that you can have full control of the process. There are several releases available to download. After downloading jQuery, we will place it under the catalog\view\Javascript\jQuery folder.

Now, we will download jCarousel. We can download it from http://sorgalla.com/projects/jCarousel/.

Then, extract the compressed file. There will be many files in the extracted folder. Under the lib folder, we have an uncompressed and minified version of jCarousel. We create a folder named jCarousel under catalog\view\iavascript\jquery. Then, in the jCarousel folder, create another folder named js. We will place any one of the two files under catalog\view\javascript\jquery\jcarousel\js.

And bring the skins folder under the catalog\view\javascript\jquery\jcarousel.

Displaying products using jCarousel

We have installed jQuery and jCarousel in the previous recipe. Here, we will see how we can display products with jCarousel. In this recipe, we are going use jCarousel for the latest products, but you can use it for other modules as well.

Getting started

First, we will open the header.tpl file under catalog\view\theme\shop\template\common. If we don't have jQuery in our site, then we need to add it here. See the following code block:

<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="catalog/view/javascript/jquery/jquery-1.3.2.min.js"></script>

How to do it

We will follow the steps below for jCarousel addition to our store:

  1. First, we need to add the links for jCarousel JavaScript and css files to work with jCarousel. As we are using jCarousel for displaying the latest products, we place the links for those files in the latest_home.tpl under catalog\view\theme\shop\template\module. We add the following links:
    <script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="catalog/view/javascript/jquery/jcarousel/lib/jquery.jcarousel.js"></script>

    <link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/jcarousel/skins/tango/skin.css" />
  2. Now, we modify some HTML element structure to place the products in jCarousel. The current structure is table based. We will use <ul> <li> instead of the table structure. We remove the following tag:
    <table class="list">
    //...
    </table>
  3. And write the following code, here by the three dots, we mean other inner codes:
    <ul id="latestcarousel" class="jCarousel-skin-tango">
    //...
    </ul>
  4. Here latestcarousel ID is our carousel container ID. There are two skins available for jCarousel, one is tango and the other is ie7. Here, we are using tango.
  5. We also remove the tr tag:
    <tr>
    //...
    </tr>
  6. Now, remove the td tag and the following:
    <td style="width: 25%;"><?php if (isset($products[$j])) { ?>
    //...
    <?php } ?></td>
  7. And, we replace it with the following code:
    <li>
    //...
    </li>
  8. Now, we will initialize jCarousel.
    <script type="text/javascript">
    jQuery(document).ready(function() {
    jQuery('#latestcarousel').jcarouseljcarousel();
    });
    </script>

    If we see our changes in the browser, then we will find it as:

    OpenCart 1.4 Template Design Cookbook

  9. Here, we need to adjust the height and width of the carousel.
  10. To change the width of the carousel, open the skin.css file under catalog\iew\Javascript\jQuery\jCarousel\skins. We are going to change the following code:

    .jcarousel-skin-tango .jcarousel-container-horizontal {
    width: 245px;
    padding: 20px 40px;
    }

    To the following code:

    .jcarousel-skin-tango .jcarousel-container-horizontal {
    width: auto;
    padding: 20px 40px;
    }

    Again, if we are going to use jCarousel in some other places as well, it is not smart to change the skin.css. Instead we can override it in our theme-css for a specific region. For example, #content .middle .jcarousel-skin-tango .jcarousel-container-horizontal. Here, we have just shown you one instance of jCarousel usage.

    We changed the width to auto. So, in the browser, the carousel will be like this:

    OpenCart 1.4 Template Design Cookbook

  11. There is style for both vertical and horizontal carousel in the stylesheet. As we are now using the horizontal carousel, we adjust the styles for horizontal only.
  12. The area showing the images of the products is smaller compared to the carousel width. So, we will adjust the width. We set the width to auto.

    .jcarousel-skin-tango .jcarousel-clip-horizontal {
    width: auto;
    height: 75px;
    }

  13. Now, the carousel is displaying products along the full width of the carousel. See the following image:

    OpenCart 1.4 Template Design Cookbook

    Our height for the carousel is small. Let's change the height of it. We change the height to 200px:

    .jcarousel-skin-tango .jcarousel-clip-horizontal {
    width: auto;
    height: 200px;
    }
  14. This makes our carousel look like the following:

    OpenCart 1.4 Template Design Cookbook

  15. To enlarge the height of the product image display area, we need to change the following code:

    .jcarousel-skin-tango .jcarousel-item {
    width: 75px;
    height: 200px;
    }

  16. We change the height to 200px. In the browser, now our carousel looks like this:

    OpenCart 1.4 Template Design Cookbook

  17. We need to adjust the margin property for our product images. We change the margin-right property to 50px.

    .jcarousel-skin-tango .jcarousel-item-horizontal {
    margin-left: 0;
    margin-right: 50px;
    }

  18. This makes spacing between the product images. You need to refresh the browser to view the changes:

    OpenCart 1.4 Template Design Cookbook

  19. We will set options for the carousel. There are several options. You can see the available options in this link: http://sorgalla.com/projects/jcarousel/.
  20. We used the following options and placed it in the latest_home.tpl, the page in which we are showing jCarousel:

    <script type="text/javascript">
    jQuery(document).ready(function() {
    jQuery('#latestcarousel').jcarousel({
    scroll: 1,
    visible: 3,
    auto: 3,
    rtl: true,
    wrap: 'circular'
    });
    });
    </script>

 

OpenCart 1.4 Template Design Cookbook Over 50 incredibly effective and quick recipes for building modern eye-catching OpenCart templates
Published: March 2011
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

 

        Read more about this book      

(For more resources on Opencart, see here.)

  1. Let's discuss the options that we have used in our carousel:
    • Scroll: With this option, we set how many images will be scrolled by a single rotation. We set it to 1.
    • Visible: This option tells how many images will be visible in the carousel. We set the visible product images to 3.
    • Auto: We set the number of seconds after which the carousel will be automatically rotated. We set it to 3.
    • Rtl: This option means right to left scroll. By default, the carousel scrolls from left to right.
    • Wrap: If we set the wrap option to Circular, then the carousel will rotate as circular.

    Now, let's see how our carousel looks:

    OpenCart 1.4 Template Design Cookbook

  2. If you want to change the colors of our carousel, then you need to adjust some styles. To change the background color of the carousel, you need to apply the following style:

    .jcarousel-skin-tango .jcarousel-container {
    -moz-border-radius: 10px;
    background: #94f8f7;
    border: 1px solid #346F97;
    }

  3. This changes the background color to a shade of green:

    OpenCart 1.4 Template Design Cookbook

  4. And, change the border color to this:
    border: 1px solid #abe9fd;
  5. Then, navigational previous and next arrows are placed a little high in the carousel. We set the top property to 103px.

    .jcarousel-skin-tango .jcarousel-next-horizontal {
    position: absolute;
    top: 103px;
    right: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(next-horizontal.png) no-repeat 0 0;
    }

  6. Also, for the previous button, the style changes to:

    .jcarousel-skin-tango .jcarousel-prev-horizontal {
    position: absolute;
    top: 103px;
    left: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(prev-horizontal.png) no-repeat 0 0;
    }

  7. The previous and next button position changes to this:

    OpenCart 1.4 Template Design Cookbook

  8. We will change the buttons now. You create new buttons or search the Internet for previous and next buttons. We place the buttons under catalog\view\javascript\jquery\jcarousel\skins\tango. You need to rename your buttons as prev-horizontal.png and next-horizontal.png.
  9. Now, in the browser, our latest product carousel appears as the following:

    OpenCart 1.4 Template Design Cookbook

Displaying products vertically

We have seen the horizontal carousel so far. In this recipe, we will see how we can use the vertical carousel. We make the carousel horizontal for the home module of the latest products. Because on the left and right column, we have less space, we can use the vertical carousels there. It will utilize our space.

Getting started

Open the latest.tpl file in our favourite editor under catalog\view\theme\shop\template\module.

How to do it

To add the vertical carousel, we will follow these steps:

  1. First, we will add the required stylesheet and JavaScript files. As this is a new recipe, we are adding jCarousel again:
    <script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="catalog/view/javascript/jQuery/jcarousel/lib/jquery.jcarousel.js"></script>
    <link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/jcarousel/skins/tango/skin.css" />
  2. You need to remove the table structure and replace it with ul li. See the following code block:
    <table cellpadding="2" cellspacing="0" style="width: 100%;">
    //...
    </table>
  3. Remove it and replace it with:
    <ul id="latestcarousel" class="jcarousel-skin-tango">
    //...
    </ul>
  4. Also, we will remove the following code:

    <tr>
    <td valign="top" width="1">
    //...
    </td>
    </tr>

  5. We replace it with:
    <li>
    //...
    </li>
  6. We need to initialize the jCarousel with the following code:

    <script type="text/javascript">
    jQuery(document).ready(function() {
    jQuery('#latestcarousel').jcarousel({
    scroll: 1,
    vertical: true,
    visible: 3,
    auto: 1,
    rtl: true,
    wrap: 'circular'
    });
    });
    </script>

  7. Here, we use the previous options as described earlier. Additionally, we use the vertical option. By setting this to true, we convert our carousel from horizontal to vertical.
  8. We will see our carousel in action in the browser:

    OpenCart 1.4 Template Design Cookbook

  9. Now, we will change the width of our carousel. For the vertical carousel, we need to set the width differently. We will change the width to auto in the following code:

    .jcarousel-skin-tango .jcarousel-container-vertical {
    width: auto;
    height: 245px;
    padding: 40px 20px;
    }

  10. This makes our carousel like this:

    OpenCart 1.4 Template Design Cookbook

  11. The product images are on the left side. We increase the width of the carousel. So, the images will be placed in the center:

    .jcarousel-skin-tango .jcarousel-clip-vertical {
    width: 135px;
    height: 245px;
    }

  12. This makes our carousel look like this:

    OpenCart 1.4 Template Design Cookbook

  13. Our navigational button is slightly left justified. We will place it at the middle. We change the left attributes to 63px.

    .jcarousel-skin-tango .jcarousel-next-vertical {
    position: absolute;
    bottom: 5px;
    left: 63px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(next-vertical.png) no-repeat 0 0;
    }

  14. If we refresh our browser, we see the changes:

    OpenCart 1.4 Template Design Cookbook

  15. We will change the previously downloaded horizontal buttons to vertical. Open up the image with GIMP and create the duplicate image. Right click on the image. Then, go to Image | Transform | Rotate 90 clock-wise. Save the image as next-vertical.png.

    OpenCart 1.4 Template Design Cookbook

  16. Again, open up our downloaded horizontal buttons and create the duplicate image. Right click on the image. Then, go to Image | Transform | Rotate 90 Anti-clock-wise. And, save the image as prev-vertical.png:

    OpenCart 1.4 Template Design Cookbook

  17. We are going to show the product image on the left side and the product description on the right side. We make the following code adjustment:
    <li><div style="float: left;"><a href="<?php echo str_replace('&', '&amp;', $product['href']); ?>"><img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="<?php echo $product['image']; ?>" alt="<?php echo $product['name']; ?>" /></a></div>
    <div style="float: right;"><a href="<?php echo str_replace('&', '&amp;', $product['href']); ?>"><?php echo $product['name']; ?></a>
    //...
    <?php } ?></div>
  18. As our product display width is small, we need to widen the area. We change the following code:

    .jcarousel-skin-tango .jcarousel-item {
    width: 125px;
    height: 200px;
    }

  19. Then, our vertical carousel becomes like this:

    OpenCart 1.4 Template Design Cookbook

  20. We add border and padding top property to our carousel. We add the following code for this styling:

    .jcarousel-skin-tango .jcarousel-item-vertical {
    margin-bottom: 10px;
    border: 1px solid #ddd;
    padding-top: 10px;
    }

  21. We also add a hover effect to our border:

    .jcarousel-skin-tango .jcarousel-item-vertical:hover{
    border: 1px solid #aaa;
    }

  22. When we go to the browser, we find our changes:

    OpenCart 1.4 Template Design Cookbook

Summary

In this article we saw how to display our products with different styles and how they can appear in a modern attractive way.


Further resources on this subject:


OpenCart 1.4 Template Design Cookbook Over 50 incredibly effective and quick recipes for building modern eye-catching OpenCart templates
Published: March 2011
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

About the Author :


Tahsin Hasan

Tahsin Hasan is a software engineer from Bangladesh. He passed the Zend Certification Examination on 09 August, 2009 and has become the seventeenth Zend Certified Engineer (ZCE) from Bangladesh. This is the top-most certification on PHP from Zend, the developer of this outstanding scripting language. He is a tech enthusiastic and always keeps himself well-equipped with latest technologies. He has written another book, Opencart 1.4 Template Design Cookbook, with Packt.

Tahsin Hasan has profound knowledge of LAMP environment. His advanced understanding of database environments and Apache web server is an asset. He has proficiency in scalability and optimizing server performance. He has worked with Symfony, CakePHP, Codeigniter and Zend Framework.

Tahsin Hasan shares his ideas and knowledge on tahSin’s gaRage; the address is http://newdailyblog.blogspot.com. He welcomes everyone on his blog to discuss latest web technologies. You can get him at tahsin352@gmail.com.

Books From Packt


OpenCart 1.4: Beginner's Guide
OpenCart 1.4: Beginner's Guide

CakePHP 1.3 Application Development Cookbook
CakePHP 1.3 Application Development Cookbook

PHP 5 Social Networking
PHP 5 Social Networking

OpenAM
OpenAM

Expert PHP 5 Tools
Expert PHP 5 Tools

YUI 2.8: Learning the Library
YUI 2.8: Learning the Library

CodeIgniter 1.7 Professional Development
CodeIgniter 1.7 Professional Development

WordPress 3 Complete
WordPress 3 Complete


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software