カラーミーショップの検索結果ページをカスタマイズする方法

Pocket

ここまでカラーミーショップの共通ページから商品詳細ページまで、基本的な部分についてカスタマイズ方法をまとめてきました。

カラーミーショップではSmartyをベースに独自タグが使われているので、Wordpressのように独自タグで情報を取得しています。独自タグについては公式リファレンスがあるのでそちらを参照して下さい。

このページでは商品検索結果ページのカスタマイズについてまとめていきます。

カラーミーショップの検索結果をカスタマイズ

検索フォームの作り方

検索結果を表示するためにまずは検索フォームを設置します。以下のようなコードをページ内の必要な場所に配置します。基本的には共通ページのどこかに配置しておけばOK。

<form role="search" action="<{$product_search_url}>"  method="GET">
    <{$product_search_mode}>
    <input type="text" name="keyword">
    <input type="submit" value="検索">
</form>

このとき<{$product_search_mode}>を入れることと、action,method属性も忘れないように。

検索結果の表示方法

検索したキーワードやカテゴリーは独自タグを使うことで取得できます。

<ul class="search_result list-inline">
  <li>【検索結果】 / </li>
  <li>
    カテゴリ:
    <{if $search_category!=""}>
      <{$search_category}>
    <{else}>
      指定なし
    <{/if}>
  </li>
  <li>
    キーワード:
    <{if $search_keyword!=""}>
      <{$search_keyword}>
    <{else}>
      指定なし
    <{/if}>
  </li>
</ul>
<!-- /search_result -->

さくっとカスタマイズするテクニック

WordPressでもそうなのですが、検索結果ページの構造は商品一覧ページとほぼ同じになることが多いと思います。違うのは検索したキーワードやカテゴリーを表示する部分だけ。

商品一覧とほぼ同じということは、既に作ってある商品一覧ページにコピペしてしまえばOK。わざわざ新しく作成する必要はありません。

<div id="main">

<{if $productlist_num != 0}>
  
  <!-- ▼商品一覧に追加 -->
  <ul class="search_result">
      <!-- 検索キーワードなど -->
  </ul>
  <!-- ▲商品一覧に追加 -->

  <div class="list_pager">

    <ol class="breadcrumb">
        <!-- パンくずリスト -->
    </ol>
    <!-- /breadcrumb -->

  </div>
  <!-- /pager -->

  <div class="main_lists content_panel">
    
    <{section name=num loop=$productlist}>
        <!-- 商品リスト -->
    <{/section}>

  </div>
  <!-- /main_lists -->

  <div class="list_pager">
    <!-- ページャー下 -->
  </div>
  <!-- /pager -->

<{else}>
  <{if $subcategory_num == 0 && $subgroup_num == 0}>
    <p class="prd_lst_none">該当する商品がありません</p>
  <{/if}>
<{/if}>

</div>
<!-- /main -->