スマホ用お気に入り追加バナー

Question

お世話になっております。
下記トピックでスマホページのお気に入りボタンを追加するテクニックをご教授頂きました。
ありがとうございました。

https://ec-masters.club/forum/post_view.php?id=3251

度々で恐縮ですが、今度はスマホ用お気に入りバナーのリンクについて教えて頂けないでしょうか。
こちらの店舗さんのようなお気に入りバナーを作りたいです。
 ↓ 
http://item.rakuten.co.jp/low-ya/vg-pola/

よろしくお願い致します。

Answer

ECマスターズの田中です。

＞こちらの店舗さんのようなお気に入りバナーを作りたいです。
スマートフォン用商品説明文の先頭にバナーを設置し、
下記URLをリンク先にご設定ください。
（商品ごとに、個別のURLとなります）

https://my.bookmark.rakuten.co.jp/?func=reg&svid=106&shop_bid=●●●&iid=■■■&itype=1
●●●：ショップ内検索のURLに含まれる６桁の数字、または(*)RAC番号の上６桁
■■■：(*)RAC番号の下８桁
(*)RAC番号は、商品個別編集の画面、もしくはitem.csvにて取得できます。

Answer

ありがとうございます。

商品ごとの、個別のURLなのですね。
お気に入りボタンのように共用化はできないんでしょうか。

Answer

ECマスターズの田中です。

https://ec-masters.club/forum/post_view.php?id=3251
上記URLで例に挙げられている、
dondonさんの例を修正することで可能です。

※注：
この方法では本来入力が禁止されているJavaScriptを扱っており、
実行エラーが発生すると、商品画像の表示がなくなるなど、
意図しない表示・動作になる可能性があります。
また、楽天アプリ内ブラウザのような、特殊な環境での動作は保証いたしません。

下記のHTMLソースを、
バナーを挿入したい場所に記載してください。

===== この下の行から ================



===== この上の行まで ================
※外部CSSファイルのURL、ショップID、画像URLは、実際のURL・数値を入力してください。
※ショップIDは、ショップ内検索のURLに含まれる６桁の数字、またはRAC番号の上６桁です。

Answer

ありがとうございます。

早速試してみましたが、「 "a" の開始タグがありません。」「スクリプトは使用できません。」とのエラーが出ます。
アドバイスの程、よろしくお願い致します。

Answer

ECマスターズの田中です。

＞早速試してみましたが、「 "a" の開始タグがありません。」「スクリプトは使用できません。」とのエラーが出ます。

失礼いたしました。
私にて確認したところ、確かにエラーが発生いたしました。

禁止タグチェック回避が追加で必要となるようでしたので、
回避に必要となる空白を、先日の回答に追記いたしました。
再度、ご確認いただきますようお願いいたします。

Answer

ありがとうございます。

「 "a" の開始タグがありません。」は消えましたが、「スクリプトは使用できません。」とのエラーがまだ出ます。

よろしくお願い致します。

Answer

ECマスターズの田中です。

それでは、JavaScriptの内容を全て外部ファイルに移してはいかがでしょうか。

具体的な方法ですが、
最初に、下記の内容をメモ帳に貼り付け、
ファイル名の末尾を「.js」にし、外部JSファイルとして保存して
楽天GOLDにアップロードしてください。

===== この下の行から ================
jQuery( function($) {
var item_id = document.forms['itemInqForm'].elements['item_id'].value;
var target1 = document.getElementById('bookmark_btn');
target1.innerHTML = '';
} );
===== この上の行まで ================
※ショップID、画像URLは、実際のURL・数値を入力してください。
※ショップIDは、ショップ内検索のURLに含まれる６桁の数字、またはRAC番号の上６桁です。

次に、下記HTMLタグを、バナーを挿入したい場所に記載してください。

===== この下の行から ================



===== この上の行まで ================
※外部CSSファイルのURL、外部JSファイルのURLは、実際のURLを入力してください。

Answer

田中様
ありがとうございます。

外部ファイルにしましたところエラーは回避できました。ありがとうございました。

しかし、先日にて行ったTipsとjsがぶつかっちゃうみたいで、表示が崩れちゃいました。

ボタンよりバナーのほうが見やすいかと思いますので、バナーで統一するようにして見ます。

どうもありがとうございました。

Answer

ECマスターズの田中です。

バナーは無事設置できたとのことで、何よりです。
また何か気になる点がありましたら、ご質問ください。

Answer

田中様

無事設置できたと思ったのですが、勘違いのようでした。
dondonさんの例であるお気に入りボタンの仕組みを削除し、お気に入りバナーのみにして試してみましたが、バナーが表示されません。エラーなどは特に出ていないです。

アドバイス、よろしくお願い致します。

Answer

ECマスターズの田中です。

実際にタグが設置されている様子を確認する必要がありますので、
一つの商品ページ（サーチ非表示に設定したダミーの商品ページでも結構です）の
スマートフォン用商品説明文に、
実際にタグを設置していただき、
その商品の商品管理番号をお知らせいただけますでしょうか。

フォーラムでご連絡いただきづらい場合は、リクエストフォームをご利用ください。

Answer

ECマスターズの田中です。

リクエストフォームにてご連絡いただき、ありがとうございました。

いただいた商品ページの商品説明文にて、追記されたHTMLタグを確認したところ、
タグの属性を囲むダブルクォーテーションが、
""
ではなく
“”
になっておりました。

入力の際、日本語変換の過程、もしくは自動での変換により
このようになったと考えられますが、
半角ダブルクォーテーション（"）でないと、
区切りとして認められない結果、正常にJavaScriptを読み込むことができておりません。

まずは、“および”を、"に修正した上で、動作をご確認いただきますようお願いします。

Answer

田中様
いつもありがとうございます。

お調べ下さいましてありがとうございました！
コピペで作業したのですが、どこかの過程で変わっちゃったんですね。
失礼しました。

直しましたところ、無事表示されました。

お手数をお掛けしてすみませんでした。
ありがとうございました！