常時表示できるレビューバナー

Question

添付の店舗さんのページの下部に商品全体レビューのバナーがスクロールしても常時表示されているのですが、どの様にすればできるのでしょうか。

https://item.rakuten.co.jp/kabegamiyahonpo/rkwp-4999set7/###HR######IMG0d55ba20beb46adc8af5cbb82fdfdf208.pngIMG0###

Answer

ECマスターズの田中です。

※RMSの、禁止タグを入力できるバグを利用する方法ですので、
　今後、RMSの改修により、使用できなくなる可能性があります。

＞添付の店舗さんのページの下部に商品全体レビューのバナーがスクロールしても常時表示されているのですが、どの様にすればできるのでしょうか。

JavaScriptを利用して
ページ下部に固定表示される内容を書き換えることで、
常時表示させることができます。

いただいた商品ページでは、
商品のスマートフォン用商品説明文に

上記scriptタグを設置して、
https://www.rakuten.ne.jp/gold/kabegamiyahonpo/navi/sp/replace_cart_button_sp.js
上記、外部JavaScriptファイルを読込・実行することで実現しております。

JavaScriptの内容を全てご説明差し上げると膨大な量となりますので、
不明な点がございましたらご返信ください。

なお、今回ご変更いただく、ページ下部に固定表示されている部分は、
楽天全ショップで共通のパーツとなっております。

ガイドラインの禁止行為で触れられてはおりませんので、
ご変更いただいても減点の対象とはなりませんが、
変更しすぎることによって、本来あると思った位置にボタンが存在しないことで
お客様にご不便をおかけすることになる可能性がございます。

特に、今回いただいた商品ページでは、
意図的に買い物かごの表示を隠しているため、
そのまま複製して設置されると、
商品を購入することができなくなってしまいます。

お客様にご不便をおかけしないよう、
過度な変更にならないように調整してご利用いただきますよう
お願いいたします。

Answer

田中さん、回答ありがとうございました。
３点質問があります。

１．送付いただいたタグのURLを自分の店舗URLに書き換えればよいのでしょうか。
２．下記の中で「外部JavaScriptファイルを読込・実行する」とは具体的にどの様にするのでしょうか。初歩的な質問ですみません。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーー
商品のスマートフォン用商品説明文に

上記scriptタグを設置して、
https://www.rakuten.ne.jp/gold/kabegamiyahonpo/navi/sp/replace_cart_button_sp.js
上記、外部JavaScriptファイルを読込・実行することで実現しております。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーー
３．確かに買い物かごが隠れていますが、買い物かごを隠さずにその上に表示する事もできるのでしょうか。

Answer

ECマスターズの田中です。

＞１．送付いただいたタグのURLを自分の店舗URLに書き換えればよいのでしょうか。

書き換えない状態ですと、
kabegamiyahonpoさんのGOLDからファイルを読み込む形になりますので、
おっしゃる通り、URLを書き換えていただく形になりますが、

書き換えた後のURLが示す場所、
つまりfujisanさんのショップのGOLDに、
同じフォルダ・ファイル名で、外部JavaScriptファイルを
保存していただく必要がございます。

また、「replace_cart_button_sp.js」ファイルの中にも
画像ファイルへのURLが複数含まれておりますので、
URLの書き換え、および書き換えた先へのファイルの保存が
必要となります。

＞２．下記の中で「外部JavaScriptファイルを読込・実行する」とは具体的にどの様にするのでしょうか。

scriptタグを設置することで
読込・実行することができますので、
タグを設置していただければ、他に作業はございません。

＞３．確かに買い物かごが隠れていますが、買い物かごを隠さずにその上に表示する事もできるのでしょうか。

はい、できます。

今回の外部JavaScriptファイルでは、
ページ下部の固定表示の内容を総入れ替えすることで
買い物かごを隠しておりますが、

外部JavaScriptファイルの内容を書き換えて、
この動作を
「別途、新しく固定表示される部分を作成する」
ように変えることで、買い物かごの直上に設置することもできますし、
「固定表示の内容を変えず、追記を行い、横幅などの見た目を調整する」
ように変えることで、固定表示の左右に設置することもできます。

Answer

田中さん　回答ありがとうございました。
２点質問があります。

＞また、「replace_cart_button_sp.js」ファイルの中にも
画像ファイルへのURLが複数含まれておりますので、
URLの書き換え、および書き換えた先へのファイルの保存が
必要となります。

１．複数URLは下記３か所と思いますが、この画像３点を作成してを画像管理に登録するのでしょうか。
var favorite_img_path = "https://image.rakuten.co.jp/kabegamiyahonpo/cabinet/k2/add_fav2.jpg";
バナー全体の画像でしょうか

Answer

ECマスターズの田中です。

＞１．複数URLは下記３か所と思いますが、この画像３点を作成してを画像管理に登録するのでしょうか。

はい、このソースのまま設置する場合は、
画像ファイルを作成して画像管理にご登録いただく必要がございます。
（画像の代わりにテキストを設置するなど、
　登録する必要がないように調整することもできます）

＞２．上記の設置方法を教えていただけますでしょうか。

私からご提案差し上げた２通りの方法のうち、
どちらの方法をご希望でしょうか。

「別途、新しく固定表示される部分を作成する」場合は、
https://manual.ec-masters.net/index.php?ecm-tools-manual-banarsetti
上記「バナー設置君」で設置したバナーを改変する方が、
「固定表示の内容を変えず、追記を行い、横幅などの見た目を調整する」場合は、
https://forum.ec-masters.net/post_view.php?id=6665
上記URLの方法で設置したお気に入りボタンの内容を改変する方が、
それぞれ早道になるかと思います。

まずは、fujisanさんのショップにて、
サーチ非表示に設定したダミーの商品を作成いただき、
そのスマートフォン用商品説明文にて、
上記のいずれかの方法を利用して、
バナー（ボタン）をご設置いただけますでしょうか。

ご設置いただいたバナー（ボタン）の内容を変えることで、
fujisanさんの希望される形に近づけていきたいと思います。

Answer

田中さん　ありがとうございます。

＞（画像の代わりにテキストを設置するなど、
　登録する必要がないように調整することもできます）

上記方法を教えていただけますか。
その場合のソースも教えてください。
よろしくお願いします。

Answer

ECマスターズの田中です。

＞上記方法を教えていただけますか。
＞その場合のソースも教えてください。

もし、「replace_cart_button_sp.js」をそのままご利用されるということであれば、
ソースの中で同画像を使用している部分を、文字列に置き換えていただく形になります。

具体的な変更点ですが、「replace_cart_button_sp.js」の

56行目の
    var review_label = '' + review_score + '' + stars;
を
    var review_label = '商品全体のレビュー' + review_score + '' + stars;
に、

63行目の
    var favorite_a = '';
を
    var favorite_a = '★お気に入りに追加';
に、

それぞれご変更ください。

なお、文字の大きさの指定がされていないため、
挿入後に調整が必要となります。
共通説明文に記載して全商品に適用させる前に必ず、
先の返信のように、ダミー商品の商品ページの中で表示確認をお願いいたします。