Im trying to add very simple autoplete function to my prestashop addon input. What I want to achieve is something like this:

city.php

<label for="city">City: </label>

And auto.js

$(function() {
var availableTags = [
  "London",
  "Manchester",
  "Liverpool",
];
$( "#city" ).autoplete({
  source: availableTags
});

The problem is that I dont know how to call jquery library in prestashop. I was trying to add something like this in my addon class:

$this->context->controller->addJqueryPlugin('autoplete');

With no luck...

Im trying to add very simple autoplete function to my prestashop addon input. What I want to achieve is something like this:

city.php

<label for="city">City: </label>

And auto.js

$(function() {
var availableTags = [
  "London",
  "Manchester",
  "Liverpool",
];
$( "#city" ).autoplete({
  source: availableTags
});

The problem is that I dont know how to call jquery library in prestashop. I was trying to add something like this in my addon class:

$this->context->controller->addJqueryPlugin('autoplete');

With no luck...

• javascript
• php
• jquery
• prestashop

Share Improve this question Follow asked Dec 2, 2015 at 14:05 eceteraecetera 3322 silver badges44 bronze badges

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 3

In Prestashop 1.6, using hook function, you can do something like this (actualy i'm using it inside a custom module) :

public function hookHeader() {
    //Jquery native Prestashop plugin
    $this->context->controller->addJQueryPlugin('fancybox');
    //CSS
    $this->context->controller->addCSS('//maxcdn.bootstrapcdn./bootstrap/3.3.5/css/bootstrap.min.css', 'all');
    $this->context->controller->addCSS('//maxcdn.bootstrapcdn./bootstrap/3.3.5/css/bootstrap.css', 'all');
    $this->context->controller->addCSS('//cdnjs.cloudflare./ajax/libs/bootstrap-datetimepicker/4.15.35/css/bootstrap-datetimepicker.css', 'all');
    $this->context->controller->addCSS('//cdnjs.cloudflare./ajax/libs/bootstrap-datetimepicker/4.15.35/css/bootstrap-datetimepicker.min.css', 'all');
    //Javascript
    $this->context->controller->addJS('//maxcdn.bootstrapcdn./bootstrap/3.3.5/js/bootstrap.min.js', 'all');
    $this->context->controller->addJS('//maxcdn.bootstrapcdn./bootstrap/3.3.5/js/bootstrap.js', 'all');
    $this->context->controller->addJS('//cdnjs.cloudflare./ajax/libs/moment.js/2.10.6/moment.js', 'all');
    $this->context->controller->addJS('//cdnjs.cloudflare./ajax/libs/moment.js/2.10.6/moment.min.js', 'all');
    $this->context->controller->addJS('//cdnjs.cloudflare./ajax/libs/moment.js/2.10.6/locale/fr.js', 'all');
    $this->context->controller->addJS('//cdnjs.cloudflare./ajax/libs/bootstrap-datetimepicker/4.15.35/js/bootstrap-datetimepicker.min.js', 'all');
}

As you can see, i'm adding Fancybox, Bootstrap and DateTimePicker. You should add your own plugins inside js directory, inside your theme or module.

Calling a plugin in theme is easy using smarty ($js_dir i guess, or $tpl_dir)

EDIT :

Here's a sample of autoplete in Prestashop :

TPL :

<!-- Block eversearch module TOP -->
<div id="search_block_top" class="col-sm-4 clearfix">
    <form id="searchbox" method="get" action="{$link->getPageLink('search')|escape:'html':'UTF-8'}" >
        <input type="hidden" name="controller" value="search" />
        <input type="hidden" name="orderby" value="position" />
        <input type="hidden" name="orderway" value="desc" />
        <input class="search_query form-control" type="text" id="search_query_top" name="search_query" placeholder="{l s='Search' mod='blocksearch'}" value="{$search_query|escape:'htmlall':'UTF-8'|stripslashes}" />
        <button type="submit" name="submit_search" class="btn btn-default button-search">
            <span>{l s='Search' mod='blocksearch'}</span>
        </button>
    </form>

And here's autoplete using Jquery :

$(document).ready(function(){
//console.log('Autoplete loaded');
var baseUrl = $('#baseURL').val();
var evertrade_module_dir = baseUrl+'/useful';
var form = $('.ever_search_query_top');
//console.log(baseUrl);
//Autoplete
$('#ever_search_query_top').autoplete(evertrade_module_dir+'/ajax_product_list.php', {
    minChars: 1,
    autoFill: true,
    max:20,
    matchContains: true,
    mustMatch:true,
    scroll:false,
    cacheLength:0,
    formatItem: function(item) {
        return item[1];

    }
}).result(function(e,i){ 
    console.log(i);
    if(i != undefined)
        $('#ever_search_query_top').val(i[1]);
        window.location.href = baseUrl+"recherche?orderby=position&orderway=desc&search_query="+i[1]+"";
});

Assuming your php file is returning correct values. Prefere use your own HTML, overriding tpl in your theme.

Save your "js" file inside your module's js folder And set it in your module Controller's setMedia function by $this->addJS(array(_MODULE_DIR_.$this->module->name.'/views/js/yourPlugin.js'));

In controllers you can add any JS files with

$this->addJS(_THEME_JS_DIR_.'index.js');

So, you can put this plugin to theme_folder/js/plugins/autoplite.js and add it with $this->addJS(_THEME_JS_DIR_.'plugins/autoplite.js');

The problem is that I dont know how to call jquery library in prestashop.

In Prestashop >= 1.5 you can load the core jQuery library in any controller using:

$this->addJquery();

prior to loading your jQuery plugin. If you want to load an older or newer version you should use (replacing version with the desired one):

Controller::addJquery('1.3.1');

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

Source: http://doc.prestashop./pages/viewpage.action?pageId=11272250

By default, Prestashop already has jquery library. So, you just add your auto.js file to your module.

Do not use header Hook to load js file or css file. When you do that, it will load all pages even if it is not your module which is not good practise.

public function setMedia(){
    parent::setMedia();
    $this->addJqueryPlugin('type your plugin');
}

OR

public function setMedia()
{
    parent::setMedia();
    $this->context->controller->addJS(_MODULE_DIR_.$this->module->name.'/views/js/auto.js');
}

Good luck for you new module. :)

you can move your js file in your theme-name/js/autoload/your-js-file.js.. Prestashop load all autoload folder js file. so you can use that.