Prestashop自动完成

Question

我正在尝试添加非常简单的自动完成功能到我的prestashop插件输入。我想要实现的东西是这样的：

city.php

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

和auto.js

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

问题是我不知道如何在prestashop中调用jquery库。我正试着在我的addon类中添加类似这样的东西：

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

如果没有运气..。

Answer 1

在Prestashop 1.6中，使用钩子函数，你可以这样做(实际上我在一个自定义模块中使用它)：

全部公共函数$this->context->controller->addCSS('//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'，(){ //Jquery原生Prestashop插件$this->context->controller->addJQueryPlugin('fancybox')；//CSS $this->context->controller->addCSS(‘//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css’，‘$this->context->controller->addCSS('//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css'，’)；

‘hookHeader’)；$this->context->controller->addCSS('//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.15.35/css/bootstrap-datetimepicker.css'，'all')；$this->context->controller->addCSS('//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.15.35/css/bootstrap-datetimepicker.min.css'，'all')；//Javascript $this->context->controller->addJS('//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'，'all')；$this->context->controller->addJS('//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js'，'all')；$this->context->controller->addJS('//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js'，'all')；$this->context->controller->addJS('//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js'，'all')；$this->context->controller->addJS('//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/locale/fr.js'，'all')；$this->context->controller->addJS('//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.15.35/js/bootstrap-datetimepicker.min.js'，'all')；}

如你所见，我添加了Fancybox、Bootstrap和DateTimePicker。你应该在js目录中，在你的主题或模块中添加你自己的插件。

在主题中调用插件很容易使用smarty (我猜是$js_dir，或者$tpl_dir)

编辑：

以下是Prestashop中的自动完成示例：

第三方物流：

<!-- 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>

下面是使用Jquery的自动补全：

$(document).ready(function(){
//console.log('Autocomplete loaded');
var baseUrl = $('#baseURL').val();
var evertrade_module_dir = baseUrl+'/useful';
var form = $('.ever_search_query_top');
//console.log(baseUrl);
//Autocomplete
$('#ever_search_query_top').autocomplete(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]+"";
});

假设你的php文件返回了正确的值。最好使用你自己HTML，在你的主题中覆盖tpl。

Answer 2

将" js“文件保存在模块的js文件夹中，并通过$this->addJS(array(_MODULE_DIR_.$this->module->name.'/views/js/yourPlugin.js'));在模块控制器的setMedia函数中设置它

Answer 3

在控制器中，您可以使用以下命令添加任何JS文件

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

因此，您可以将此插件放到主题文件夹/js/plugins/autoComplite.js中，并使用$this->addJS(_THEME_JS_DIR_.'plugins/autocomplite.js');添加它