12月 17

商品検索ブロックに入力補完機能を追加 [EC-CUBE2.3.3]

EC-CUBE2系 9 Comments »

jquery.suggestを利用して、商品検索ブロックの入力フォームに入力補完機能を追加してみよう。

jquery.suggestのサンプル

ファイルをダウンロードする

まずはVulgarisOverIPサイトからファイルをダウンロード。

ファイルを格納

jquery.suggest.js → /user_data/packages/default/js/
jquery.suggest.css → /user_data/packages/default/css/
へ放り込む。

商品名検索用php作成

EC-CUBEをインストールしたルートディレクトリにjquery_suggestというディレクトリを作成。
そこに以下の内容でname_search.phpというファイルを作成。

<?php
require_once("../require.php");

// 検索結果の取得
$objQuery = new SC_Query();
$col = " name ";
$from = " dtb_products ";
$where = "status = 1 and del_flg = 0";
$arrval = array();

$q = strtolower($_REQUEST["q"]);
if (!$q) return;
$arrProducts = $objQuery->select($col, $from, $where, $arrval);
foreach ($arrProducts as $value) {
	$items[] = $value['name'];
}

foreach ($items as $value) {
	if (strpos(strtolower($value), $q) !== false) {
		echo "$value\n";
	}
}
?>

商品検索ブロック修正

/data/Smarty/templates/default/bloc/search_products.tpl 内の次の１行、

<p><input type="text" name="name" class="box142" maxlength="50" value="<!--{$smarty.get.name|escape}-->" /></p>

を以下に修正(id=”suggest_name”を追加しただけ)

<p><input type="text" name="name" id="suggest_name" class="box142" maxlength="50" value="<!--{$smarty.get.name|escape}-->" /></p>

テンプレートに追加

/data/Smarty/templates/default/site_flame.tpl へ以下を追加。

<link rel="stylesheet" href="<!--{$TPL_DIR}-->css/jquery.suggest.css" type="text/css" media="all" />
<script type="text/javascript" src="<!--{$TPL_DIR}-->js/jquery.js"></script>
<script type="text/javascript" src="<!--{$TPL_DIR}-->js/jquery.suggest.js"></script>
<script type="text/javascript">
jQuery(function() {
jQuery("#suggest_name").suggest("<!--{$smarty.const.URL_DIR}-->jquery_suggest/name_search.php",{});
});
</script>

さぁ、レッツトライ！

うまく動かない場合はご一報を。（全く同じ環境で試してないので…）

written by sixbird \\ tags: ,