OpenCart 2.0 (jQuery)

Opencart has been using the jQuery library for a long time now. In doing some research I found that there were not really a whole lot of articles out there written about OpenCart and jQuery so I’ve decided to write one. The purpose of this article will be to shed some light on what jQuery is and how it relates to OpenCart 2.0 and also I will give some examples on how to write jQuery just in cast you have decided to draft your own extension which may or may not involve the library. In truth if you have already developed your own custom extension and have copied existing jQuery code format you may not even realize you’re writing jQuery… the syntax is a little different than default JS

What is jQuery

jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. Used by over 70% of the 10,000 most visited websites, Query is the most popular JavaScript library in use today. jQuery is free, open-source software licensed under the MIT License.

jQuery’s syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. jQuery also provides capabilities for developers to create plug-ins on top of the JavaScript library. This enables developers to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets. The modular approach to the jQuery library allows the creation of powerful dynamic web pages and web applications.

How to find the reference in Opencart 2.0

You can always look for references to various scripts a website is using by viewing the SOURCE CODE of a web page. To find the javascripts Opencart 2.0 is using it is no different. If you simply navigate to right click on the page and choose VIEW SOURCE.



On your keyboard just press CONTROL F to bring up the search and search for the following key word: “jquery”

You will then find this script reference:

<script src="catalog/view/javascript/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>

Now if you actually click on the script link you will see a huge page of jumbled up code which is the MINIFIED version of the jQuery library. This, is the heart. This is where all of the plugins you are using or procedures you are using get their form, from the heart. Without the base you couldn’t instantiate any methods.  Some websites call the jQuery library from Google Repository or elsewhere, and some keep the script in house. Opencart obviously includes it in the upload.

Now let’s show you the difference between jQuery syntax, and normal JS syntax when writing the exact same line of code.

To simulate a simple procedure let’s look for an element’s ID and apply a hide() function to that element.


$( "#target" ).hide();


Default Javascript (with no jQuery Library)

document.getElementById("target").style.visibility = 'hidden';

Looking for quality OpenCart Web Hosting? Look no further than Arvixe Web Hosting!

Tags: , | Posted under OpenCart | RSS 2.0

Author Spotlight

Joe Stenhouse

I am a web application developer that specializes in PHP, JAVASCRIPT, MYSQL, HTML, and CSS. We manifest exciting potentials within the world wide web through means of innovation.

Leave a Reply

Your email address will not be published. Required fields are marked *