【楽天スマホ商品ページ】買い物カゴボタン横に商品お気に入りボタンを表示させるカスタマイズ
楽天市場の商品ページ、お客様からのお気に入り増やしたいですよね？
密かに検索順位が上がるSEO効果があるとも言われている商品のお気に入りを増やすためには、やはりスマホのお客様にアプローチしたいところ。
また、お気に入りに登録しておくと商品の値下げなどが通知されるので、お客様としてもメリットのある機能です。
しかしデフォルト商品お気に入り追加ボタンはスマホ商品ページの中ほど、買い物カゴ下部にしかなく目立たない存在。
今回は、そんなお気に入りボタンをスマホ商品ページの買い物カゴボタン横に追加させるカスタマイズ方法を解説します。
買い物カゴボタンの横に商品お気に入りボタンを追加
スマホページの買い物カゴ、横に表示されます。
シンプルに「 商品を買い物カゴに追加 」「 ご購入手続きへ 」の横にお気に入りボタンを追加しただけです。
最初は非表示で少しでもスクロールしたら表示される、商品ページ下部にある買い物カゴまで行くと消えるといった基本機能はそのままです。
なお、下部にある買い物カゴの横にもフローティングと同じくお気に入りボタンを追加しているショップをよく見かけます。が、本ページで紹介するコードではそちらにはお気に入りボタンは追加していません。
（同じ見た目＆重なるくらいで片方が消えるのでわかりにくいのですが、「 画面下にくっついてくるフローティングのカゴ 」と「 商品ページ下部にある買い物カゴ 」は別ものです）
だってすぐ下に「 商品をお気に入りに追加 」ボタンがあるんですもの。無駄は省略。私の好きなキャプテン・バルボッサのお言葉です。
商品ページの下の方にある買い物カゴには、そのすぐ下にお気に入りボタンがある。
ちなみに今回、サンプル画像としてソフマップさんの商品ページを使わせていただいています。が、単に私が個人的に防水（耐水？）キーボードが欲しい＆ソフマップさんが好きなのでただサンプルとして画像で合成しただけです。
ソフマップさんにはこの機能は実装していませんし、私自身ソフマップさんと一切関係ありません。
買い物カゴ横にお気に入りボタンを追加する手順
- 本ページにあるJavaScript＆CSSのコードをファイルにし、楽天GOLD上にFTPでアップロード
- 「 商品ページ設定（スマートフォン） 」上で上記JSファイルとCSSファイルを読み込む
手順というか流れとしてはこれくらいでしょうか。いまどきあまりいらっしゃらないかとは思いますが、楽天GOLDの契約がないと実装は無理ッス。（多分）
基本的にコードは特にいじらずともコピペだけでお気に入りボタンを追加できるようにしておきました。ただ、JavaScriptとCSSのファイル化は各自でお願いします。
私の信条上、ダウンロード形式でご提供はしません。文字化けとか起こってもサポートしきれませんし、なにより人様のPCになにかをダウンロードさせるのは怖いです。
JavaScriptコードをコピペでJSファイルを作る
01 02 03 04 05 06 07 08 09 10 11 12 13 | //v003(function() { var getURL = document.querySelector('img[src^="https://mall.ashiato.rakuten.co.jp/rms/mall/ashiato/"]').getAttribute('src'); var shopId = getURL.match( /shop_id=\d+/ ); var itemId = getURL.match( /item_id=\d+/ ); var shopIdNumber = shopId[0].replace( /shop_id=/, '' ); var itemIdNumber = itemId[0].replace( /item_id=/, '' ); var url = '<div id="floatingAddFav" class="cartButton"><a href="https://my.bookmark.rakuten.co.jp/?func=reg&svid=106&shop_bid=' + shopIdNumber + '&iid=' + itemIdNumber + '&itype=1" target="_blank"><p class="favIcon">★</p><p>お気に入り</p><p>登録する</p></a></div>'; var j = jQuery.noConflict(); setTimeout(function(){ j( '#floatingCartContainer' ).append( url ); },1000);})(); |
こちらは特に書き換える必要はありません。★や「 お気に入り登録する 」などのテキストを書き換えるくらいでしょうか。お好きなように。
（あまり大きく変えることを考えていないので、大きく削ったりするとCSS側で調整が必要かもです）
DreamWeaverやAtomなど、お手持ちのエディタにコピペしてJSとして保存してください。
なお、このとき文字コードはUTF-8にしてください。でないとお気に入りボタンに表示される「 ★ お気に入り登録する 」が文字化けします。
よくわかんね、って人はとりあえずやってみて、文字化けしたらお使いのテキストエディタで文字コードUTF-8で保存する方法を調べてください。
（Windowsのメモ帳でも保存する際にUTF-8を選べますが、余計なデータが付与されるためエラーがでる可能性があり、オススメしません）
特にこだわりなければ、ファイル名は「 addtofavbtn.js 」とし、GOLD領域の直下に「 addtofavbtn 」フォルダを作ってその中にアップロードしておきましょう。
CSSコードをコピペでCSSファイルを作る
001 002 003 004 005 006 007 008 009 010 011 012 013 014 015 016 017 018 019 020 021 022 023 024 025 026 027 028 029 030 031 032 033 034 035 036 037 038 039 040 041 042 043 044 045 046 047 048 049 050 051 052 053 054 055 056 057 058 059 060 061 062 063 064 065 066 067 068 069 070 071 072 073 074 075 076 077 078 079 080 081 082 083 084 085 086 087 088 089 090 091 092 093 094 095 096 097 098 099 100 101 102 | @charset "utf-8";/* ---------------------------------------------------------------- 主なカスタマイズ項目---------------------------------------------------------------- *//* お気に入りボタンの色、文字サイズ調整（★マーク次のCSSでも個別調整有り） */#floatingAddFav a { background-color: #BF0000 !important; /* お気に入りボタンの背景色 */ color: #FFF !important; /* お気に入りボタンの文字色 */ font-size: 80% !important; /* お気に入りボタンの文字サイズ */}/* お気に入りアイコン（★マーク）サイズ調整 */.favIcon { font-size: 1.2rem; /* 上記 #floatingAddFav a の 80％とも連動しています */ padding-top: 2px; /* 上端からの位置調整 */}/* 商品をカゴに追加ボタンの幅 */#floatingAddToCart.cartButton { width: 40% !important;}/* ご購入手続きボタンの幅 */#floatingCheckOut.cartButton { width: 40% !important;}/*お気に入りボタンの幅（※商品をカゴに追加ボタン、ご購入手続きボタンと合わせて合計100％推奨） */#floatingAddFav.cartButton { width: 20% !important;}/* ---------------------------------------------------------------- 主なカスタマイズ項目ここまで---------------------------------------------------------------- *//* ---------------------------------------------------------------- 以下細部調整---------------------------------------------------------------- *//* お気に入りボタンの細部調整 */#floatingAddFav.cartButton { line-height: 1.1em; padding-left: 1px; padding-right: 7px;}/* お気に入りボタン細部 */#floatingAddFav a { height: 55px; padding-top: 5px!important; padding-bottom: 4px!important; border-top-right-radius: 3px!important; border-bottom-right-radius: 3px!important; box-sizing: border-box;}/* フロートカートボタン調整 */#fixedCheckOut { padding-right: 1px;}/* 購入手続きボタン角丸リセット */#floatingCheckOut.cartButton a { border-radius: 0px !important;}/* 購入手続きボタン右側paddingリセット */#floatingCartContainer .cartButton.checkOutButton { padding-right: 0!important;}/* お気に入りボタン右側に角丸設定 */#floatingAddToCart { border-top-left-radius: 3px!important; border-bottom-left-radius: 3px!important;}/* ---------------------------------------------------------------- 横幅347以下の場合細部調整（iPhoneSE、iPhone5など）---------------------------------------------------------------- */@media (max-width: 347px) { #floatingCartContainer .cartButton { font-size: 11px !important; } #floatingCartContainer .cartButton a { font-size: 11px !important; } #floatingAddToCart a { padding: 20px 0 !important; } #floatingCheckOut a { padding: 20px 0 19px !important; } .favIcon { font-size: 10px; padding-top: 4px; /* 上端からの位置調整 */ }} |
こちらもコピペでCSSファイルにして、GOLD上にアップロードしておきましょう。特にこだわりがなければ、ファイル名は「 addtofavbtn.css 」としてJSファイルと同じくaddtofavbtnフォルダにでもアップロードしておいてください。
主なカスタマイズの部分はある程度カスタマイズしてお使いいただけるよう、主要な項目を抜き出してあります。CSSの知識があればいじっていただけるかと。
細部調整より下はよほどガッツリカスタマイズするのでもなければ特にいじらなくて良い……はず。
お気に入りボタンのCSSカスタマイズ例
上記コードで実際実装されるお気に入りボタン。
カスタマイズの一例として、お気に入りボタンの色を変える方法をば。
冒頭の画像では「 ここに追加してるよ！ 」っていうのをわかりやすくしたかったのもあり、追加したお気に入りボタンのデザインを黄色背景に赤文字としています。
が、「 買い物カゴよりお気に入りボタンの方が目立つのもどうなの？ 」と思い、上記コードでは買い物カゴボタンと同じく赤背景に白文字に。ですが、ここら辺の色を変えたい方もいらっしゃるでしょう。
例えば一番最初の画像と同じく楽天イエローな黄色背景、赤文字にしたサンプルコードが下記。
上記タグから8行目～13行目を該当の部分を以下のコードと入れ替えればオッケーです。
1 2 3 4 5 6 | /* お気に入りボタンの色、文字サイズ調整（★マーク次のCSSでも個別調整有り） */#floatingAddFav a { background-color: #FFEC00 !important; /* お気に入りボタンの背景色 */ color: #BF0000 !important; /* お気に入りボタンの文字色 */ font-size: 80% !important; /* お気に入りボタンの文字サイズ */} |
CSSファイルをアップロードしたりらじばんだりできる方なら特に問題なくカスタマイズ思いますが一応。
楽天RMS上で商品ページに読み込ませる
あとは楽天GOLDのFTP領域上にアップロードした上記JSファイル、CSSファイルをを商品ページに読み込ませるだけです。
手順としては以下の通り。
- 楽天RMSにログイン
- 2 店舗デザイン設定
- スマートフォン デザイン設定メニュー内
- 商品ページ共通パーツ設定の順にクリック
- 編集画面の商品ページ共通説明文でアップロードしたJSファイル、CSSファイルを読み込む
- 商品ページ共通説明文表示 のラジオボタンを 表示する に
商品ページ共通説明文内には下記のコードを入力します。一部書き換えが必要なので注意。
なお、普通に書くと禁止タグとして弾かれてしまいます。必ずコピペしてお使いください。（詳しくは後述）
1 2 3 4 | <!--スマホカート横お気に入りボタン--><link rel="stylesheet" ="" href="https://www.rakuten.ne.jp/gold/【ストアアカウント】/addtofavbtn/addtofavbtn.css"><script src="https://www.rakuten.ne.jp/gold/【ストアアカウント】/addtofavbtn/addtofavbtn.js" type="text/javascript" charset="UTF-8" ="" ></script ><!--/スマホカート横お気に入りボタン--> |
上記の【ストアアカウント】の部分に自身のストアアカウントに変えてURLを完成させましょう。
また、JSファイルは addtofavbtn.js 、CSSファイルは addtofavbtn.css と名付けaddtofavbtnフォルダに格納してアップロードした状態を想定しています。もし別の場所にアップロードしたり別のファイル名を付けた場合はその辺りも書き換えてください。
共通説明文の入力欄にすでになにか記述がある場合は一番下にでも追加すれば大丈夫かと。
商品ページ共通説明文表示を表示するにする。
また、説明文入力欄の上にある「 商品ページ共通説明文表示 」のラジオボタン選択肢を「 表示する 」にしてください。
完了したら 確認画面へ進む → 登録する で完了。実際にスマホやブラウザのレスポンシブビューにて商品ページを確認してください。
なお、ブラウザのキャッシュが原因ですぐには表示されない場合もあります。キャッシュを一度消してから読み込み直すか、パソコンでしたらCtrl + Shift + Rで完全更新を行いましょう。
買い物カゴボタンやご購入ボタン、追加したお気に入りボタンがキチンと動作するか確認。もし問題があれば、私の記述ミスか他のJavaScriptとのバッティングなどが原因と考えられます。
そのままにしてはおけないので外しちゃいましょう。
お気に入りボタンの外し方
商品ページ共通説明文内にコピペしたコードを消すだけで今回追加したお気に入りボタンを外すことができます。
楽天GOLDのFTP領域上にアップロードしたファイルはそのままでも問題はありません。表示崩れなど何か致命的な問題が起こった場合はまずCSSとJSの読み込みコード消してしまいましょう。
本当は禁止タグで引っかかるんだけれど……
裏技で禁止タグを突破。
本来スマホ商品ページの共通説明文の欄ではJSファイルやCSSファイルを読み込むことができません。普通に読み込ませようとすると、禁止タグとしてはじかれてしまいます。
しかし、上記のようにコピペ用タグでは禁止タグ制限を回避し、JSファイルやCSSファイルを読み込ませることができます。
どうやって禁止タグの制限を突破しているかは本記事では割愛しています。別途詳しく解説しているので興味がある方は下記リンクよりどうぞ。
https://ec-tsushin.com/rma_tag_tec/まとめ：買い物カゴボタン横にお気に入りボタンを表示させる方法
- 商品お気に入りボタンを追加することで売上アップが見込める。
- JSファイル、CSSファイルを作り楽天GOLDにアップし、楽天RMS上から呼び出すだけ。
ウソかマコトか、商品お気に入り登録が楽天市場上での検索表示順位にも関わるともいわれています。商品レビュー数も表示順位に関わったり関わらなくなったり変化していますし、商品お気に入り登録数も関わることもあれば関わらなくなったりを繰り返しているのかもしれません。
最近はお気に入りに入れたりするのではなく買い物カゴに入れて注文を止め、お気に入り代わりに使っている方も多いようではありますが、いずれにしてもお気に入り登録の数もお客様へアプローチする一つの手段として有効。ぜひうまく使いこなしてください。
なお、横幅が狭いと崩れてしまうので、横幅347px以下で文字のサイズを調整しています。一応レスポンシブでiPhoneSEやiPhone5など横幅のせまいデバイスにも対応させたつもりです。が、実機がないため本当にちゃんと対応されているかわからなかったり。
私の持てる環境ではテストしてみたつもりですが、どこかおかしい場所などあればコメントください。力量と時間の限り対応します。
