SP商品ページの上部に、お気に入りボタンを表示させる裏技
スマートフォンの商品ページの画像スライダー下に、「お気に入りボタン」の追加ができます。
※ html/cssでデザインの調整を行うため、知識がないと表示がきれいにされない可能性があります。
※楽天GOLDの契約が必要です。
※デザイン調整が完了するまで、表示が崩れる可能性がありますので、訪問者数が少ない時間帯に作業することをおすすめします。
1. jsファイルを作成する
下記をコピーして、任意のjsファイルに貼り付けてください。
「shop_did=xxxxxx」部分の、「xxxxxx」は、ショップIDが入ります
// お気に入りボタンの追加
jQuery(function ($) {
"use strict";
var itemID = $("meta[property='apprakuten:item_id']").attr("content"),
favolink = '<div class="favorit-btn"><a href="https://my.bookmark.rakuten.co.jp/?func=reg&shop_bid=xxxxxx&itype=1&svid=101&iid=' + itemID + '">お気に入りに追加</a></div>';
$('#itemName').before(favolink);
});
例）ファイル名「sp-script.js」などで保存
※ 2019/10/10 追記
上記のjsファイルが動作しなくなっていたので、下記のものを使用してください。
// お気に入りボタンの追加
jQuery(function ($) {
"use strict";
var itemID = $('input[name="item_id"]')[0].value,
favolink = '<div class="favorit-btn"><a href="https://my.bookmark.rakuten.co.jp/?func=reg&shop_bid=xxxxxx&itype=1&svid=101&iid=' + itemID + '">お気に入りに追加</a></div>';
$('#itemName').before(favolink);
});
2. 作成したjsファイルをGOLDにアップロード
「1」で作成したjsファイルを楽天goldのサーバーにアップロードしてください
例）「sp-script.js」ファイルを、goldのサーバーのスマホ用フォルダにアップロード
3. 楽天RMSのスマートフォン「商品ページ共通説明文」に該当ファイルを追加
「2」でアップロードしたjsファイルを、楽天RMSの「商品ページ共通パーツ設定」の
「商品ページ共通説明文 」に追加してください。
例）
<script src="https://www.rakuten.ne.jp/gold/xxx/sp/js/sp-script.js" type="text/javascript" ="" charset="utf-8">
</script ="">
4. 表示されたものを、cssで調整
「3」まで完了すると、スライダー下に「お気に入りボタン」が表示がされるかと思います。
※ただし、他のjavascriptやcssが効いていることで、うまく表示されない可能性があります。
css を使って、デザイン調整を行ってください。
class名「.favorit-btn」を調整することで、デザインが変更されます。
例）
.favorit-btn a {
width: 70%;
padding: 8px 0;
text-align: center;
border-radius: 40px;
margin: 6% auto;
border: 1px solid #000;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
color: black;
font-size: .85rem;
}
楽天側レイアウト変更に伴う修正について
以前、上部の価格表示をご案内させていただきました店舗様におかれましては、現在価格が重複して表示されてしまっているかと思います。
修正するには、「sp-script.js」ファイル内の、下記記述の削除が必要です。
****************【下記記述を削除してください】****************
// 価格の上部追加
jQuery(function($) {
"use strict";
var cart = $("#rakutenLimitedId_cart"). html();
$("#itemName").after('<div class="cart-price">' + cart + '</div>');
});
削除後、ファイルを上書保存し、楽天GOLDサーバーにアップロードして元のファイルを上書きしてください。