ページの変更につきまして

Question

いつもお世話になっております。

現在スマホページに表示させているGOLDで作成した特設会場をイベント時にURLを変えずページを一変させる方法は何かありますか？
看板等の簡単なものに関しましてはタイマーを設定しているので問題ないのですが、SS等のイベントの際はセール商品なども表示させたいのでいつもは別ページを作成するのですが、この別ページを別URLで表示させたくありません。
リダイレクトで表示させる方法以外に何かいい方法はないでしょうか。

よろしくお願いいたします。

Answer

ECマスターズの田中です。

たとえば、１つのページの中に、
予め切り替え前後の内容を両方とも記載しておき、
外部スタイルシートファイルの内容によって出し分ける、
という方式はいかがでしょうか。

例：

通常の特設会場
スーパーSALE用の特設会場

上記例の場合、kirikae.cssの内容を
#page2 { display: none; }
にすることで、通常の特設会場が表示され、それをタイマーで
#page1 { display: none; }
に置き換えることで、スーパーSALE用の特設会場が表示される形になります。

なお、楽天GOLDの仕様で、
上書きするファイルのサイズが前のファイルと同じである場合、
上書きが行われず、前のファイルがずっと見え続けるケースがありますので、
末尾に半角スペースを１つ追加するなどして、
ファイルサイズを違えた状態でタイマーをご設定いただきますようお願いします。

Answer

ご返信ありがとうございます。

上記内容でタイマー設定をするにはkirikae.cssは
#page2 { display: none; }
#page1 { display: none; }
だけで新たにCSSをFTPにアップロードすればよろしいでしょうか？
また、現在使用しているタイマーは

// イベントの開始、終了設定
var startday = new Date('2018/07/24 10:00:00');
var endday = new Date('2018/07/24 23:59:59');
var today = new Date();
if ( startday < today && today < endday ){
document.getElementById("MyEvent1").style.display="block";
}else{
document.getElementById("MyEvent1").style.display="none";  
}

のscriptを使用しているのですが、上記scriptの場合はどのように
設定すればよろしいでしょうか。

よろしくお願いいたします。

Answer

ECマスターズの田中です。

> 上記内容でタイマー設定をするにはkirikae.cssは
> #page2 { display: none; }
> #page1 { display: none; }
> だけで新たにCSSをFTPにアップロードすればよろしいでしょうか？
#page1 と #page2 を同時に書いてしまいますと、
両方のページの内容が非表示になって何も表示されなくなりますので、
片方だけをご記載いただく形になりますが、

既にJavaScriptによるタイマー設定を行われているのであれば、
タイマーによるFTPアップロードが不要となりますので、
JavaScriptタイマー設定をご利用いただく方が便利です。

いただいたJavaScriptを

通常の特設会場
スーパーSALE用の特設会場

上記ソースの切り替えに利用するのであれば、

document.getElementById("MyEvent1").style.display="block";
を
document.getElementById("page1").style.display="none"; /* スーパーSALE用の特設会場だけを表示 */
に、

document.getElementById("MyEvent1").style.display="none"; 
を
document.getElementById("page2").style.display="none"; /* 通常の特設会場だけを表示 */
に、
それぞれ置き換えていただく形になります。

Answer

わかりました！試してみます。

ありがとうございました。