モーダルウィンドウの表示について

Question

デザインレシピで公開されているポップアップバナーですが、
毎回表示される仕様は変更できないでしょうか。
例えば、一度表示した後は表示されない仕様にする、
もしくは、以降表示しないなどのチェックボックスを設置してクリックすると表示されなくなるなどは可能でしょうか。

Answer

ECマスターズの田中です。

PC用ページの場合は、
デザインレシピにて記述の通り、
毎回表示される仕様となっており、ご変更いただくことはできません。

スマートフォン用ページの場合、
JavaScriptによる制御ができるため、変更可能です。
一度表示されたあとは表示しない仕様のポップアップを、
デザインレシピにて「スマートフォン A」として
公開しておりますので、ご活用ください。

なお、一度表示したかどうかは、
「スマートフォン A」のソースに含まれる
var k = 'modal';
上記の「modal」の部分にて名前をつけて判断しております。
今後、別のバナーを出される場合は、「modal190917」など、
別の名前に変更した上でご利用ください。

Answer

「スマートフォン A」すみません。こちら見落としておりました。
一度表示したら表示しないよう設定しましたが、
表示回数を指定することは出来ないでしょうか。

Answer

ECマスターズの田中です。

> 表示回数を指定することは出来ないでしょうか。

その仕組みを実装するには、
別途開発を行う必要がございます。

あくまでも私の見解となりますが、
ショップを回遊時、２回同じポップアップが表示された時点で
常に表示されるものと認識され、
手間を感じさせてしまう可能性があると考えております。
この点について、一度ご検討いただきますようお願いします。

アダルトさんでの設置時に不便である、ということでしたら、
if( localStorage.getItem(k) !== v ) $('#modal').prop('checked',false);
上記１行に含まれている
!
を、作業中のみ削除していただければ、
一度表示した人のみ常にポップアップが表示される状態になります。
作業後は必ず!を戻していただきますようお願いします。

Answer

ありがとうございます。このまま「スマートフォン A」を使用します。

以降表示しないなどのチェックボックスを設置してクリックすると表示されなくなるバージョンも開発して頂けると助かります。
というのも、今回のマラソンの事前告知で早々にモーダルウィンドウも設置し、いざ開催日になって再度来訪された場合、表示されないのは少し勿体ない気がしてしまいました。
こちらのソースはキャッシュなどクリアしない限りは、再表示されないのでしょうか。
また、今記述しているソースを削除、更新した上で再度、設置した場合は一度表示された方にも再度表示されますでしょうか。

Answer

ECマスターズの田中です。

> というのも、今回のマラソンの事前告知で早々にモーダルウィンドウも設置し、いざ開催日になって再度来訪された場合、表示されないのは少し勿体ない気がしてしまいました。

ということでしたら、先の返信のとおり、
var k = 'modal';
上記の「modal」の部分の名付けによって、
一度訪問されたかどうかを判断しておりますので、

事前告知期間は
var k = 'modal201909marathon_pre';
にしておき、開催期間になったら
var k = 'modal201909marathon';
に変更する、
といった形で、名前を分けていただくことで、
開催期間に再度表示させることができます。

（9/18 10:47 下記ソース修正）
さらに、この一行を
var tm = "お買い物マラソン開催日時";
var k = "固定文字列" + (Math.max(new Date(), new Date(tm + " +0900")) == new Date(tm + " +0900").getTime() ? "事前告知用文字列" : "" );
という形式の２行に、つまり今回のお買い物マラソンの場合は
var tm = "2019/09/19 20:00:00";
var k = "modal201909marathon" + (Math.max(new Date(), new Date(tm + " +0900")) == new Date(tm + " +0900").getTime() ? "_pre" : "" );
のようにご変更いただくことで、
事前告知・開催中で、自動で再度表示させるようにすることも可能です。
この方法の場合、別のイベントを表示する場合は、
「お買い物マラソン開催日時」「固定文字列」の二箇所をご変更いただく形になります。

上記方法を、一度ご確認いただきますようお願いいたします。

Answer

