ショップサーブでスマホポップアップ表示方法

Question

楽天市場のスマートフォンページに、キャンペーンのポップアップをデザインレシピ
https://club.ec-masters.net/index.php?design_popup_bunner
のスマートフォン A を掲載できたのですが、
それと同じものを、ショップサーブでも使用したいと思います。

楽天市場のスマホ用に編集した分をコピペしても、やはり表示されませんでした。

どこをどう直せばいいのか分からない状態での質問、申し訳ございませんが、
どうぞよろしくお願いいたします。

Accepted Answer

ECマスターズの田中です。

ソースを確認したところ、
表示部分の構造が変わった上に、
見た目を整えるスタイルシートが完全に無くなっておりました。

いただいたタグを、下記内容に修正していただきますようお願いします。
※「画像URL」を、元ソースのURLに修正してご利用ください。
(2020/8/3 20:04 ソース一部修正)





// 

p{
margin:0 auto;}
input#modal {
display: none;
}
input#modal + label {
width: 100%;
height: 120%;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 2147483646;
background: rgba(0, 0, 0, 0.5);
cursor: pointer;
}
input#modal + label div {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: medium none;
position: fixed;
width: 375px; /*画像の横幅*/
height:375px; /*画像の縦幅*/
bottom: 0;
left: 0;
margin: 15% auto;
position: fixed;
right: 0;
top: 0;
}
input#modal + label div::before {
content: "× Close";
position: absolute;
bottom: -25%;
right: 50%;
margin: 0 -60px 0 0;
font-size: 3em;
font-weight: bold;
color: #ffffff;
}
input#modal:checked + label {
display: none;
}
input#modal + label img{
width:375px; /*画像の横幅*/
height:375px; /*画像の縦幅*/
}

Answer

ECマスターズの田中です。

修正点を調べるためには、
実際に設置されている様子を確認させていただく必要がございますので、
確認のできるURLがございましたら、
返信もしくは「投稿内容について報告する」より
お知らせいただきますようお願いします。

Answer

田中様

ご返信ありがとうございます。

ただいま「投稿内容について報告する」からお送りさせていただきました。

どうぞ、よろしくお願いいたします。

Answer

ECマスターズの田中です。

お知らせいただき、ありがとうございました。

いただいたページを確認したところ、
ページの中に、目的のソースは設置されておりませんでした。
「設置できず」ということは、
何かしらのエラーが発生し、登録自体ができなかった、
ということでしょうか。
その場合は、そのエラーメッセージをお知らせ願います。

HTMLタグに誤りがある、ということが原因であれば、
各タグに含まれる「 =""」が原因である可能性がございます。

RMSのバグを利用するために記述される「 =""」ですが、
本来のHTMLの文法とは異なり、
楽天市場以外では意味のない記述でございますので、
いただいたソースの各タグに含まれる「 =""」（計９箇所）を
削除していただきますようお願いいたします。

他、styleタグ内で、２点の調整をお願いします。

１．
p{ から } までの記述は、特に意図がなければ削除をお願いします。
２． 
input#modal + label
に指定されている top: 147px; を top: 0px; にご変更願います。

Answer

田中様

ご確認、ご回答いただきありがとうございます。

指示いただきました、styleタグ内の調整、1.と2.に加え、
1行目のchecked を削除するとポップアップが出ました。

ですが、ページ中に、コピペしたソースの一部が表示されている状態でした。
添付ファイルにその時の画像を添付しています。

該当部分のソースを削除したところ、ポップアップは表示されるのですが、
チェックボックスが残っている状態です。

添付画像部分のソースを消してよかったのか、
そして、チェックボックスが消える方法をお教えいただけますでしょうか。

よろしくお願いいたします。###HR######IMG03ac2d5902a042e05217e1601ee9c8c8c.jpegIMG0######BR###

Answer

ECマスターズの田中です。

私にて状況を確認したところ、
確かにポップアップは表示されますが、
ページを読み込むと常に表示される状態になっておりました。

まずは、削除された
checked
の表記を復旧していただきますようお願いします。

次に、styleタグの中に
input#modal { display: none; }
上記1行を加えていただきますようお願いします。

最後に、下記scriptタグを加えていただき、
内容がそのまま表示されてしまうかどうか、
ご確認いただきますようお願いいたします。


 jQuery(function($){
 var k = 'modal';
 var v = 'done';
 if( localStorage.getItem(k) !== v ) $('#modal').prop('checked',false);
 $('#modallabel, #modallabel a').click(function(){ localStorage.setItem(k,v); });
 });

Answer

田中様

ご確認、ご回答ありがとうございます。

うまくできました。
ありがとうございました。

Answer

以前質問し、解決したのですが、表示がおかしくなったので再度質問させていただきました。

上記修正でうまくいったのですが、ある時見ると、ポップアップが出なくなり、
共通フッター部分に設定したためか、
ページの下部に、
・チェックボックス
・ポップアップさせたい画像
が表示させるようになってしまいました。

再度ポップアップで表示させるためにはどうすればよいでしょうか。

該当ページなどの情報は、追って、「投稿内容について報告する 」からご連絡させていただきます。

お忙しいところ申し訳ございませんが、よろしくお願いします。

Answer

田中様

ご回答いただき、そしてそのまま貼り付けていい状態でお教えいただきありがとうございます。
無事修正できました。

ありがとうございました。

Answer

お世話になっております。
ショップサーブに先日2020/07/13 18:53にいただいたものを貼り付け、ポップアップが表示されるようになったのですが、ドメインに移動した後、1回のみの表示がいいのですが、ページ遷移後にも表示されてしまうようになりました。

デザインレシピの、ポップアップバナーを表示させる方法
スマートフォンA
https://club.ec-masters.net/index.php?design_popup_bunner

を見てもどこをどう直せばいいのかわかりません。

すみませんが、どこを直せば、更新・別ページ遷移時のバナー表示時に表示しなくなりますでしょうか。

よろしくお願いいたします。

Answer

ECマスターズの田中です。

失礼しました、確認したところ、
動作に必要な記述が一部抜けていることがわかりました。

お手数ですが、ソース内の

を

に置き換えていただきますようお願いいたします。
元ソースにつきましても、修正を行わせていただきました。

Answer

田中様

ご回答ありがとうございます。
いただいた内容で修正し、ポップアップが1回のみになりました。
ありがとうございました。