Child pages
  • Using addJquery(), addJqueryPlugin() and addJqueryUI()

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3

Using addJquery(), addJqueryPlugin() and addJqueryUI()

About Controller::addJquery()

When this method is called with a parameter, it includes the current version of jQuery, as available in the PrestaShop installation.

For instance, this method can be called from the setMedia() method in the AdminController:

Code Block
languagephp
public function setMedia()
{
    $this->addJquery();
}

If you wish to use a newer or older version of jQuery, you just have to pass the version number as first parameter:

Code Block
Controller::addJquery('1.3.1');

If the file is not available on your server, PrestaShop will try downloading it from the Google servers.

Including a version of jQuery that differs from PrestaShop's default one, means that the noConflict flag is automatically called, so that both version can work seamlessly.

Tip
titleMaking noConflict work

Version 1.3.1 of jQuery is not available through $, but rather using the $j131 variable.

Hence, you can call $j131('body').hide();.

If you wish to use 1.3.1's $, you simply have to use this:

Code Block
<script type="text/javascript">
var tmp = $;     // jQuery's current version becomes en temporary variable.
$ = $j131;
$('body').hide(); // Now using 1.3.1's hide().
$ = tmp;          // IMPORTANT: always restore the default version of jQuery!
</script>

If the file is on your server, you can give its path as a second argument:

Code Block
Controller::addJquery('1.3.1', '/local/path/to/jquery');

About Controller::addJqueryUI()

This method enables you the include the necessary JavaScript files for UI work.

For instance, if you need to use jQuery's slider:

Code Block
public function setMedia()
{
    $this->addJqueryUI('ui.slider');
}

This code will automatically include the following dependencies:

Code Block
languagehtml/xml
<script type="text/javascript" src="/trunk/js/jquery/ui/ui.core.min.js"></script>
<script type="text/javascript" src="/trunk/js/jquery/ui/ui.widget.min.js"></script>
<script type="text/javascript" src="/trunk/js/jquery/ui/ui.mouse.min.js"></script>
<script type="text/javascript" src="/trunk/js/jquery/ui/ui.slider.min.js"></script>

About Controller::addJqueryPlugin('plugin_name')

This method enables you to include the JavaScript and CSS files for the plugin found in the local /js/jquery/plugin folder, or in the folder passed as second parameter.

If you wish to add a specific jQuery plugin to PrestaShop, you must follow this process:

  • If your plugin has only one file. Put it in the JavaScript plugin folder, as such: /js/plugins/jquery.plugin_name.js.
  • If your plugin has other files (CSS, images, etc.). Put it in the JavaScript plugin folder, as such: /js/plugins/plugin_name/jquery.plugin_name.js.