|
12月
17
|
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 内の次の1行、
<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>
さぁ、レッツトライ!
うまく動かない場合はご一報を。(全く同じ環境で試してないので…)
1月 18th, 2009 at 9:31 PM
お世話になっております。
検索の入力補完機能を追加してみました。
1つ問題があります。
それは、非表示設定にしている商品名まで表示されてしまう事です。
非表示設定についている商品を、入力補完で表示させないようにする事は可能でしょうか?
よろしくお願い致します。
1月 18th, 2009 at 10:06 PM
非表示設定している商品を対象から外す場合は、WHERE句に「status = 1」を追加します。
記事の方に反映しましたのでご覧下さい。
1月 19th, 2009 at 4:23 PM
sixbird 様、アドバイスありがとうございます。
教えて頂いた通りに修正したら、非表示設定の商品が表示されなくなりました。
更に便利になりました。
ありがとうございます。
今後のカスタマイズにも期待しております(^-^)
PS.「売れ筋ランキング」みたいのができると良いと思っています。ご検討下さい。
1月 19th, 2009 at 5:53 PM
ランキング機能、今度アップしてみます。
お楽しみに。
1月 20th, 2009 at 5:19 PM
sixbird 様、ランキング機能の作成を検討して頂きありがとうございます。
技術的に、またEC-CUBEの仕様で可能か不可能か分かりませんが、下記の点も機能として検討して頂ければ助かります。
[1]ランキング表示数の自由に設定できる(1〜10位、1〜20位まで表示など)
[2]商品の「販売個数」でランキング集計(たくさん売れた商品が上位)
[2-2商品の売上高でもランキング集計できる(売り上げ総額が高い商品が上位)
[3]全商品をランキング対象にするか、カテゴリごとにの対象にするか指定ができる(カテゴリごとにランキング集計。全商品を対象に集計など。)
[4]ランキングに商品名のみ表示、画像も表示するかも設定できる
[4-2]画像も表示させる場合、表示サイズも指定できる(画像の幅など)
いろいろなショップでランキング表示を見てきましたが、商品名だけでも表示できれば、ショッピングサイトとしてはとても助かります。
ランキング機能がアップされるのを、とても楽しみにしております(^-^)
2月 14th, 2009 at 8:42 PM
お世話になっております。
最初は問題なく動作していたと思うのですが、今日異常がある事に気付きました。
検索キーにキーワードを入れると、登録商品の中で入力されたキーワードが商品名に含まれる商品の一覧が表示されるのですが、一番上に空欄の行、2行目にエラーコード、3行目から商品名の一覧が表示されます。
2行目のエラーコードは下記の通りになります。
Warning: session_start() [function.session-start]: Cannot send session cache limiter – headers already sent (output started at /hsphere/local/home/jquery_suggest/name_search.php:2) in /hsphere/local/home/data/class/session/sessionfactory/SC_SessionFactory_UseCookie.php on line 56
原因が分かるでしょうか?
アドバイスをお願い致します。
2月 16th, 2009 at 10:43 AM
SC_SessionFactory_UseCookie.phpの56行目でsession_start()をしているのですが、
これ以前の処理でechoや、var_dumpなどしてないですか?もしくはEC-CUBEで用意してある関数sfPrintR()。
例えばデバッグしようとしてログ吐かせて、そのまま放置とか。
「Cannot send session cache limiter」でググればヒットしますよ。
(EC-CUBEではないですが)
6月 18th, 2009 at 8:40 PM
はじめまして。
jquery.suggest.jsを調べていたのでとても参考になります。
name_search.phpのrequire.phpには具体的に何を記述したらよいのでしょうか?
サンプルか何かあるととても嬉しいのですが。
6月 18th, 2009 at 9:22 PM
このrequire.phpは元々EC-CUBEのhtmlディレクトリ配下にあるファイルです。
EC-CUBEが動作するのに必要なファイルですので、とりあえず先頭行で読み込んでます。
ま、おまじないみたいなもんです。