12月 17

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 内の次の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>

さぁ、レッツトライ!

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

written by sixbird \\ tags: ,


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

  1. 1. 藤原 Says:

    お世話になっております。
    検索の入力補完機能を追加してみました。
    1つ問題があります。

    それは、非表示設定にしている商品名まで表示されてしまう事です。
    非表示設定についている商品を、入力補完で表示させないようにする事は可能でしょうか?

    よろしくお願い致します。

  2. 2. sixbird Says:

    非表示設定している商品を対象から外す場合は、WHERE句に「status = 1」を追加します。
    記事の方に反映しましたのでご覧下さい。

  3. 3. 藤原 Says:

    sixbird 様、アドバイスありがとうございます。

    教えて頂いた通りに修正したら、非表示設定の商品が表示されなくなりました。
    更に便利になりました。
    ありがとうございます。

    今後のカスタマイズにも期待しております(^-^)

    PS.「売れ筋ランキング」みたいのができると良いと思っています。ご検討下さい。

  4. 4. sixbird Says:

    ランキング機能、今度アップしてみます。
    お楽しみに。

  5. 5. 藤原 Says:

    sixbird 様、ランキング機能の作成を検討して頂きありがとうございます。
    技術的に、またEC-CUBEの仕様で可能か不可能か分かりませんが、下記の点も機能として検討して頂ければ助かります。
    [1]ランキング表示数の自由に設定できる(1〜10位、1〜20位まで表示など)
    [2]商品の「販売個数」でランキング集計(たくさん売れた商品が上位)
    [2-2商品の売上高でもランキング集計できる(売り上げ総額が高い商品が上位)
    [3]全商品をランキング対象にするか、カテゴリごとにの対象にするか指定ができる(カテゴリごとにランキング集計。全商品を対象に集計など。)
    [4]ランキングに商品名のみ表示、画像も表示するかも設定できる
    [4-2]画像も表示させる場合、表示サイズも指定できる(画像の幅など)

    いろいろなショップでランキング表示を見てきましたが、商品名だけでも表示できれば、ショッピングサイトとしてはとても助かります。

    ランキング機能がアップされるのを、とても楽しみにしております(^-^)

  6. 6. 藤原 Says:

    お世話になっております。

    最初は問題なく動作していたと思うのですが、今日異常がある事に気付きました。
    検索キーにキーワードを入れると、登録商品の中で入力されたキーワードが商品名に含まれる商品の一覧が表示されるのですが、一番上に空欄の行、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

    原因が分かるでしょうか?
    アドバイスをお願い致します。

  7. 7. sixbird Says:

    SC_SessionFactory_UseCookie.phpの56行目でsession_start()をしているのですが、
    これ以前の処理でechoや、var_dumpなどしてないですか?もしくはEC-CUBEで用意してある関数sfPrintR()。

    例えばデバッグしようとしてログ吐かせて、そのまま放置とか。
    「Cannot send session cache limiter」でググればヒットしますよ。
    (EC-CUBEではないですが)

  8. 8. satoru Says:

    はじめまして。
    jquery.suggest.jsを調べていたのでとても参考になります。

    name_search.phpのrequire.phpには具体的に何を記述したらよいのでしょうか?

    サンプルか何かあるととても嬉しいのですが。

  9. 9. sixbird Says:

    name_search.phpのrequire.phpには具体的に何を記述したらよいのでしょうか?

    このrequire.phpは元々EC-CUBEのhtmlディレクトリ配下にあるファイルです。
    EC-CUBEが動作するのに必要なファイルですので、とりあえず先頭行で読み込んでます。
    ま、おまじないみたいなもんです。

Leave a Reply