futureshopの検索機能実装

2023年4月3日
2023年4月3日
futureshop
1View
0件

futureshop NO IMAGE

検索機能実装のサンプルコード

<form action="/p/search">
  <div class="gsearch__list">
    <div class="gsearch__item"><input type="text" name="keyword" maxlength="1000" value="{% search.keyword %}"></div>
    <div class="gsearch__item">
      <p class="label">ブランド</p>
      <div class="select choice">
        <select name="tag">
          <option value="">指定なし</option>
          <option value="アシックス">アシックス</option>
          <option value="アーノルドパーマー">アーノルドパーマー</option>
          <option value="アディダス">アディダス</option>
          <option value="アドミラル">アドミラル</option>
        </select>
      </div>
    </div>
    <div class="gsearch__item">
      <p class="label">カテゴリ</p>
      <div class="select choice">
        <select name="tag">
          <option value="">指定なし</option>
          <option value="ウェア">ウェア</option>
          <option value="クラブ">クラブ</option>
          <option value="バッグ">バッグ</option>
        </select>
      </div>
    </div>
    <div class="gsearch__item">
      <p class="label">カラー</p>
      <div class="select choice">
        <select name="tag">
          <option value="">指定なし</option>
          <option value="赤色">赤色</option>
          <option value="黄色">黄色</option>
          <option value="緑色">緑色</option>
        </select>
      </div>
    </div>
    <div class="gsearch__item">
      <p class="label">サイズ</p>
      <div class="select choice">
        <select name="horizontalvariationvalue">
          <option value="">指定なし</option>
          <option value="Ｓサイズ">S</option>
          <option value="Ｍサイズ">M</option>
          <option value="Ｌサイズ">L</option>
          <option value="ＬＬサイズ">ＬＬ</option>
          <option value="フリー">フリー</option>
        </select>
      </div>
    </div>
    <div class="gsearch__item">
      <p class="label">プライス</p>
      <div class="input prices">
        <div class="price min">
          <span class="note">下限</span>
          <input name="minprice" type="text" class="price" size="6" maxlength="9">
          <span class="from">～</span>
        </div>
        <div class="price max">
          <span class="note">上限</span>
          <input name="maxprice" type="text" class="price" size="6" maxlength="9">
        </div>
      </div>
    </div>
  </div>
  <div class="gsearch__btn">
    <input class="reset" type="reset" value="リセットする">
    <button class="submit" type="submit">検索する</button>
  </div>
</form>

キーワード検索

<div class="gsearch__item"><input type="text" name="keyword" maxlength="1000" value="{% search.keyword %}"></div>

検索結果一覧ページに設置する場合、valueに置換文字「{% search.keyword %}」を記載すれば、検索した値を初期設定でき、再検索していただきやすくなります。

価格検索

<div class="gsearch__item">
  <p class="label">プライス</p>
  <div class="input prices">
    <div class="price min">
      <span class="note">下限</span>
      <input name="minprice" type="text" class="price" size="6" maxlength="9" value="{% search.minprice %}">
      <span class="from">～</span>
    </div>
    <div class="price max">
      <span class="note">上限</span>
      <input name="maxprice" type="text" class="price" size="6" maxlength="9" value="{% search.maxprice %}">
    </div>
  </div>
</div>

検索結果一覧ページに設置する場合、valueに置換文字「{% search.minprice %}」「{% search.maxprice %}」をそれぞれ記載すれば、検索した値を初期設定でき、再検索していただきやすくなります。

バリエーション検索

<div class="gsearch__item">
    <p class="label">サイズ</p>
    <div class="select choice">
      <select name="horizontalvariationvalue">
        <option value="">指定なし</option>
        <option value="Ｓサイズ">S</option>
        <option value="Ｍサイズ">M</option>
        <option value="Ｌサイズ">L</option>
        <option value="ＬＬサイズ">ＬＬ</option>
        <option value="フリー">フリー</option>
      </select>
    </div>
  </div>

futureshopには商品登録の際にサイズやカラーなどのバリエーションを設定することができます。

バリエーションには縦軸と横軸があり、以下の画像のように出力されます。

バリエーション（縦軸）で検索する場合はname属性を「verticalvariationvalue」、バリエーション（横軸）で検索する場合はname属性を「horizontalvariationvalue」に設定します。

商品タグ検索

<div class="gsearch__item">
  <p class="label">カテゴリ</p>
  <div class="select choice">
    <select name="tag">
      <option value="">指定なし</option>
      <option value="ウェア">ウェア</option>
      <option value="クラブ">クラブ</option>
      <option value="バッグ">バッグ</option>
    </select>
  </div>
</div>

商品タグ検索とは、商品登録の際に記述されているタグを検索する機能です。