OpenCart 1.4 Template Design Cookbook

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

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-themes-using-jcarousel-plugin-img-1

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

opencart-themes-using-jcarousel-plugin-img-2

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-themes-using-jcarousel-plugin-img-3

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 catalogviewJavascriptjQuery 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 catalogviewiavascriptjquery. Then, in the jCarousel folder, create another folder named js. We will place any one of the two files under catalogviewjavascriptjqueryjcarouseljs.

And bring the skins folder under the catalogviewjavascriptjqueryjcarousel.

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 catalogviewthemeshoptemplatecommon. 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="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:

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 catalogviewthemeshoptemplatemodule. We add the following links:
```
<script type="text/javascript" src="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" />

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>
```

And write the following code, here by the three dots, we mean other inner codes:
```
<ul id="latestcarousel" class="jCarousel-skin-tango">
//...
</ul>
```

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.

We also remove the tr tag:
```
<tr>
//...
</tr>
```

Now, remove the td tag and the following:

<td style="width: 25%;"><?php if (isset($products[$j])) { ?>
//...
<?php } ?></td>

And, we replace it with the following code:
```
<li>
//...
</li>
```

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-themes-using-jcarousel-plugin-img-4

Here, we need to adjust the height and width of the carousel.

To change the width of the carousel, open the skin.css file under catalogiewJavascriptjQueryjCarouselskins. 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;
}

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 ₹800/month. Cancel anytime
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:

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.

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;
}

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

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;
}
```

This makes our carousel look like the following:

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;
}

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

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;
}

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

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/.

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>