スマホ商品ページにお気に入りボタンを設置したい

Question

こんにちは。
すでに回答済みかもしれませんが、
見つけることができませんでしたので
質問させていただきます。

スマホ商品ページに
「お気に入り商品に追加」ボタンを
設置したいのですが、どうすればいいでしょうか？
下の参考URLのどちらかのように設置したいと考えています。

２パターン参考URLを記載させていただきますので、
どちらがおすすめかも含めて、ご教示いただければ幸いです。

JavaScript等を使用し、商品ページごとのリンク変更が
必要ない方法がありましたら、そちらもお願いします。

http://item.rakuten.co.jp/dondon/coolmat-90-140/
（共通コンテンツを変更？パターン）

http://item.rakuten.co.jp/e-zakkamania/32566-1701277/
（説明文内に設置パターン）

宜しくお願いいたします。

Answer

ECマスターズの田中です。

お気に入りボタンの件、確認の上改めてご案内いたしますので
今しばらくお待ち下さい。

Answer

ECマスターズの田中です。

回答が遅れてしまい、失礼いたしました。
改めて、ご質問いただいた内容に回答させていただきます。

※RMSの、禁止タグを入力できるバグを利用する方法に関する内容のため、
　今後、RMSの改修により、使用できなくなる可能性があります。

共通コンテンツを変更？パターンの場合、
禁止行為ガイドライン Ⅱ-(9)-31 に、
共通コンテンツを変更する行為として該当する可能性が出ることと、
https://www.rakuten.co.jp/shops/manual/navi/rule/guide/10_060.html#link-039

普段お客様が、常に画面下に表示されるものとして認識している部分が
他ショップと異なるため、
違和感や使いづらさを感じさせてしまう可能性が出ることから、

個人的には説明文内に設置パターンの方をオススメしますが、
ライバル店舗の設置状況など、
あらゆる要素によって状況が変わるため、
一概にこちらがベストであるとは言い切れないことを
お含みおきいただきますようお願いします。

説明文内に設置パターンと同じボタンを導入する方法について、
別の質問にて回答しておりますので、
下記URLよりご参照ください。
https://forum.ec-masters.net/post_view.php?id=5254
favorit.min.js のコード冒頭に、 !function($) のように
$を加えていただく必要があることにご注意ください。

Answer

試しましたが、表示されません。
何が原因でしょうか？

商品ページ共通説明文（スマホ）に記述



楽天ゴールドにアップロード

favorit.min.js↓
!function($){"use strict";var t=function(){var t=$("meta[property='apprakuten:item_id']").attr("content"),i='';i+='★お気に入りに登録する',$("#itemName").append(i)};t()}(jQuery);

sp-common.css↓
#btn_favorit { width: 100%; box-sizing: border-box; margin: 12px 0; text-align: center; }
#btn_favorit a { display: block; text-align: center; text-decoration: none; background: #000; color: #FFF; letter-spacing: 1.2px; font-size: 14px; padding: 16px 0; border-radius: 3px; }

宜しくお願いいたします。

Answer

URLが間違っておりました。
修正し、設置できました。

しかし、文字化けしてしまいます。
なぜでしょうか？###HR######IMG031958972d77ea07a9cbed8c8eb90a241.pngIMG0######BR###

Answer

ECマスターズの田中です。

＞文字化けしてしまいます。
＞なぜでしょうか？

favorit.min.js が「シフトJIS」という文字コードで保存されておりますので、
商品ページ共通説明文にご記入いただいたソースに含まれる、
charset="utf-8"
を
charset="Shift_JIS"
にご変更ください。

Answer

ありがとうございました。

Answer

横から失礼します。
こちらを参考にして当店も実装してみましたが
うまくいきません。

原因を教えていただけると幸いです。

Answer

すみません実装はうまくいったのですが
ボタンを押すとブックマークが失敗となります。
これは何が原因ですか？

Answer

ECマスターズの田中です。

＞実装はうまくいったのですが
＞ボタンを押すとブックマークが失敗となります。
＞これは何が原因ですか？

原因を探るためには、実際に設置された様子を
確認させていただく必要がございますので、
サーチ非表示に設定したダミーの商品ページをご用意いただき、
そのスマートフォン用商品説明文に実際にご設置いただき、
商品ページのURLをお知らせいただけますでしょうか。
フォーラムにてご返信いただき辛い場合は、リクエストフォームよりお知らせください。

Answer

https://item.rakuten.co.jp/dreamhats/n16069/

申し訳ございません。
こちらになります。

宜しくお願い致します。

Answer

ECマスターズの田辺です。

!function($){"use strict";var t=function(){var t=$("meta[property='apprakuten:item_id']").attr("content"),i='';i+='★お気に入りに登録する',$("#itemName").append(i)};t()}(jQuery);

上記の記述を参考にしていただいたとおもいますが、

shop_bid=223965

の番号は各ショップによって番号が異なりますので
ショップ内検索をしたときにURLに含まれる６桁の数字、
または、商品編集画面でご確認いただけるRAC番号の上６桁にご変更ください。

確認したところdhさんのショップの番号は311317でしたので、
修正すると以下の記述になります。

!function($){"use strict";var t=function(){var t=$("meta[property='apprakuten:item_id']").attr("content"),i='';i+='★お気に入りに登録する',$("#itemName").append(i)};t()}(jQuery);