var tm = "お買い物マラソン開催日時";を追加しました。
var k = 'modal201909mr_pre';
var k = 'modal201909mr';
へ名称変更しています。
また、上記で回答されている
var k = "modal201909marathon" (Math.max(new Date(), new Date(tm " 0900")) == new Date(tm " 0900") ? "_pre" : "" );
ですが、”事前告知用文字列”は省略可能なのでしょうか?　”_pre”となっているのですが下記のように
記述しても問題ないでしょうか。



jQuery(function($){
var tm = "2019/09/19 20:00:00";
var k = "modal201909mr" (Math.max(new Date(), new Date(tm " 0900")) == new Date(tm " 0900") ? "modal201909mr_pre" : "" );
var v = 'done';
if( localStorage.getItem(k) !== v ) $('#modal').prop('checked',false);
$('#modallabel, #modallabel a').click(function(){ localStorage.setItem(k,v); });
});

Answer

ECマスターズの田中です。

申し訳ありません、
ソース内に必要な「+」および関数１つが抜けた状態で
ご案内差し上げてしまいました。

改めて、正しい構造およびサンプルをご案内いたしますので、
お手数ですが、下記構造に沿って
再度ご設置いただきますようお願いします。

var tm = "お買い物マラソン開催日時";
var k = "固定文字列" + (Math.max(new Date(), new Date(tm + " +0900")) == new Date(tm + " +0900").getTime() ? "事前告知用文字列" : "" );

例：
var tm = "2019/09/19 20:00:00";
var k = "modal201909marathon" + (Math.max(new Date(), new Date(tm + " +0900")) == new Date(tm + " +0900").getTime() ? "_pre" : "" );

先にご案内差し上げたソースも、上記内容に差し替えさせていただきます。

> ”事前告知用文字列”は省略可能なのでしょうか?

省略可能、の意味によるのですが、
全く何も書かない、という意味でしたら、
事前告知・開催中の違いがなくなってしまいますので、
１文字でもいいので、必ずご記載をお願いします（"a"でも結構です）。
イベントごとの書き換え作業は省略していただき、
毎回同じ文字列のままで結構です。

> 下記のように
> 記述しても問題ないでしょうか。

申し訳ありません、先述の通り、
今回アダルトさんにてご記載いただいた内容を
改めて上記構造に落とし込んでいただく必要がございますが、

いただいたソースの場合、
事前告知中は「modal201909mrmodal201909mr_pre」
開催中は「modal201909mr」
という出し分けを行う形になります。
動作上は問題ございませんので、こちらでも結構です。

Answer

省略可能の箇所は
var k = "modal201909marathon" + (Math.max(new Date(), new Date(tm + " +0900")) == new Date(tm + " +0900").getTime() ? "_pre" : "" );の
"_pre"の部分です。
"modal201909marathon_pre”と表記しなくても大丈夫なのですね。



事前告知中は「modal201909mrmodal201909mr_pre」とすると
下記は間違っているのでしょうか。
jQuery(function($){
var tm = "2019/09/19 20:00:00";
var k = "modal201909mr"+ (Math.max(new Date(), new Date(tm + " +0900")) == new Date(tm + " +0900").getTime() ?"modal201909mr_pre" : "" );
var v = 'done';
if( localStorage.getItem(k) !== v ) $('#modal').prop('checked',false);
$('#modallabel, #modallabel a').click(function(){ localStorage.setItem(k,v); });
});

Answer

ECマスターズの田中です。

var k = "modal201909mr"+ (Math.max(new Date(), new Date(tm + " +0900")) == new Date(tm + " +0900").getTime() ?"modal201909mr_pre" : "" );

上記行を解説しますと、
基本的な文字列として「modal201909mr」があり、
期間前かどうかで、後ろに「modal201909mr_pre」を追加する/しないの
判断を行っております。

そのため、
事前告知中は「modal201909mr_pre」
開催中は「modal201909mr」
という出し分けを行う場合は、

var k = "modal201909mr"+ (Math.max(new Date(), new Date(tm + " +0900")) == new Date(tm + " +0900").getTime() ? "_pre" : "" );

とご記載いただくようお願いします。

Answer

ありがとうございました!!
理解できました!!