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.

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.

Tagify.js

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

$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.

$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

$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 support@webkul.com.