お気に入りボタンについて

Question

http://item.rakuten.co.jp/e-zakkamania/11399-0812198/

上記URLをスマートフォンブラウザで見た際「★お気に入りに登録する」というボタンについてですが、

favorit.min.js

と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; }

が作用しているまではわかったのですが、うまく表示されないようです。
楽天の仕様上そもそもこの配置にbtn_favoriteというソースがないことが原因です。
配置的には動画のソースを記述できる部分だと思いますが、そこにbtn_favoritの記述をし
それを上記cssとjsでコントロールするイメージでしょうか。

具体的な導入方法をアドバイス頂ければと思います。###HR######IMG0fbedc30b8cfd1fb37720dcd111d2fee5.jpegIMG0###

Accepted Answer

ECマスターズの田中です。

favorit.min.jsを確認したところ、コードの冒頭の
!function()
に、
!function($)
のように、$を加えていただくと解決することがわかりましたので
修正の上、ご確認をお願いいたします。

Answer

ECマスターズの田中です。

※RMSの、禁止タグを入力できるバグを利用する方法ですので、
　今後、RMSの改修により、使用できなくなる可能性があります。

＞うまく表示されないようです。
というのは、NAOKINGさんのショップの商品ページに
同じ仕組みを導入されようとした、ということでしょうか。

https://www.rakuten.ne.jp/gold/e-zakkamania/sp/rms/js/favorit.min.js
上記「favorit.min.js」は、
読み込むと共にお気に入りボタンを作成し、お気に入り商品に入れるリンクを張り、
それを商品名を表示するための領域の末尾に追加する、
という機能を持っておりますので、

いただいたCSSが正常に挿入されているのであれば、
「favorit.min.js」をページ内に読み込んだ時点で
お気に入りボタンの設置を行うことが出来ます。

御自身のショップでご利用される際は、
「favorit.min.js」内に含まれるショップIDを
御自身のショップIDにご変更いただきますようお願いします。
具体的に申し上げますと、
「shop_bid=」の右にある６桁の数字を、
NAOKINGさんのショップにて店舗内検索された際のURLに含まれる６桁の数字に
ご変更いただいた上でご利用ください。

もし、どうしてもご設置いただくことが難しいようであれば、
サーチ非表示に設定したダミーの商品ページを１つご用意いただき、
その商品説明文を利用して、今まで同様に設置を試みていただき、
その商品管理番号をお知らせいただけましたら、
私にて動作しない原因を確認させていただきます。

Answer

を商品ページ設定(スマートフォン)に記述し、同様に


に
#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; }
を記述したcssを読み込むように設定しましたが、やはり商品ページに反映されないようです。

なにか設定で漏れがございますでしょうか。

Answer

早速試しましたがまだ表示されないようです。
一度弊社のSPページのソースをご確認頂けますでしょうか。

お手数ですが何卒よろしくお願い致します。

Answer

すみません。
時間差で表示されました。
ご対応頂きありがとうございます。