当サイトの記事「2011年夏以降の新機能まとめ」
「カラーミーのカテゴリー表示 1」のつづき。
サンプルを作ってみました。例として、テンプレート「ウッド」を使用しています。id名は任意でどうぞ。
1.テンプレート「商品検索結果」上部の該当箇所に、橙色部分を追加。
<div id="result" style="color:#666;padding:0px 5px;margin-bottom:15px;">
検索条件
[カテゴリー]：<{if $search_category!=""}><strong><{$search_category}></strong><{/if}>
[検索文字]：<{if $search_keyword!=""}><strong><{$search_keyword}></strong><{/if}>
<br />
HIT件数：<strong><{$productlist_num}></strong>件
</div>
<table class="main_title" cellpadding="0" cellspacing="0" border="0" style="margin-bottom:1px;">
<tr><td id="title"><img src="http://img.shop-pro.jp/tmpl_img/11/sp.gif" width="15px" height="5px">▼ 検索結果</td></tr>
</table>
2.テンプレート「商品検索結果」の一番下に新規追加（id="title"、id="result"より下であればOK）。
//条件分岐。見出し変更と関数呼び出し
<{if $search_keyword=="指定なし"}>
<script type="text/javascript">
<!--
document.getElementById("title").innerHTML = "▼ カテゴリー別商品";
SetCategory("<{$smarty.get.cid}>","<{$search_category}>","<{$shop_name}>");
//-->
</script>
<{else}>
<script type="text/javascript">
<!--
document.getElementById("title").innerHTML = "▼ 検索結果";
//-->
</script>
<{/if}>
3.JavaScript（外部ファイルの場合は、テンプレート「共通」または「商品検索結果」 の先頭で読み込む。<body>部でOK）
//ウィンドウのタイトル変更、パンくずリスト作成
function SetCategory(cid,cname,sname) {
strTag1=' <a href="./">ホーム</a> ＞ <a href="./?mode=srh&sort=n&cid=';
strTag2='">';
strTag3='</a>';
if(cid != "") {
document.getElementById("result").innerHTML=strTag1+cid+"%2C0&keyword="+strTag2+cname+strTag3;
window.document.title = cname + " - " + sname;
}
else {
document.getElementById("result").innerHTML=strTag1+"& keyword="+strTag2+"全ての商品"+strTag3;
window.document.title = "全ての商品 - " + sname;
}
}
【参照リンク】
・とほほのJavaScriptリファレンス
【関連記事】
・独自タグをJavaScriptの関数に渡す
【追記】
以前、Smarty使用しない版を掲載していましたが、差し替えました。こちらのほうが断然良い出来です。
【追記2】
質問コメントがありましたので、手直ししました。
【追記3】
助け合い掲示板にも同様の話題がありました。
【追記4】
JavaScriptを置くレンタルサーバーがない場合は、テンプレート編集の「共通」の先頭が都合よいです。上のをコピペしただけでは動きませんので、下の書き方を参考して下さい。
<script type="text/javascript">
function SetCategory(cid,cname,sname) {
～
}
</script>
