当サイトの記事には広告が含まれている場合があります

楽天ショップ店運営者必見!時間になったらバナーを切り替える

01_bnr-timechange

楽天などECショップの更新をしていると時間指定でバナーをアップする作業が発生します。
毎回、手作業で更新していました。

時間指定で切り替えられると楽だなと思い、下記サイトを参考にして指定時間でバナーが切り替わるように設置しました。

バナー画像などを期間指定で表示するjavascript

通常は2つのバナー切り替えで問題ないのですが、大型連休が重なると複数回バナー更新する必要がでてきました。

そこで、時間指定変数を増やして複数回バナー切り替えができるように設定。

<div id="Special">
  <a href="リンク先URL">
    <img src="画像URL">
  </a>
</div>
<div id="Event">
  <a href="リンク先URL">
    <img src="画像URL">
  </a>
</div>
<div id="Usually">通常時に表示する内容</div>
<script>
  // イベントの開始、終了設定
  var startday = new Date('2015/09/21 10:00:00');
  var midday = new Date('2015/09/23 19:59:59');
  var endday = new Date('2015/09/28 23:59:59');
  var today = new Date();
  if (startday < today && today < midday ) {
    document.getElementById("MyEvent").style.display = "block";
    document.getElementById("Special").style.display = "none";
    document.getElementById("Usually").style.display = "none";
  } else if (midday < today && today < endday ) {
    document.getElementById("MyEvent").style.display = "none";
    document.getElementById("Special").style.display = "block";
    document.getElementById("Usually").style.display = "none";
  } else {
    document.getElementById("MyEvent").style.display = "none";
    document.getElementById("Special").style.display = "none";
    document.getElementById("Usually").style.display = "block";
  } 
</script>

これでstartday~middayの時間はID=MyEventで指定したバナーが表示、
midday~enddayの時間ID=Specialで指定したバナーが表示されました!

02_bnr-timechange

さらに切り替えたい場合は、変数を追加して else if を追加すればいくつでも切り替えられますね。

もっとスマートな書き方があるかもしれませんが、動くのでよし。

peacepopoさんありがとうございます。
ためになる記事がたくさんなので、いつも参考にさせていただいています。

くるりん

新入社員の頃にシステムエンジニアの会社に入社。その後、WEB制作系の仕事に転職しました。

くるりんをフォローする
楽天
スポンサーリンク
くるりんをフォローする
Memorandums