スタッフブログ

楽天イベントバナーを自動で表示・非表示にする方法

楽天イベントバナーのショップページへの掲載は楽天から推奨されており訪問者の購買意欲にも繋がるのでイベント毎に掲載したいですが、イベント告知開始時にバナーを掲載して、イベント終了時にバナーを削除するという作業が必要になります。
休みの日に開始や終了日が掛かっていたり、夜中に終了するようなイベントもあり、そうでなくてもひとつのイベントに2回の作業が必要となるとなかなか面倒ですよね。
便利システムを使用して開始と終了日時を指定しておけば作業が楽になりますが、有料のシステムを使いたくないという方も多いのではないでしょうか。

そんな悩みをお持ちの方に、作業回数を減らせるおすすめの方法があります。

javascriptで楽天イベントバナーの掲載期間を設定する方法

下記のコードを利用して、簡単にイベントバナーの掲載期間を設定出来ます。

<div id="event">
   <a href="リンク先URL">
       <img src="画像URL">
   </a>
</div>
  
<div id="usually">
   通常時に表示する内容
</div>
 
<script>
var startday = new Date('2017/03/17 00:00:00'); // イベントの開始日
var endday = new Date('2017/03/17 23:59:59'); // イベントの終了日
  
var today = new Date();
if ( startday < today && today < endday ){
   document.getElementById("event").style.display="block";
   document.getElementById("usually").style.display="none";
}else{
   document.getElementById("event").style.display="none";
   document.getElementById("usually").style.display="block";  
}
</script>

“event”が指定期間中に表示される要素、”usually”が指定期間外に表示される要素になります。
<div id=”event”></div>内にイベント中に表示したいバナーなどを記入し、
<div id=”usually”></div>内にイベント期間外に表示しておきたい内容を記入します。

イベント前にこのjavascriptを使用して期間設定しておけば、開始日にバナーを表示して終了日にバナーを削除するという手間を省くことが出来ます。

これだけの簡単な設定で作業が楽になるのでとても便利です。

以上、javascriptでバナーの掲載期間を設定して表示非表示を切り替える方法をご紹介しましたが、これだとひとつのイベント期間しか設定出来ないため、それぞれのイベント毎に設定する必要があります。
複数のイベントを一度に設定出来れば、作業回数を減らせるので効率が上がりますよね。
また、イベントが複数重なっている場合、バナーを並べると場所を取るしなんだかスマートじゃない。

そこで!「slick.js」を使用したスライドバナーを作成し、それぞれのバナーに掲載期間を設定すれば、見た目もスッキリ、作業効率も上げることが出来ます。

複数のイベントバナーを掲載期間を指定してスライドで表示する方法

設置例

「slick.js」をダウンロードする

slick

「slick.js」を使って、様々なレイアウトのスライダーやスライドショーを簡単に実装出来ます。
まず、公式サイト http://kenwheeler.github.io/slick/ よりファイルをダウンロードします。

複数のファイルがダウンロードされますが、今回使用するのは下記の4つです。

  • slick.css
  • slick-theme.css
  • jquery.min.js
  • slick.min.js

ソースサンプル


<link rel="stylesheet" href="slick.css" type="text/css"></link>
<link rel="stylesheet" href="slick-theme.css" type="text/css"></link>
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="slick.min.js"></script>
<style>
.main{
width:468px;
margin-left:30px;
}
.bannerlist div{
text-align:center;
}
.bannerlist div img{
margin-bottom:5px;
}
</style>

<div class="main">
<div class="bannerlist">
<div id="img1">
<a href="#">
<img src="画像URL">
</a>
</div>
<div id="img2">
<a href="#">
<img src="画像URL">
</a>
</div>
<div id="img3">
<a href="#">
<img src="画像URL">
</a>
</div>
<div id="img4">
<a href="#">
<img src="画像URL">
</a>
</div>
</div>
</div>

<script type="text/javascript">
var startday =[];
var endday = [];

startday[1] = new Date('2017/03/29 00:00');
endday[1] = new Date('2017/03/31 23:00');

startday[2] = new Date('');
endday[2] = new Date('2017/04/30 23:00');

startday[3] = new Date('2017/03/29 00:00');
endday[3] = new Date('');

startday[4] = new Date('');
endday[4] = new Date('');

var today = new Date();

for(i=1;i<=10;i++){
if(startday[i] > today || today > endday[i] ){
$('#img'+i).remove();
}
}
</script>

<script type="text/javascript">
$("document").ready(function(){
$('.bannerlist').slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 4000,
});
}); 
</script>

startday[☆] = new Date(‘2017/03/29 00:00’);
ここでバナーの表示を開始する日時を指定します。
開始日時を過ぎて設定する場合は new Date(”); としておけば、反映した瞬間から表示されます。

endday[☆] = new Date(‘2017/03/31 23:00’);
ここでバナーの表示を終了する日時を指定します。
終了日時を指定しない場合は new Date(”); とします。再度編集しない限りは表示され続けます。

startday[1]とendday[1] が <div id="img1">
startday[4]とendday[4] が <div id="img4">
といったように、[]内の数字をimgの後の数字が関連付けられています。
対応する画像と表示期間の数字が合っているか注意してください。

バナーの数を増やしたい場合

<div id="img1">~</div> を追加し、さらにstartday[☆] = new Date(”); と endday[☆] = new Date(”);を追加することで、バナーを追加できます。

また、設定するバナーの数が10個を超える場合は for(i=1;i<=10;i++) この「10」を、バナー数が11個なら「11」、20個なら「20」といったように、設定したい数に応じて増やします。


これだけで簡単にスライドバナーとバナーの表示期間を設定出来るようになります。
いくつかのイベントを同時にアップしておけば、大幅に作業時間を削れるので是非活用してみてください!

表示サンプル

左右のボタンの色を変更する場合は、slick-theme.css の72行目あたりにある color: transparent; を変更したい色に指定してください。

以上、これだけで簡単にスライドバナーとバナーの表示期間を設定出来るようになります。
いくつかのイベントを同時にアップしておけば、大幅に作業時間を削れるので是非活用してみてください!

関連記事

お問合せ

お電話でのお問合せ

メールでのお問合せ

LINEでのお問合せ
ページ上部へ戻る