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.
1. 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.
2. 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. We installed this addon in Chapter 1 of this book.
Click on the information tab of Web Developer—the Firefox addon that we installed in Chapter 1.
It will display many sub-menus. Every sub-menu has its own importance. We select View JavaScript.
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.
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.
3. See also
⯈ Creating a logo
Source: Hasan Tahsin (2011), OpenCart 1.4 Template Design Cookbook, Packt Publishing.