ClavoLike
Prestashop Developer
Vipul Hadiya is an Indian expert Prestahop and Wordpress developer having 4+ years of experience of working with clients of almost 22 countries around the world.
At Konjali
P.O. Box: 364290
Mahuva, Gujarat
364290
India
vip@vipulhadiya.com
09712670188
DOB: 07/27/1991

03. Add CSS, jQuery, jQueryUI and JavaScript in prestashop module

To add CSS, jQuery, jQueryUI and Javascript you must have knowledge of hooks in Prestashop. We can add JS and CSS in front of Prestashop or in admin of Prestashop or at both.

Add CSS, jQuery, jQueryUI and JavaScript in Prestashop front.

We insert JS and CSS in the header of our HTML page so Prestashop has a hook namely ‘Header’ to add any script or style in Prestashop Module. In PrestaShop any hook can be called using a fix function syntax like hookHookname, note down the camel case notation in function name, if we follow this syntax then our function to add script and stylesheet in our module our function will be hookHeader(). Only function is not sufficient to add script and style in PrestaShop module. We must have to transplant our module in this hook so whenever Prestashop calls Header hook, codes inside our hookHeader function will be loaded in Prestashop front.

Add CSS, jQuery, jQueryUI and JavaScript in Prestashop admin/back.

Same like above we should use BackOfficeHeader hook to add CSS, JS, jQuery and jQueryUI in Prestashop admin dashboard. In this case, our function will be hookBackOfficeHeader() and we will also transplant our module to this hook.

How to transplant module at specific hook?

You can do this either by programmatically or manually. To transplant your module at specific hook manually got Modules -> Position -> Transplant a module (At top ribbon) and select your module name from Module and hook name from Hook into and save the changes.

If you want to do this by programmatically than you can use registerHook() function in your module while installing m. and pass hook name in this function. In both above methods, your module must have a function like hookHookname pattern. You can transplant your module to any number of hooks.

In our tutorial, let’s transplant module to hooks Header and BackOfficeHeader programmatically. To transplant module programmatically we need to re-install the module because we are going to do this while function is being installed. Go to your Prestashop module dashboard, find the clavoliketutorial module and uninstall it.

Now, we have uninstalled our module so let’s add some code to transplant module to header to add CSS and JS.

We extends Module class of Prestashop in our module so it inherits two function install() and uninstall() which play some important mechanism in parent class so we execute install() and uninstall() function of Module class and then extend it for our custom coding like above code and it returns boolean result to state either module installed successfully or not. Now, when we install the module it will be transplanted automatically at both hook Header and BackOficeHeader.

Okay, if you have done all above stuff then install the module, now you know how to install a module in Prestashop if you have read my previous tutorials. After installing the module check in Modules -> Position that our module is transplanted at both hook as shown in above video. If you found your module at both hooks then we are ready to add CSS, JavScript, jQuery and jQuery UI in our module.

Controller class of Prestashop has following methods to add required script and stylesheet files in the custom module:

    1. addCSS(path_to_css_file): You can add CSS file using this function
    2. addJS(path_to_js_file): You can add JS files using this function
    3. addjQuery(jquery_version_optional): You can add jQuery using this function to your Prestashop module.
    4. addjQueryUI(ui_component_name): Using this function you can add any jQuery UI component to your Prestashop

module, it will automatically add required dependency.

Let’s use these all function and add a date-picker to our module. Modify the hookBackOfficeHeader() function as below:

Create css/clavoliketutorial_back.css and js/clavoliketutorial_back.js files and write some codes in it, because if it is empty, Prestashop will not add it to your header. Let’s add a textbox to our module’s admin using getContent() function and initiate date-picker in clavoliketutorial_back.js file.

Paste following code in clavoliketutorial_back.js

Using same code you can add CSS, JS, jQuery and jQueryUI to Prestashop front side. Try to copy paste content of hookBackOfficeHeader() in hookHeader and check yourto find inserted CSS and JS.
And here we go.. refresh your module page and click in the text box you must have a working jQuery date picker. So we have learned how to add CSS, custom JavaScript, jQuery and jQueryUI to our Prestashop module. In the next tutorial I will show you how to fetch a full HTML template file in our module view rather than writing HTML in getContent function.

About Vipul Hadiya

Vipul Hadiya is full time Prestashop and Wordpress Developer. Active at both job and freelancing on Upwork.com (formerly oDesk). He has interest to share Prestahsop tutorials for beginners.

4 comments

  1. A fascinating discussion is worth comment. I believe that you should publish more about this subject matter, it may not be
    a taboo matter but generally people don’t talk about these issues.
    To the next! Best wishes!!

  2. A fascinating discussion is worth comment. I believe that you should publish more about this subject matter, it may not be
    a taboo matter but generally people don’t talk about these issues.
    To the next! Best wishes!!

  3. Your style is unique compared to other folks I’ve read stuff from.
    I appreciate you for posting when you’ve got the opportunity, Guess I’ll just
    bookmark this page.

  4. Thank you very much for those tutorials, they are very helpful

Leave a Reply

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

*