Using PrestaShop jQuery 1.7 With Google CDN Tutorial

Upgrade PrestaShop jQuery 1.4 to 1.7. Use PrestaShop override to host on Google, faster PrestaShop store, less bandwidth and easily upgrade!

PrestaShop uses jQuery 1.4, a popular JavaScript library, to control many things on your PrestaShop store. jQuery can make your PrestaShop store stand out from the crowd, but comes at a price; speed and bandwidth.

jQuery powers a number of things on your PrestaShop store. You may use the floating product animation when a customer adds a product to their cart, or a moving carousel of related products on your product pages, these are all powered by jQuery.

The problem is that your PrestaShop jQuery itself is an extra 31kb (when minified) for your customers to download. The good news is Google Libraries API can host jQuery for you, saving you bandwidth, speeding up your store!

jQuery is also frequently updated, recently releasing jQuery 1.7, becoming smaller, more efficient, as well as packing more features that you could be taking advantage of. Your PrestaShop jQuery will be out of date.

Host your PrestaShop jQuery using Google's API

5 reasons why Google hosting your PrestaShop jQuery will speed up your store.

  1. Increases 'parallelism' available Browsers can usually only download 3 or 4 files at once from a single website domain. Downloading jQuery from Google free's up more download slots on your PrestaShop store's domain.
  2. Use your customer's cache It's very likely your customer will have already downloaded jQuery from Google while visiting another site as this practice becomes the norm. Therefore, they will already have the jQuery file in their cache and not have to download it at all!
  3. Guaranteed smaller file size using GZip compression Even if your web server doesn't support GZip, Google does. They will send jQuery to your customers smaller, and faster, even if you can't.
  4. Less bandwidth Google hosting files for you means you save precious bandwidth on your website's server. If your store gets heavy traffic this can quickly add up to a large saving.
  5. Servers worldwide Google has servers all over the world. If you're in the UK, but your customer is in Brazil, Google will use the server closest to your customer to send the file, speeding things up even more!

Credit: John Gietzen, Stack Overflow.

PrestaShop override to use Google's Libraries API

We can use a PrestaShop override to override the controller in the PrestaShop core.

You will need to create a new file called FrontController.php and place it in your /override/classes/ directory inside your PrestaShop store's folder.

Note: If you already have a FrontController.php file from a previous override you will need to add the following code alongside the file's current code as required.

Open your new file /override/classes/FrontController.php and add the following code.

<?php
    class FrontController extends FrontControllerCore {
        public function setMedia() {
            parent::setMedia();

            /*
            * Use Google Libraries API to host jQuery
            */
            global $js_files;
            $index = array_search(_PS_JS_DIR_ . 'jquery/jquery-1.4.4.min.js', $js_files);
            if ($index !== false){
                array_splice($js_files, $index, 1, array('//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js'));
            } else {
                $js_files[] = '//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js';
            }
        }
    }
?>

Save and close FrontController.php, and that's it! If you look at the source-code of your PrestaShop store, you will now be using jQuery 1.7.0 hosted by Google.

Test PrestaShop & jQuery 1.7

If you look at your store's source code you should see that there is no longer any reference to the original PrestaShop jQuery 1.4.4 script, and in its place we're using jQuery 1.7 hosted by Google.

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

You can then update your PrestaShop jQuery override as jQuery updates to 1.8, 1.9 and beyond. No problem!

Let us know your results

Have you upgraded to jQuery 1.7, are you using Google's API, have you noticed a speed increase or a reduction in your bandwidth usage? Let us know in the comments below.