今さら聞けない、楽天検索ボックスの設置・カスタマイズ方法。

楽天の検索ボックスの設置方法って、
RMSのマニュアルにはあんまり詳しく書いてないんですよね。
ということで備忘録がてら書き留めておこうかなと思います。
楽天デフォルトの検索ボックス

1. 楽天における検索ボックスの設置方法（簡易）

簡単に検索ボックスの設置方法をご説明します。
以下のソースコードをGOLD内のHTMLに設置してみましょう。

<style>
body {width:1000px;margin:0 auto;}
h1 {margin: 0 0 1.5em;padding: 0.8em;border-top: 3px double #B92A2C;border-bottom: 3px double #B92A2C;font-size: 1.143em;font-weight: bold;}
</style>

<div id="sample1">

<h1>楽天デフォルトの検索ボックス</h1>

<form method="get" action="http://esearch.rakuten.co.jp/rms/sd/esearch/vc">

<input value="6" type="hidden" name="sv">
<input value="<span>****</span>" type="hidden" name="sid"><!--店舗ID-->
<input value="<span>@@@@</span>" type="hidden" name="su"><!--店舗URL-->
<input value="<span>####</span>" type="hidden" name="sn"><!--店舗名-->
<input value="A" type="hidden" name="f">
<input type="text" name="sitem"><!--検索キーワード-->

<input value="商品検索" type="submit"><!--検索ボタン-->

</form>
</div>

すると先ほどお見せしたサンプルと同様のものができたかと思います。
また楽天にはキーワード以外にも複数の項目を指定することができます。
以下のソースコードをGOLD内のHTMLに設置してみてください。

<style>
body {width:1000px;margin:0 auto;}
h1 {margin: 0 0 1.5em;padding: 0.8em;border-top: 3px double #B92A2C;border-bottom: 3px double #B92A2C;font-size: 1.143em;font-weight: bold;}
#sample1, #sample2 {padding-bottom:60px;}
#sample2 select {width:220px;}
#sample2 p {margin-bottom:5px;}
#sample2 p span {font-size:10px;color:#666;margin-left:15px;}
</style>

<div id="sample2">

<h1>楽天デフォルトの検索ボックス(項目追加)</h1>

<form method="get" action="http://esearch.rakuten.co.jp/rms/sd/esearch/vc">

<input value="6" type="hidden" name="sv">
<input value="<span>****</span>" type="hidden" name="sid"><!--店舗ID-->
<input value="<span>@@@@</span>" type="hidden" name="su"><!--店舗URL-->
<input value="<span>####</span>" type="hidden" name="sn"><!--店舗名-->
<input value="A" type="hidden" name="f">
<p><input type="text" name="sitem"><span>検索キーワード入力</span></p><!--検索キーワード-->

<p><select name="st" class="mb10px">
<option selected="selected" value="A">をすべて含む</option>
<option value="O">のいずれかを含む</option>
</select><span>and or 指定</span></p><!--and or検索指定-->

<p><input name="nitem" type="text"><span>除外キーワード入力</span></p><!--除外キーワード-->
<p><input name="min" type="text">　～　<input name="max" type="text"><span>価格範囲指定</span></p><!--価格指定-->
<p><select name="s">
<option value="1">標準</option>
<option value="2" selected="">価格安い</option>
<option value="3">価格高い</option>
<option value="4">感想多い</option>
</select><span>検索結果並び順指定</span></p><!--検索結果の並び順-->

<p><input value="商品検索" type="submit"></p><!--検索ボタン-->

</form>
</div>

こうすることで除外キーワードや価格などの、
細かな指定をユーザーが任意に行うことができます。
除外キーワードや価格などの項目を追加した検索ボックス

これだけでもインラインフレームを活用することで、
ヘッダーやサイドナビ、フッター、商品ページなど、
様々な場所に検索ボックスを設置することが可能です。

では次に、各項目のパラメーターの確認方法を説明してゆきます。

2. 各項目の確認方法

ではでは、検索ボックスを各店舗で機能させるには、
以下の三つの内容を調べる必要があります。

店舗ID
店舗URL
店舗名

この中で一番ややこしいのは店舗IDなんですよね。
まずは店舗IDの確認方法から。

店舗IDは受注番号から確認すべしその１

1. 楽天RMSメインメニュー「2-1　受注・受付管理」
2. 「新規受注受付」
3. すでに注文されている受注番号の頭6桁を確認。

注文のまだない新規店舗の場合はテスト注文でも確認できますね。

店舗IDは受注番号から確認すべしその２

1. 楽天RMSメインメニュー「2-2　決済・口座管理」
2. 「楽天マルチ決済」
3. ページ上部に記載されている番号を確認。

と、このような方法で確認することができます。
続いて店舗URLと店舗名の確認方法ですが、特に難しいことはありません。

店舗URLはここで確認

自店舗のトップページのURLを確認するだけでOKなんですよ。

店舗名はここで確認

以上が楽天に検索ボックスを導入する際に必要な項目の確認方法になります。
ほかにもデフォルトの検索窓が表示されているページの、
ソースコードを覗き見するなんて方法もアリですね。

最後に

いかがでしたでしょうか。
こうしてみると意外と項目の多い楽天検索ボックス。
今まで気づかなかった方はこの際に導入して、ユーザビリティ向上なんてどうでしょうか？

この流れに続いて次回は楽天検索ボックスを綺麗にデザインする方法を書いてみようと思います。
拙い文章ではありますが、皆さんのサイトのクオリティアップの手助けになれれば幸いです。

カブトムシとクワガタ捕りに行きたいよぉ！

[1/5]お買い物カゴを綺麗に！楽天カート周りのCSSデザイン【カゴボタン編】

ショップ運営でお悩みの方へ。

ネット通販やウェブ制作、ECサポート事業を行っている（株）ビリオンプラン・ジャパンが運営しています。楽天やYahoo!ショッピングなど各モールへの出店サポートや、商品撮影からページ制作までの運用提案、海外ローカライズ作業も行っています。

ショップ運営のお悩み、ご相談ください。

ビリオンプラン・ジャパンは日本を拠点に、香港などの海外グループ会社も生かし各種サービスをご提供しています。まずはお気軽にご相談くださいませ。

CONTACT
48時間以内に返信します

または、お電話でも承ります。
※ただいま新規ウェブ制作の受付は停止しております
10:00 - 19:00（土日祝休み）

06-6271-7761

ABOUT ME

ぜぇれさん外部デザイナーTwitter:@zeelesan: 兵庫在住WEBデザイナー。楽天／ヤフーなど、各モール特性を活かしたサイト構築が得意。ショップ・オブ・ザ・イヤー受賞店舗にて制作業務に従事、その後はECに特化した受託制作を手がけている。グランブルーファンタジーが大好き。 →記事一覧