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

公開日:  最終更新日:2014/10/13

[楽天]ショップ内 検索窓 基本的な実装方法について
楽天のショップ内に独自に検索窓を追加しているショップさんは多いと思います。
調べる機会があったのでまとめておきます。

スポンサードリンク

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

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

実際にキーワードを入力して検索ボタンをクリックすると
↓↓↓のようなショップ内検索ページに検索結果が表示されます。
25-1.png
たしかに、これで検索窓を追加することは出来るのですが、ちょっと物足りないですよね。

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

まずは、これ
25-2.png
キーワード、除外キーワード、最低価格、最高価格などを指定することが出来ます。

次にこれ
25-3.png
検索結果の並び順、表示方法、対象商品をクリックで切り替え出来ますね。

最後はこれ
25-5.png
ショップ内のカテゴリでの絞り込みも出来ます。
色々な検索方法が用意されてますね。

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

次に注目してもらいたいのが
ショップ内検索で何か検索した後のURL
25-4.png
何やら長い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しかない状態なのでキーワードでしか検索できないことになります。
では、いくつか検索ページにお願いする条件を追加してみましょう。
サンプルソース2

キーワード 除外キーワード 価格 ~  並び順
キーワード 除外キーワード 価格 ~  並び順




キーワード
除外キーワード
価格 ~ 
並び順





いくつか項目を追加してみました。
除外キーワード、最低価格、最高価格、それから並び項目も追加しています。
それぞれ 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などと組み合わせで作る必要が出てくるかと思います。
また、後日 別記事で書きますね。




FacebookページやGoogle+ページにもブログ更新・気になる情報を流していますので
よろしければ、この機会にぜひ「フォロー」または「いいね」をよろしくお願いします。

ネットショップ出店をお考えの方はこちらをどうぞ

ネットショップ出店サービス一覧

ショップ運営に使えるjQuery動作デモ1ページにまとめてみた

ECサイト・ネットショップで使えるjQueryデモをまとめてみた

ショップにカルーセル表示を実装「おすすめ」

カルーセル表示実装ならjQuery「slick.js」が簡単でおすすめ

ネットショップ運営の効率化に使えるソフト・ASPサービス

ネットショップ受注・在庫・商品・発注管理

仕入先・商材をお探しの方はこちらをどうぞ

ネットショップ運営に使える仕入・卸サイト一覧

ネットショップへの集客に使える広告いろいろ

ネットショップへの集客に使える広告まとめ

ネットショップで使えるCSS・JavaScriptのデモを1ページにまとめてみた

ECサイト・ネットショップで使えるCSS・JavaScriptのデモをまとめてみた

ブログでの集客に記事作成代行サービスを活用

記事作成に使える記事外注サービスまとめ

お店(実店舗)の集客に活用できる店舗ポータル・Webサービスまとめてみた

お店(実店舗)の集客に活用できる登録サイト・webサービスまとめてみた

ショップ運営に役立つwebサービス・ツールについてまとめてみた

ECサイト・ネットショップで使えるwebサービス・ツールをまとめてみた

楽天市場の運営者向けの商品陳列HTMLタグ生成無料ツール作ってみました

楽天市場向け無料ツール

Your Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

スポンサードリンク

記事が気に入ったらシェアお願いします

PAGE TOP ↑