楽天イベントバナーをスライド表示・掲載期間を設定する方法

楽天などのイベントバナーのショップページへの貼り替えの作業は積極的にイベントに行っている場合は、イベント開始時にバナーを掲載してイベントが終了した時にはバナーを削除するといった面倒な作業が発生します。また、夜中に開始、終了することがあるイベントもたくさんあります。終了したバナーを削除するのを忘れたたなんてこともよく聞く話ですね。そんな、面倒な作業を削減したいという方におすすめの方法を紹介します。

楽天イベントバナーをslick.jsを使って表示する方法を紹介、掲載期間の設定も出来るようにしてみた

楽天などで積極的にイベント実施している場合は、ショップページに掲載するイベントバナーの貼り替えの作業は面倒な作業の1つではないでしょうか。有料のツールなどで自動的にバナーを表示、更新してくれるようなものもありますが、自動更新されるのは全体のイベントくらいでしょう。イベントも数日間で終わってしまうものから、1ヶ月、数ヶ月イベントが継続するものもあります。

ショップに掲載するしないの判断も必要になりますし、RMSにログインしてイベント情報ページでイベント内容、イベント開催期間を確認、バナー画像、リンク先情報などを取得する必要があります。これをすべて自動でというのは難しいのではないでしょうか。

1回の更新作業でまとめて設定して更新回数を減らそう

イベントが開始したタイミングでバナーを掲載する。２，３日後にイベントが終了したのでバナー掲載を削除する。といった感じで都度バナー更新作業をするのは非常に面倒な作業です。そこで、更新回数を減らす方法を考えてみます。

上記のように開始時、終了時とイベントの都度バナー更新を実施しているのであれば、掲載期間の設定が出来れば更新頻度は減らすことが出来ますよね。

ネットショップ運営の気になる備忘録

 

11 Users

45 Pockets

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

過去に紹介したjavascriptを使った方法を使えば掲載する期間を設定することが可能です。

また、楽天のショップでよく見かけるイベントバナーがスライドして自動的に切り替わっているやつにしたいと思います。

ネットショップ運営の気になる備忘録

 

15 Users

55 Pockets

カルーセル表示実装ならjQuery「slick.js」が簡単でおすすめ

画像をスライドさせる方法は色々とありますが、今回は上記のjqueryプラグインを使ってみます。

掲載期間の設定、画像を動かすスライダーの詳細については過去記事を参照してみてください。

今回は、この2つを組み合わせて、掲載期間も設定出来てスライドして動くイベントバナーの実装方法を紹介したいと思います。

サンプルソース

<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">
				イベントバナーのサンプル1です
			</a>
		</div>
		<div id="img2">
			<a href="#">
				<img src="画像URL">
				掲載期間を設定することが可能です
			</a>
		</div>
		<div id="img3">
			<a href="#">
				<img src="画像URL">
				slick.jsで自動的にスライドします
			</a>
		</div>
		<div id="img4">
			<a href="#">
				<img src="画像URL">
				楽天イベントバナーのサンプル4です
			</a>
		</div>
		<div id="img5">
			<a href="#">
				<img src="画像URL">
				楽天イベントバナーのサンプル5です
			</a>
		</div>
		<div id="img6">
			<a href="#">
				<img src="画像URL">
				楽天イベントバナーのサンプル6です
			</a>
		</div>
		<div id="img7">
			<a href="#">
				<img src="画像URL">
				楽天イベントバナーのサンプル7です
			</a>
		</div>
		<div id="img8">
			<a href="#">
				<img src="画像URL">
				楽天イベントバナーのサンプル8です
			</a>
		</div>
		<div id="img9">
			<a href="#">
				<img src="画像URL">
				楽天イベントバナーのサンプル9です
			</a>
		</div>
		<div id="img10">
			<a href="#">
				<img src="画像URL">
				楽天イベントバナーのサンプル10です
			</a>
		</div>
	</div>
</div>

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

startday[1] = new Date('2015/07/22 00:00');
endday[1] = new Date('2015/07/25 23:00');

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

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

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

