Prestashop自动完成

Prestashop autocomplete

本文关键字：Prestashop      更新时间：2023-09-26

我试图将非常简单的自动完成函数添加到我的prestashop插件输入中。我想要实现的是这样的目标：

city.php

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

和auto.js

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

问题是我不知道如何调用prestashop中的jquery库。我试图在我的插件类中添加这样的东西：

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

运气不好。。。

在Prestashop 1.6中，使用钩子函数，您可以做这样的事情（实际上我在自定义模块中使用它）：

public function hookHeader() {
    //Jquery native Prestashop plugin
    $this->context->controller->addJQueryPlugin('fancybox');
    //CSS
    $this->context->controller->addCSS('//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css', 'all');
    $this->context->controller->addCSS('//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css', 'all');
    $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中的自动完成示例：

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>

下面是使用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。

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

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

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

因此，您可以将此插件放在theme_foolder/js/plugins/autocomplete.js中，并使用$this->addJS(_THEME_JS_DIR_.'plugins/autocomplite.js'); 添加它

问题是我不知道如何在中调用jquery库prestashop。

在Prestashop>=1.5中，您可以使用在任何控制器中加载核心jQuery库

$this->addJquery();

在加载jQuery插件之前。如果你想加载一个旧的或更新的版本，你应该使用（用所需的版本替换版本）：

Controller::addJquery('1.3.1');

如果该文件在您的服务器上不可用，PrestaShop将尝试从谷歌服务器下载。

来源：http://doc.prestashop.com/pages/viewpage.action?pageId=11272250

默认情况下，Prestashop已经有jquery库。因此，您只需将auto.js文件添加到模块中即可。

不要使用头Hook来加载js文件或css文件。当你这样做时，它会加载所有页面，即使它不是你的模块，这不是一个好的做法。

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

或

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

祝你的新模块好运。：）

您可以将您的js文件移动到主题名称/js/autoload/your js file.js…Prestashop加载所有自动加载文件夹js文件。所以你可以使用它。

相关文章：