バージョン1.3.0以降

検索フォームのデザイン変更の方法を紹介します。

検索フォームのデザインを変更するには

(画像をクリックしたら、拡大表示します)

>サイト管理>テンプレート管理のテンプレート一覧にある検索結果の編集から行うか、

オーサリングツールによるテンプレートファイルの直接編集があります。

(直接編集の場合、ディレクトリは/サイトID/.template/search/default.html)

上のイメージのように結果の件数と商品一覧を表示する検索ページを作成したいとします。

検索結果を表示したい箇所を探し、

まずは検索結果の商品一覧を表示するようにします。

<!-- block:id="item_list" -->
<div class="itemlist">
	<p><a cms:id="item_link"><img cms:id="item_small_image" /></a></p>
	<dl>
		<dt cms:id="item_name"><a>甘さ抜群のフルーツみたいなトマト</a></dt>
		<dd class="price" cms:id="item_price">1000円/100g</dd>
	</dl>
	<p class="cart_btn"><a cms:id="item_cart_link">カートに入れる</a></p>
</div>
<!-- /block:id="item_list" -->

上記のソースコードのように商品一覧ページに記述したブロックを記述することで表示されます。

続いて、検索結果の件数を表示するようにします。

<p>
<!-- cms:id="results" -->
	全<!-- cms:id="total_count" /-->件中 <!-- cms:id="count_start" /--> - <!-- cms:id="count_end" /--> 件目
<!-- /cms:id="results" -->
</p>
<!-- block:id="item_list" -->
<div class="itemlist">
	<p><a cms:id="item_link"><img cms:id="item_small_image" /></a></p>
	<dl>
		<dt cms:id="item_name"><a>甘さ抜群のフルーツみたいなトマト</a></dt>
		<dd class="price" cms:id="item_price">1000円/100g</dd>
	</dl>
	<p class="cart_btn"><a cms:id="item_cart_link">カートに入れる</a></p>
</div>
<!-- /block:id="item_list" -->

cms:id="result"で囲まれた箇所は、

検索結果の件数が0件でない場合に表示されます。

ここに、検索件数が0件の場合に表示されるものも用意しておきます。

<p>
<!-- cms:id="results" -->
	全<!-- cms:id="total_count" /-->件中 <!-- cms:id="count_start" /--> - <!-- cms:id="count_end" /--> 件目
<!-- /cms:id="results" -->
<!-- cms:id="no_results" -->
	検索結果はありません
<!-- /cms:id="no_results" -->
</p>
<!-- block:id="item_list" -->
<div class="itemlist">
	<p><a cms:id="item_link"><img cms:id="item_small_image" /></a></p>
	<dl>
		<dt cms:id="item_name"><a>甘さ抜群のフルーツみたいなトマト</a></dt>
		<dd class="price" cms:id="item_price">1000円/100g</dd>
	</dl>
	<p class="cart_btn"><a cms:id="item_cart_link">カートに入れる</a></p>
</div>
<!-- /block:id="item_list" -->

補足

検索結果を表示するブロックでは、ページャを使用することができます。

Tweet