ネットショップ運営担当者のブログ

【初心者向け】楽天GOLDで検索窓を作ってみよう!文字化けの解決

  • 2021年2月7日
  • 2021年3月26日
  • 楽天GOLD
  • 1169view
  • 0件

こんにちは!楽しいECです
10年以上、ネット販売に携わる仕事をしています

楽天GOLDを始めたばかりの方、
ページ制作初心者の方!
検索窓の作成、難しいですよね!

新米店長
店舗内の検索が表示されてますよね?
難しそう!
EC博士
確かにHTMLなど
詳しくない人にとっては難しそうですね、、

この記事では
初心者向けに楽天GOLDで検索窓の作り方ついて解説いたします

また、設置したけれど文字化けをしてしまうという方が多いので
解決法も合わせてみていきましょう!

またGOLDページだけじゃなくPC版共通ページ(商品ページ、カテゴリページ)などにも受けると思います

*前提として楽天GOLDに申請完了しているものとして進めていきます

楽天ショップページには欠かせない検索窓

楽天ショップのトップページですが
検索窓なしというわけにはいきませんよね!

ユーザーが来てくれたわけですから、
どのページにも店舗内検索できるところは絶対必要です!

トップページは
上の方にも下の方にも何箇所かほしいところですね

【楽天GOLD】シンプルな検索窓の作り方!

それでは基本の検索窓の作り方を解説します
テンプレートを用意しました!ほぼコピペするだけです!

htmlファイルにをエディタなどで開き、
検索窓を挿入したい箇所に下記のタグを記述します

<form method="get" action="https://esearch.rakuten.co.jp/rms/sd/esearch/vc">
<input type="hidden" name="sv" value="6">
<input type="hidden" name="sid" value="●(店舗ID)">
<input type="hidden" name="su" value="▲(店舗URL)">
<input type="hidden" name="sn" value="■(店舗名)">
<input type="text" name="sitem">
<input type="hidden" name="f" value="A">
<input type="submit" value="商品検索">
</form>

出典:楽天市場

コピーして貼り付けたら
上記の●、▲、■の部分に店舗情報を記入します

  • ●(店舗ID)
    に店舗専用コード(数字)を入れます
    全商品表示(空白でショップ内検索)のURL
    https://search.rakuten.co.jp/search/mall/?sid=***** ←この部分を入れてください
  • ▲(店舗URL)
    に店舗ID(英数字)を入れます
    店舗のトップページ
    https://www.rakuten.ne.jp/gold/****/
    の店舗IDを入れます
  • ■(店舗名)
    に店舗名(日本語)を入れます

これだけ入れるアップロードするだけでおそらく表示されます
下記のように表示されると思います

アップロードなどの方法が分からない方はこちらの記事に掲載しております

こちらが基本のデザインとなり、これだけでも機能するのですが
こちらにcssなどで装飾をしていい感じにデザインしてください

ここでは割愛します。ネットで調べたら結構出てきますよ

*当ページでジ販売してるテンプレートは少しだけカスタマイズしております

検索結果が文字化けしてしまう

完成後、アップロードして確認したら文字化けしたという方もいるようです

楽天GOLDに設置した際に文字コードがEUC-JP(日本語EUC)に設定されていないと、検索窓からの検索結果が文字化けすることがあります。

<form method="get" action="https://esearch.rakuten.co.jp/rms/sd/esearch/vc" accept-charset="EUC-JP">
文字化けした場合は上記の箇所に
accept-charset=”EUC-JP”
を入れたら解決する場合が多いです
是非、試してみてください!

今回は楽天GOLDに検索窓を設置させる方法
というテーマで書かせていただきました!
何かの参考になれば、幸いです