【EC-CUBE】携帯サイトの検索でもカテゴリ一覧検索を使用したい
EC-CUBEでは携帯サイトの商品検索は、PCよりしょぼい･･･（失礼！）
というか、こういう仕様になったのにはそれなりの訳もあるのかもしれない（表示のパフォーマンスや色々あるのかもしれないし、単にこっちはとりあえず実装だったのかもしれない）が、PCサイトでは、商品検索でカテゴリ検索ができる。検索窓でカテゴリの一覧から検索対象のカテゴリを選択することができるのだ。
これが、モバイルのほうでは、いきなり検索したい商品名を入力してちょ、とくる。そして別画面で検索のみ行う仕様である。
初めてのユーザーや特定の商品名、キーワードのイメージがないユーザーには、ちょいと使いにくい仕様である。なので、これをカスタマイズして、PCと同じくカテゴリ検索ができるようにする。
こういう感じ。この機能をブロックにして、トップページなどで利用できるようにする。
モバイルサイトでは、ブロックは管理画面から配置するのではなく、該当するテンプレート中に、直接インクルードするので、今回はデータベースと管理画面は触らない。
基本的には、PCサイトのsearchのロジックをMOBILEに移植するだけでOK。
【携帯サイトへカテゴリ検索ブロックの追加】
その１）ブロック用PHP作成。
/html/frontparts/bloc/search_products.php をコピーして、
/html/mobile/frontparts/bloc/search_products.php として保存。
コピーしたファイルを開き、最後から2行目、3行目に、
$objPage->init();
$objPage->ｐrocess();
というそーすがあるのを、
$objPage->mobileInit();
$objPage->mobileProcess();
と変更する。
その２）ブロック作成。
/data/Smarty/templates/default/mobile/frontparts/bloc/に、SearchProducts.tplという名称でテンプレファイルを作成し、PC用のSearchProducts.tplを参考にしながら、コーディング。
参考までに、上記のようなデザインにするためのコードは下記。（※XHTMLにてコーディングした場合）
<div style=”background-color:#96c; color:#fff; font-size:small; padding:1px; text-align:center;”>[emoji:119] 商品検索 [emoji:119]</div>
<div style=”font-size:x-small; padding:1px; background-color:#EEE6F7;”> お探しの商品名・型番を入力してください。</div>
<div style=”text-align:center; font-size:x-small;”><br /><form name=”search_form” id=”search_form” method=”get” action=”<!–{$smarty.const.URL_DIR}–>products/list.php”>
ｶﾃｺﾞﾘから選ぶ<br />
<input type=”hidden” name=”mode” value=”search” />
<select name=”category_id”>
<option label=”全ての商品” value=””>全ての商品</option>
<!–{html_options options=$arrCatList selected=$category_id}–>
</select><br />
商品名を入力する<br />
<input type=”text” name=”name2″ maxlength=”50″ value=”<!–{$smarty.get.name|escape}–>” />
<br />
<input type=”submit” name=”search” value=” 検索 ”>
</form>
これで、検索ブロックの基本は完成。
その３）最後に、トップページへ検索ブロックを埋め込む。
/data/Smarty/templates/default/mobile/top.tpl の、検索窓を表示したい箇所に、
<!–{include_php file=`$smarty.const.MOBILE_HTML_PATH`frontparts/bloc/search_products.php}–>
と記述。もちろん他のページでもかまわない。現状のEC-CUBEの構造で、検索ページの中身をカテゴリ検索の形に変更したいのであれば、
/html/mobile/products/search.php と
/data/Smarty/templates/default/mobile/products/search.tpl のソースを上記で出来上がるソースに置き換えればいい。（または、別に上記ソースを作成しておいて、商品検索のリンクのみ、/html/mobile/frontparts/bloc/search_products.phpへのリンクパスに変更すればいい。
他にも色々やった（オススメや新着のランダム表示ブロックに携帯機能を追加したりとかトップエページにカテゴリリストをボーダーデザインで出すようにしたりとか）けど、以外にスムーズに行き過ぎ、小さく色々さわりすぎたもんで、手順を記録できず、整理するのが大変･･･（＾＾；
次のときに必要だから、思い出して必ず記録する！乙！