Read More
Read More
Menu Close

    Available jQuery Plugins in PrestaShop

    In this blog we are going to learn how to use available jQuery plugins in PrestaShop to ease the module development and customization work. You can find all available js plugins in prestashop/js/jquery folder.

    PrestaShop has many predefined jQuery plugins which are used on different pages, for example smartWizard.js is used while creating wizard like carrier, fancybox.js is used to open fancy box modal and many more.

    For using this plugin in any controller there is function which you call in controller set media function as below.

    Available jQuery Plugins in PrestaShop
    jgrowl jQuery Plugin
    public function setMedia($isNewTheme = false) 
    {
    	parent::setMedia($isNewTheme);
    	$this->addJqueryPlugin('jgrowl', null, false);
    }

    Here jgrowl is a plugin name which we are loading in controller and it must be after parent::setMedia() always. Same as above given example you can load any available jQuery plugin in controllers.
    Below is the list of available plugins in PrestaShop

    $this->addJqueryPlugin('ajaxfileupload', null, false);
    $this->addJqueryPlugin('alerts', null, false);
    $this->addJqueryPlugin('autocomplete', null, false);
    $this->addJqueryPlugin('bxslider', null, false);
    $this->addJqueryPlugin('chosen', null, false);
    $this->addJqueryPlugin('cluetip', null, false);
    $this->addJqueryPlugin('fancybox', null, false);
    $this->addJqueryPlugin('footable', null, false);
    $this->addJqueryPlugin('growl', null, false);
    $this->addJqueryPlugin('jgrowl', null, false);
    $this->addJqueryPlugin('jqzoom', null, false);
    $this->addJqueryPlugin('jstree', null, false);
    $this->addJqueryPlugin('select2', null, false);
    $this->addJqueryPlugin('smartWizard', null, false);
    $this->addJqueryPlugin('tabpane', null, false);
    $this->addJqueryPlugin('thickbox', null, false);
    $this->addJqueryPlugin('timepicker', null, false);
    $this->addJqueryPlugin('treeview-categories', null, false);
    $this->addJqueryPlugin(['chosen', 'fancybox']);
    $this->context->controller->addJqueryPlugin('colorpicker');
    $this->addJqueryPlugin(['scrollTo', 'alerts', 'chosen', 'autosize']);
    $this->addJqueryPlugin('typewatch');
    $this->addJqueryPlugin(['fancybox', 'autocomplete']);
    $this->addJqueryPlugin(['jscroll', 'typewatch']);
    $this->addJqueryPlugin('fieldselection');
    $this->addjqueryPlugin('validate');
    $this->addJqueryPlugin(['autocomplete', 'tablefilter']);
    $this->addjQueryPlugin(['select2']);
    $this->addjqueryPlugin('sortable');
    $this->addJqueryPlugin('tablednd');
    $this->addjQueryPlugin('tagify', null, false);
    $this->addJqueryPlugin('highlight');
    $this->addJqueryPlugin('cooki-plugin');

    Here we are going to learn how to use some of them with small examples.

    Searching for an experienced
    Prestashop Company ?
    Read More

    Tagify.js

    In below example app id is basic text field, adding tagify it looks as below

    Tagify.js jQuery Example
    Tagify.js jQuery Example
    $this->context->controller->addJqueryPlugin('tagify', null, true);
    // add above line in php in set media function
    
    // add below line in js to initialize tagify
    var inputElm = $('#your_input_element_id');
    inputElm.tagify();

    Hightlight.js

    In below example we highlighted “PrestaShop” in the selected div.

    Highlight.js jQuery Example
    Highlight.js jQuery Example
    $this->addJqueryPlugin('highlight');  // add this code in php
    
    .highlight { background-color: yellow }  // add this code in css
    
    $('div.code').highlight('PrestaShop'); // add this code in js
    
    // for html
    <div class='code'>
          This is an example of Highlight.js jQuery Plugin available in PrestaShop.
    </div>

    jQZoom.js

    Below we are showing example to zoom image on hover in PrestaShop

    jqzoom jQuery Example in PrestaShop
    jqzoom jQuery Example
    $this->addJqueryPlugin('jqzoom', null, true); //add this line in php
    
    <a href="bigger-size-image-url.jpeg" class="jqzoom" rel='gal1' title="any">
         <img src="smaller-size-image-url.jpeg" alt="close"/>
    </a>
    // add above in html
    
    //add below in js
    $('.jqzoom').jqzoom({
          zoomType: 'standard',
          lens: true,
          preloadImages: false,
          alwaysOn: false
    });

    That’s all.

    If you are facing any issues or doubts in the above process, please feel free to contact us through the comment section.

    I would be happy to help.

    Also, you can explore our PrestaShop Development Services and a large range of quality PrestaShop Modules.

    For any doubt contact us at [email protected].

    . . .
    Discuss on Helpdesk

    Leave a Comment

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


    Be the first to comment.

    Back to Top