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

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

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

Sponsored Link

こんにちはこんにちは、知ってる人はこんにちは、知らない人は初めまして。ぜぇれさんです
ECサイトでのデザインを担当してます。よろしくお願いします。ぜぇれさんです
先日自宅の裏山にバナナの昆虫トラップを仕掛けました。
意気揚々と4歳の息子と妹の3人で設置した4か所を回りましたが、
手のひらサイズの蛾と10cmほどのムカデ数匹とのエンカウントを果たしただけでした。

さてさて今回は検索ボックスですよ。
楽天における検索ボックスの設置方法各項目内容の確認方法まで、
ひととおり説明してゆきますね!

※一言
楽天GOLD(無料)と契約している必要があります

それではやってみましょう。

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

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

今さら聞けない、楽天検索ボックスの設置・カスタマイズ方法。
注文のまだない新規店舗の場合はテスト注文でも確認できますね。

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

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

今さら聞けない、楽天検索ボックスの設置・カスタマイズ方法。
と、このような方法で確認することができます
続いて店舗URLと店舗名の確認方法ですが、特に難しいことはありません

店舗URLはここで確認

今さら聞けない、楽天検索ボックスの設置・カスタマイズ方法。
自店舗のトップページのURLを確認するだけでOKなんですよ。

店舗名はここで確認

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

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

最後に

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

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

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

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

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

BILLIONPLAN JAPAN Co, Ltd

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

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

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

または、お電話でも承ります。
 10:00 - 19:00(土日祝休み)

06-6271-7761

ABOUT ME

ぜぇれさんデザイナーTwitter:@zeelesan
加古川在住WEBデザイナー。楽天/ヤフーなど、各モール特性を活かしたサイト構築が得意。ショップ・オブ・ザ・イヤー受賞店舗にて制作業務に従事した後、ビリオンプラン立ち上げに参加。時計・雑貨のFLOAT運営担当。ご相談はこちらより。グランブルーファンタジーやりましょ!! →記事一覧
Sponsored Link

新着記事を配信しています

FacebookやGoogle+で新着記事を配信しています。よろしければ「いいね!」や「フォロー」をお願いします。

follow us in feedly

2 Comments(Trackback)

ゆんたん

上記だけですと、正常に検索されず、文字化けします。

Reply
ぜぇれさん

ゆんたんさんこんにちは。
コメントありがとうございます!

楽天の検索ボックスは[euc-jp]にしか反応しませんので、
検索ボックスを設置しているHTMLの文字コードを下記のように変更していただくか、
[meta http-equiv=”Content-Type” content=”text/html; charset=EUC-JP”]

フォームの送信する文字コードを以下のような記述で変更するとエラー解消されますよ。
[form method=”get” action=”http://esearch.rakuten.co.jp/rms/sd/esearch/vc” target=”_blank” accept-charset=”euc-jp”]

Reply

コメントを残す

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