Prestashop自動完成

我試圖添加非常簡單的自動完成功能到我的prestashop插件輸入。我想實現的是這樣的：Prestashop自動完成

city.php

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

而且auto.js

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

的問題是，我不知道該怎麼稱呼jQuery庫中的Prestashop。我嘗試添加這樣的事情在我的插件類：

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

，沒有運氣...

來源

2015-12-02 ecetera

在控制器，你可以添加具有

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

所以，你可以在任何JS文件把這個插件添加到theme_folder/js/plugins/autocomplite.js中，並添加它$this->addJS(_THEME_JS_DIR_.'plugins/autocomplite.js');

來源

2015-12-02 22:30:16

謝謝，它適合我的完美。不幸的是，當Im試圖調用我的自動完成函數時，prestashop會在輸入字段中添加autocomplete =「off」。你知道我該如何解決它？ – ecetera

將你的「js」文件保存在模塊的js文件夾中並將其設置在你的模塊中控制器的setMedia fu ngin通過$this->addJS(array(_MODULE_DIR_.$this->module->name.'/views/js/yourPlugin.js'));

來源

2015-12-03 08:41:20 Mani7TAM

-1

你可以在你的主題名/ js/autoload /你的js-file.js中移動你的js文件。Prestashop加載所有自動加載文件夾的js文件。所以你可以使用它。

來源

2015-12-04 14:30:40

在的Prestashop 1.6，使用鉤子函數，你可以做這樣的事情（actualy我使用一個自定義模塊內部）：

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文件正在返回正確的值。 Prefere使用自己的HTML，覆蓋主題中的tpl。

來源

2015-12-15 11:15:25 Cyssoo

謝謝，它適合我。不幸的是，當Im試圖調用我的自動完成函數時，prestashop會在輸入字段中添加autocomplete =「off」。你知道我該如何解決它？ – ecetera

你如何使用自動完成功能？我剛剛添加了一個使用自定義引導窗體的自動完成的例子 – Cyssoo

看看這個：[link] http://stackoverflow.com/questions/30755711/product-autocomplete-input-on-module-prestashop?rq=1 [鏈接] – Cyssoo

問題是我不知道如何在 prestashop中調用jQuery庫。

在的Prestashop> = 1.5則可以使用任何控制器加載核心jQuery庫：加載您jQuery插件

$this->addJquery();

之前。如果你想加載你應該使用（與所需的一個替代版本）舊的或更新的版本：

Controller::addJquery('1.3.1');

如果該文件不可用您的服務器上，的Prestashop將嘗試從谷歌服務器上下載。

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

來源

2017-02-13 10:52:35

默認情況下，的Prestashop已經擁有jQuery庫。所以，你只需將你的auto.js文件添加到你的模塊。

不要使用header 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'); 
}

祝你新的模塊。 :)

來源

2017-03-14 01:10:33 Bukhbayar

Prestashop自動完成

回答

相關問題