[楽天]ショップ内 検索窓 基本的な実装方法について

楽天のショップ内に独自に検索窓を追加しているショップさんは多いと思います。
調べる機会があったのでまとめておきます。

RMS内にある設置方法
●（店舗ID）は6桁の店舗ID（受注番号の最初の6桁）
▲（店舗URL）は店舗URL（店舗のトップページのrakuten.co.jp/の後ろの部分）
■（店舗名）は店舗名に書き換えてください。
サンプルソース①

GOLD内のHTMLページに上記ソース元に必要箇所を自分のショップ情報に
変更すれば上のような検索窓を追加することが出来ます。

実際にキーワードを入力して検索ボタンをクリックすると
↓↓↓のようなショップ内検索ページに検索結果が表示されます。

たしかに、これで検索窓を追加することは出来るのですが、ちょっと物足りないですよね。

そこで注目して欲しいのが、ショップ内検索のページです。
色々と検索条件を指定出来そうな項目が並んでますよね。

まずは、これ

キーワード、除外キーワード、最低価格、最高価格などを指定することが出来ます。

次にこれ

検索結果の並び順、表示方法、対象商品をクリックで切り替え出来ますね。

最後はこれ

ショップ内のカテゴリでの絞り込みも出来ます。
色々な検索方法が用意されてますね。

でも、先ほどのサンプルでは検索方法のうちキーワードしか指定することが出来ない状態です。
仕組みとしてはショップ内検索ページで指定出来る検索方法や並びなどの設定はオリジナル検索窓として指定することが出来るのでその方法について説明していきます。

次に注目してもらいたいのが
ショップ内検索で何か検索した後のURL

何やら長いURLになっているかと思いますが、下の部分

f=1&v=2&sid=203677&uwd=1&s=1&p=1&sitem=&st=A&nitem=&min=&max=

これがその時に検索ページに「これを探してね！！」ってお願いした検索条件の情報になります。
最初のサンプルソース①を見返してもらうと

nameとしてsitemが設定されていたと思います。
そして、nameで指定したsitem というのが検索結果のURLにも含まれてますよね。

検索ページに「これ探してね」って渡している情報がsitemしかない状態なのでキーワードでしか検索できないことになります。
では、いくつか検索ページにお願いする条件を追加してみましょう。
サンプルソース２

キーワード
除外キーワード
価格　～　
並び順標準価格安い価格高い感想多い

いくつか項目を追加してみました。
除外キーワード、最低価格、最高価格、それから並び項目も追加しています。
それぞれ name=”○○” で指定するのがポイントです。

あと、type=”hidden” については、表面上は見えない隠し項目だと思ってください。これは検索ページに渡す情報を最初から固定しています。

name=”f” は対象商品で value=”1″「すべて」を指定しています。
name=”v” は表示方法で value=”2″「写真付き一覧」を指定しています。
それぞれのname項目で指定出来る内容(value)をまとめてみました。

sitem：キーワードを指定
s：1～4を指定 並び順(1 標準 2 価格が安い 3 価格が高い 4 感想の件数が多い)
f：1～6を指定 (1 全て 2 感想あり 3 在庫あり 4 送料込み 5 プレゼント 6 資料請求)
v：2 or 3 を指定 (2 写真付き一覧 3 ウィンドウショッピング)
nitem：除外キーワード指定
min：最低価格を指定
max：最高価格を指定
g：ジャンルIDを指定
st：A or O を指定 (A をすべて含む O のいずれかを含む)
sf： 商品名、商品番号で探すにチェックありは sf=1 なしは 項目自体なし
p：数値 検索結果の何ページか

上記にある項目を追加すればより細かい検索方法を指定することが出来きます。
ただ、見た目や使い勝手等を考えると実用的なオリジナル検索窓を追加するには
CSSやJavascriptなどと組み合わせで作る必要が出てくるかと思います。
また、後日 別記事で書きますね。