【楽天裏ワザ】スマホ商品ページにjavaScript実装でお気に入りボタン追加

こんにちは、デザイナーの真琴です。10月になり、私の住む播州地域では播州秋祭りが各地域ごとに行われます。馴染みのない方からするとただのお祭りだろ？！って思うかもしれませんが、気合いの入り方が半端じゃない地域もあります。祭り当日が仕事だとしても、会社に『祭りなんで〇〇日休みます。』が普通に通る会社もあるくらいです(笑)私もそこまで本気では頑張れないですが当日だけ参加で楽しみたいと思ってます。興味のある方は調べてみて下さい。

今回は久しぶりの楽天RMSのバグを利用した、裏ワザを紹介をしていこうと思います。前回の楽天市場のスマートフォンページカスタマイズ裏ワザで紹介した応用でスマホ用商品ページの『かご追加・購入手続き』フローティングバナーに『お気に入り登録』ボタンの追加方法の説明をしていきます。

1. お気に入り登録ボタンを付ける理由
2. 準備するもの
3. データをダウンロードする
4. javaScriptデータの加工＆アップロード
5. RMSに実装
6. まとめ

お気に入り登録ボタンを付ける理由

みなさん、楽天やYahoo!その他のモールで買い物することがあると思います。買い物に迷ってる場合どうしていますか？とりあえずカートに入れている人もいるかと思います。以前まで私もそうでした。。。ふとカートを確認したらいつ入れたかわからない商品が沢山入っていることないですか？そういう時に便利なのが『お気に入り登録』ボタンです。ちょっと気になる商品があればお気に入り登録しておくと値下げされたりするとお知らせがくるようになっています。
お客様にちょっとでも気になった商品を気軽にお気に入りしてもらうことで、ページを離脱した数日後にでも思い出して購入してもらえる可能性がでてきます。
なので、目につくところに『お気に入り登録』ボタンを設置する必要があります。

少しの手間なので、順番にやっていきましょう。

準備するもの

• 楽天Goldへの加入 ※1
• テキストエディタ(Dreamweaver/Sublime Text/さくらエディタ etc…) ※2
• 少しのHTMLとCSSの知識
• やる気

とくに準備するのにお金がかかったりするものではないのでカンタンに準備できるはずです。
※1楽天Goldについては【楽天GOLD(ゴールド)とは？ メリット＆デメリット】
※2 テキストエディタについては【フリーでも大活躍の高機能テキストエディタ。】

データをダウンロードする

楽天GoldにアップするjavaScriptデータと1枚の画像をzipファイルにまとめたので、ダウンロードしてください。
ダウンロードはこちらから
任意の場所にダウンロードが完了したら、まず解凍してください。ここから少し使用する各店舗用に加工が必要になってくるので次のセクションで説明していきます。
CSSは下記のものを使用します。自店舗で使っているCSSのた下部に貼り付けてお使い下さい。(現状CSSを使っていない場合はこちらをご覧ください)

/*
* お気にい入りボタン追加用CSS
* copyright makoto
*/

/*既存カートボタンサイズ変更*/
.cartButton {
	width: 40%!important;
}

/*カートボタン角丸解除*/
.cartButton > a {
	border-top-right-radius: 0px!important;
	border-bottom-right-radius: 0px!important;
}

/*カートボタン余白調整*/
#floatingCartContainer .cartButton.checkOutButton {
	padding-right: 1px!important;
}

/*追加お気に入りボタン*/
.cartButton.addToFavoriteButton {
	width: 20% !important;
}

.cartButton.addToFavoriteButton > a > img {
	position: relative;
	top: 1px;
	margin-right: 2px;
	width: 15px;
	height: 16px;
}

.cartButton.addToFavoriteButton > a, .cartButton.addToFavoriteButton > a {
	padding-top: 5px!important;
	padding-bottom: 4px!important;
	background-color: #BF0000!important;/*お気に入りボタンのカラー変更*/
	border-top-right-radius: 3px!important;
	border-bottom-right-radius: 3px!important;
	box-sizing: border-box;
	font-size: 80% !important;
}

/*フロートカートボタン調整*/
#fixedCheckOut {
	padding-right: 1px;
}

/*フロートお気に入りボタン余白調整*/

#floatingCartContainer .cartButton.addToFavoriteButton {
	padding-right: 7px;
}

CSSの内容については、コピペでも問題はないですがボタンカラーなど使用する各店舗用に編集して使って下さい。

javaScriptデータの加工＆アップロード

今までjavaScriptとか使った事ないという方でも大丈夫です。先程ダウンロードしたファイルの『sp_favorite_button.js』をテキストエディタで開きます。
26行目に

<img src="https://www.rakuten.ne.jp/gold/＝＝＝店舗ＵＲＬ＝＝＝/sp/sp_favorite_button/sp_favorite_icon.png">

イメージタグがあるので、【＝＝＝店舗ＵＲＬ＝＝＝】を使用する各店舗用のURLを入力して上書き保存します。これで加工は終了です。
上記の変更が完了したら、楽天GOLDのトップに『sp』ファイルのままアップロードしてください。※『sp』ファイルが既に存在する場合は、そのファイルの中に『sp_favorite_button』をアップロードしてください。

RMSに実装

楽天RMSの『1-2デザイン設定』→『スマートフォン デザイン設定』→『商品ページ共通パーツ設定』→『商品ページ共通説明文』に

<!--▼お気に入りボタン▼-->
<script =""="" src="https://www.rakuten.ne.jp/gold/＝＝＝店舗ＵＲＬ＝＝＝/sp/sp_favorite_button/sp_favorite_button.js"></script 　　　　　　　　　　　　　　　　　　>

を貼り付けます。【＝＝＝店舗ＵＲＬ＝＝＝】を使用する各店舗用のURLに書き換えて完了です。
下の画像のカスタム後になっていれば実装完了です。

まとめ

今回は、楽天RMSのバグを利用してjavaScriptを実装しました。同じような方法でいろんなことができそうなので今後もいろいろとか試していこうとおもってます。