startday[5] = new Date('2015/07/01 00:00');
endday[5] = new Date('2013/07/31 23:59');

startday[6] = new Date('2015/08/01 00:00');
endday[6] = new Date('2015/08/31 23:59');

startday[7] = new Date('2015/09/07 00:00');
endday[7] = new Date('2015/09/31 23:59');

startday[8] = new Date('2015/10/01 00:00');
endday[8] = new Date('2015/11/31 23:59');

startday[9] = new Date('2015/01/01 00:00');
endday[9] = new Date('2015/12/31 23:59');

startday[10] = new Date('');
endday[10] = 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>

1行目から4行目
必要なjsファイル、cssファイルを読み込んでいます。ここでは同一フォルダでの記述になっているのでパスは環境に合わせてください。

5行目から16行目
CSSを記述している部分です。

18行目から75行目
バナー画像、リンク先情報といったタグを記述している部分です。div class=”bannerlist”の内側にdiv id=”img1″～div id=”img10″と10個の要素で構成されています。

77行目から118行目
掲載期間を設定している記述です。startday、enddayに掲載開始日時、終了日時を設定します。

startday[1] とendday[1] はdiv id=”img1″の掲載期間
startday[6] とendday[6] はdiv id=”img6″の掲載期間
といった感じで[]内の数字とid=”img数字”を関連付けています。

掲載期間の入力をする際の注意点としては
例）2015/07/25 07:00
月、日、時、分が1桁の場合は2桁になるように0詰めする。
日付と時間の間には半角スペースを入れる。
といった点に注意してください。

掲載期間の指定がない場合は、new Date(”);とします。開始日時だけ、終了日時だけのどちらか片方のみを指定することも可能です。

上記で設定した掲載期間の情報を使って、スクリプト上では現在の日時と開始日時、終了日時を比較して掲載期間なのかチェックをしてます。そして、掲載期間でない場合は、$(‘#img’+i).remove();で要素を削除しています。

設定出来る画像を増やす場合
このサンプルでは10個までしか設定できませんが、20個、30個と設定出来るバナー数を増やすのも簡単です。３箇所修正が必要です。

１つ目：div id=”img1″～div id=”img10″の部分をdiv id=”img11″、div id=”img12″と必要な数だけ増やします。

２つ目：startday[10]、 endday[10] をstartday[11]、 endday[11] と追加します。

３つ目：１１９行目のfor(i=1;i<=10;i++){の10を変更する必要があります。20個設定出来るようにタグ、掲載期間を追加したなら、20とします。 以上の3箇所を修正するだけで、設定できる画像数を増やすことが可能です。 120行目から130行目 さきほどの掲載期間の処理で掲載する内容のみが残った状態になっているので、それに対してslick.jsが実行される形になります。slick.jsの実行している記述では表示、スライドする画像の数を1つにしているのと、自動実行のオプションを指定してます。

動作サンプル

さきほどのサンプルソースの実行サンプルです。掲載期間外のバナーは表示されていないのを確認してみてください。

※左右のボタンの色は変更しています。
slick-theme.cssの72行目付近でcolor: black;としています。左右ボタンはフォントを使って表示しているので、色を変更することが可能です。また、font-sizeを変えることでサイズを変更することも可能です。

掲載期間を設定することが出来るので、イベント開始時、終了時に都度バナーを更新する必要がありません。イベント終了したのでバナー消すの忘れてたというのも防げます。月に1回など定期的にバナーをまとめて貼り替えするようにすれば、更新作業の手間はかなり削減出来るのではないでしょうか。ぜひ、活用してみてください。

slick.jsについて別記事あります。

ネットショップ運営の気になる備忘録

 

19 Users

60 Pockets

slick.jsで左右の画像をチラ見せするスライダーの設定方法について

スライダーに関する別記事

ネットショップ運営の気になる備忘録

 

6 Pockets

jQueryを使わないレスポンシブ対応の画像スライダー、カルーセル表示「Swiper.js」

ネットショップ運営の気になる備忘録

 

15 Users

31 Pockets

[jQuery]FlexSlider.jsサムネイル、カルーセル対応の軽量スライダー