新年明けましておめでとうございます！
伍号機です！
あっという間に2018年ですね。
今年もコンサルロケッツを何卒よろしくお願いいたします。
新年一発目は！
今話題の！
スマホの商品ページにお気に入り登録ボタンを入れてみよう！の巻です！
よくあるこういうやつです↓
方法の前に、そもそもなんでお気に入り訴求が大事かというと、
お気に入り登録した商品って値下げしたり、ポイントUPするとマイページに通知が届くので、
購買促進につながる可能性が増えるのです！
こんな感じですね↓
最近はお気に入り登録数もRMSで確認できることですし、
（え、そうなの！？と思ったあなたはこちらの記事をどうぞ 笑）
お気に入り登録を促して、登録数を把握することは店舗運営にとって大事なことだと思われます。
そんなこんなで、具体的な実装方法のご紹介です！
いろいろ見せ方はありますが、今回は
【１】右側に固定するバターン
【２】商品名の下に挿入（固定はされない）
の2種類をご紹介致します。
※ちなみに、goldのFTPを使用しますので、契約していないとこの方法は実装できませんのでご了承ください。
１．お気に入り登録用の画像を用意します。
例えばこんな感じです↓
（「【２】商品名の下に挿入」の場合は不要なのでスキップしてください）
もうなんだったら、そのまま右クリックで保存して使っちゃってください。
ちなみに、pngファイルなので、goldのサーバーに上げることを推奨します！
cabinetにあげるとgifかjpgになって汚くなっちゃいます。
（必ず自分のところのサーバーにUPしてから使ってくださいね。）
２．jsファイルの準備
任意のjsファイルを用意します。
（例：fav.js）
用意したjsファイルに、下記を参考に記述していきます。
※●ショップID●と■画像URL■の部分を書き換える必要があるので、お忘れなく！
【１】右側に固定するバターン
! function() {
"use strict";
var t = function() {
var t = jQuery("meta[property='apprakuten:item_id']").attr("content"),
i = '<div id="btn_favorit">';
i += '<a href="https://my.bookmark.rakuten.co.jp/?func=reg&shop_bid=●ショップID●&itype=1&svid=101&iid=' + t + '"><img src="■画像URL■"></a></div>', jQuery("#itemName").append(i)
};
t()
}(jQuery);
【２】商品名の下に挿入するパターン
（こちらはショップIDだけ変更していただければOKです！）
! function() {
"use strict";
var t = function() {
var t = jQuery("meta[property='apprakuten:item_id']").attr("content"),
i = '';
i += '★お気に入りに登録する', jQuery("#itemName").append(i)
};
t()
}(jQuery);
ーーーーーーー
※2018.1.26追記※
一部jsに不備があるとのご指摘をいただき修正しました。申し訳ございませんでした。
ーーーーーーー
ちなみに、「ショップIDがわからん・・・！」という方は、こちらの記事を参考にしていただければと！
３．cssの準備
こちらも任意のcssファイルを用意します。
（例：fav.css）
もしくは、すでに何らかスマホ用商品ページ用のcssを読み込んでいる場合は、
既存ファイルに追記でもOKです！
既存もしくは新規のcssファイルに、下記の通り記述します
【１】右側に固定するバターン
@charset "utf-8";
/*----------------------------------------------
お気に入り登録ボタン
------------------------------------------------ */
#btn_favorit {
position:fixed;
bottom:208px; /* 下からの高さ */
right:0;
z-index:9999;
}
#btn_favorit img{
width:51px; /* 画像サイズ */
}
【２】商品名の下に挿入するパターン
@charset "utf-8";
/*----------------------------------------------
お気に入り登録ボタン
------------------------------------------------ */
#btn_favorit a{
display: block;
text-align: center;
text-decoration: none;
background:#000; /* 背景色 */
color: #fff; /* 文字色 */
font-weight: bold;
letter-spacing: 1px;
font-size: 15px;
padding: 16px 0;
border-radius: 3px;
margin-bottom: 1em;
}
下からの位置や、画像サイズ、背景色など細かい部分は任意で調整いただければ！
４．jsファイルと、cssファイルをgoldのサーバーにUP
準備したjsファイルと、cssファイルをgoldのサーバーにUPします。
ここまでできたら準備OK!
もうひと息です！
RMSに記述、実装
５．いよいよRMSに記述していきます。
RMSのデザイン設定メニュー（スマートフォン） > 商品ページ設定 に
下記を参考に、記述してください。
↓下記のjsやcssのURLはあくまで見本なので、それぞれgoldのサーバーにUPしたURLに変更してください。
<script src="https://www.rakuten.ne.jp/gold/●●●/js/fav.js" charset="UTF-8" =""=""></script > <link rel="stylesheet" ="" href="https://www.rakuten.ne.jp/gold/●●●/css/fav.css">
おつかれさまでした！
うまくいけば、商品ページにお気に入り登録ボタンが出現しているはずです。
必ず確認をお忘れなく！
※有名な話なので注意書きするまでもないと思いますが念のため
上記ソースは変な隙間や記述がいかれているように見えていますが、
RMSのデザイン設定ではは本来jsファイルやcssを読み込むことができないので、
あえてこのようなタグにすることで、裏技的に挿入することができるのです。
なので、無駄に見えるスペースなどもそのまままるっとコピーしてご利用ください。
2018年も、いや、2018年こそは役に立つ記事を書いていければと思いますので、
今年もよろしくお願いします！
今回はこの辺で。ばいちゃ〜
