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.
1. 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=”catalog/view/javascript/ jquery/jquery-1.3.2.min.js”></script>
2. How to do it
We will follow the step below for jCarousel addition to our store:
- First, we need to add the links for jCarousel JavaScript and css files to work with 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=”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 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 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
<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:
- Here, we need to adjust the height and width of the carousel.
- To change the width of the carousel, open the 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:
- There is style for both vertical and horizontal carousel in the As we are now using the horizontal carousel, we adjust the styles for horizontal only. We will see the vertical carousel later in this chapter.
- The area showing the images of the products is smaller compared to the carousel 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 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 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 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>
- 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 We set it to 1.
- Visible: This option tells how many images will be visible in the We set the visible product images to 3.
- Auto: We set the number of seconds after which the carousel will be automatically We set it to 3.
- Rtl: This option means right to left 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:
- If you want to change the colors of our carousel, then you need to adjust some 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;
}
- This changes the background color to a shade of green:
- And, change the border color to this:
border: 1px solid #abe9fd;
- Then, navigational previous and next arrows are placed a little high in the 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;
}
- 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;
}
- The previous and next button position changes to this:
- We will change the buttons 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.
- Now, in the browser, our latest product carousel appears as the following:
Source: Hasan Tahsin (2011), OpenCart 1.4 Template Design Cookbook, Packt Publishing.