先月、友人の紹介で、新しいショップの立ち上げに人が足りないから
手伝って欲しいとの依頼を受け、なんだかんだとバタバタしていて、
bottleの勉強は、少し停滞気味です。
でも、その作業の中で、
元々使用していた日時指定でバナーを切り替える
Javascriptを整理したので公開。
全ての自動化は無理だけど、お金をかけずに
月に２回程度、マラソン前に少し手を加える程度で
更新をサボっていない感のでるscriptです。
<script type="text/javascript" src="js/slick.min.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(window).on('load', function() {
var i=0;
var image =[];
var link=[];
var startday =[];
var endday = [];
//
// ここから更新可能エリア
//
// image → 楽天RMS Imageurl
// link → リンク先
// startday → 開始日時 ( yyyy:mm:dd hh:mm )
// endday → 終了日時 ( yyyy:mm:dd hh:mm )
// ワンダフルデイ（毎月１日）
image[i] ="https://image.rakuten.co.jp/xxxxxxxxx/cabinet/event/monthly_x3.gif";
link[i] = "https://event.rakuten.co.jp/campaign/point-up/wonderfulday/";
startday[i] = new Date('2021/10/01 00:00');
endday[i] = new Date('2021/10/01 23:55');
i=i+1;
// 楽天マラソン
image[i] ="https://image.rakuten.co.jp/xxxxxxxxx/cabinet/event/marathon_pc.gif";
link[i] = "https://event.rakuten.co.jp/campaign/point-up/marathon/";
startday[i] = new Date('2021/10/04 20:00');
endday[i] = new Date('2021/10/11 01:55');
i=i+1;
// ５、１０日のポイント５倍
image[i] ="https://image.rakuten.co.jp/xxxxxxxxx/cabinet/event/20180305_cardx5.jpg";
link[i] = "https://event.rakuten.co.jp/campaign/card/pointday/";
startday[i] = new Date('2021/10/05 00:00');
endday[i] = new Date('2021/10/05 23:55');
i=i+1;
image[i] ="https://image.rakuten.co.jp/xxxxxxxxx/cabinet/event/20180305_cardx5.jpg";
link[i] = "https://event.rakuten.co.jp/campaign/card/pointday/";
startday[i] = new Date('2021/10/10 00:00');
endday[i] = new Date('2021/10/10 23:55');
i=i+1;
//
// この先は編集しないでください
//
var today = new Date();
var j=1;
for(i=0;i<image.length;i++){
if(startday[i] < today && today < endday[i] ){
var $newImage =$("<img></img>")
$newImage.attr("src",image[i]);
var $newLink = $("<a></a>");
$newLink.attr("href",link[i]);
$newLink.attr("target","_blank");
$newLink.append($newImage.clone());
$("#banner_"+j).append($newLink.clone());
j=j+1;
}
}
for(i=j;i<=20;i++){
$('#banner_'+i).remove();
}
$('.slider').slick('unslick');
}Jqueryとslickを利用しているので、予め楽天GOLDにアップロードをしておいてください。
下記の部分を適宜追加するとどんどん増やせます。
image[i] ="https://image.rakuten.co.jp/xxxxxxxxx/cabinet/event/20180305_cardx5.jpg";
link[i] = "https://event.rakuten.co.jp/campaign/card/pointday/";
startday[i] = new Date('2021/10/10 00:00');
endday[i] = new Date('2021/10/10 23:55');
i=i+1;簡単に解説すると、
image[i]は、楽天RMSの画像ライブラリの保存場所
link[i]は、リンク先
startday[i]、endday[i]は表示開始日時と終了日時。
i=i+1 で追加や削除、順番を入れ替えても問題ない仕様にしています。
HTMLの準備側は、下記の通りで最大表示20個までバナーは追加可能
#banner_xxを利用しなくても追加できるはずなのですが、うまくかなかったので、置き換えて稼働するようにしました。なので、もし表示バナーが20を超えると当然エラーがでます ^^;
20も表示することないので、あえて制御もいれていません。
<div class="bannerlist">
<div id="banner_1"></div>
<div id="banner_2"></div>
<div id="banner_3"></div>
<div id="banner_4"></div>
<div id="banner_5"></div>
<div id="banner_6"></div>
<div id="banner_7"></div>
<div id="banner_8"></div>
<div id="banner_9"></div>
<div id="banner_10"></div>
<div id="banner_11"></div>
<div id="banner_12"></div>
<div id="banner_13"></div>
<div id="banner_14"></div>
<div id="banner_15"></div>
<div id="banner_16"></div>
<div id="banner_17"></div>
<div id="banner_18"></div>
<div id="banner_19"></div>
<div id="banner_20"></div>
</div>