【楽天/時限式】一定期間が過ぎるとクーポンのURLを自動で変更してくれるJS

乗組員的EC探査録
2018.10.16

はじめに

どういうわけかホットペッパーグルメのクーポンが4000pt(4000円分)付与されていました。
こんにちは。ロケッツの4号機です。

今回は、楽天のクーポンURLを一定期間ごとに自動的に変更してくれる超絶スクリプトを開発しましたのでご紹介します。

予めことわっておきますが、楽天の「クーポン自体を自動で発行」するわけではありません(そこは面倒ですが各自発行してください)。各自発行したURLを予めJavaScriptファイルに記載しておくことで、指定した日時ごとに自動で切り替えを行うというものです。

それでは、どうぞ！

目次

 

前提

まず、今回のスクリプトの前提条件です。
今回のスクリプトはPC表示・スマートフォン表示いずれにも対応しています。
クーポンの表示箇所はPC(GOLDで作成したトップページ及び商品ページ)「ページ右側追従」と、スマートフォン商品ページ「ページ下追従」です。

*PC版クーポンの表示デモ（画面右側に追従）

*スマートフォン版クーポンの表示デモ（画面下に追従）

編集箇所は、楽天GOLDで作成したindex.html(トップページ)と、RMS「ヘッダー・フッター・レフトナビ」及びスマートフォン「商品ページ共通説明文」の３箇所です。
クーポンの画像はPC用・スマートフォン用の２種類を予めご用意ください。
*今回はクーポン画像の変更は行わず、URLのみ変更する仕様です(が、応用を利かせれば画像の変更も簡単に可能ですので必要あればチャレンジしてみてください)。

HTML – iframe.html

<link rel="stylesheet" type="text/css" href="style.css">
<script src="jquery-3.2.1.min.js"></script>
<script src="common.js"></script>
<div id="timerArea">
  <ul>
    <li class="el01"><a href="#"><img src="pc_img_cp50off.jpg" alt="クーポン1"></a></li>
    <li class="el02"><a href="#"><img src="pc_img_cp150off.jpg" alt="クーポン2"></a></li>
  </ul>
</div><!-- /.timerArea -->
<!--///////////////////////////////////
　▼スマホ(商品P)用
///////////////////////////////////-->
<script>
(function ($) {
  if (navigator.userAgent.match(/(iPhone|iPod|Android)/)) { //スマホのみ
    var $target = $('#timerArea ul li');
    $($target).each(function () {
      var $this = $(this);
      var src = $(this).find('a img').attr('src').replace('pc_', 'sp_');
      $(this).find('a img').attr('src',src);
    });
    $('#timerArea').css('width','100%');
    $('#timerArea ul').css('display','flex');
    $('#timerArea ul li').css('padding','3px');
    $('#timerArea ul li').css('margin-right','0');
    $('#timerArea ul li:not(:last-of-type)').css('margin-bottom','0');
  }
})(jQuery);
</script>

設置時には上記のhtmlをiframeで呼び出しします。
PC/スマートフォンいずれも同一のファイル(上記)を呼び出すため、スマートフォン表示用にデバイス判定でスタイルをJSで付与+画像切り替えを行っています。
またクーポン画像のファイル名は、PC用は「pc_」スマートフォン用は「sp_」から始めてください(画像切り替えのフラグとして)。

JavaScript(jQuery) – common.js

(function ($) {
"use strict";
//時間の取得
let nowDate = new Date();
let nowYear = nowDate.getFullYear();
let nowMonth = ("0"+(nowDate.getMonth() + 1)).slice(-2);
let nowDay = ("0"+nowDate.getDate()).slice(-2);
let nowHours = nowDate.getHours();
let nowMinutes = nowDate.getMinutes();
let now = nowYear +"/"+ nowMonth +"/"+ nowDay +"/"+ nowHours +":"+ nowMinutes;
//タイマー
let setTimerFx = function(){
  //要素の取得
  let $el01 = $('#timerArea .el01 a'); //クーポン1
  let $el02 = $('#timerArea .el02 a'); //クーポン2
  if ('2018/10/16/00:00' < now && now < '2018/10/24/23:59') {
    $($el01).attr('href','[クーポン1のURLを記載]');
    $($el02).attr('href','[クーポン2のURLを記載]');
  }else if ('2018/10/25/00:00' < now && now < '2018/10/31/23:59') {
    $($el01).attr('href','[クーポン1のURLを記載]');
    $($el02).attr('href','[クーポン2のURLを記載]');
  }else if ('2018/11/1/00:00' < now && now < '2018/11/7/23:59') {
    $($el01).attr('href','[クーポン1のURLを記載]');
    $($el02).attr('href','[クーポン2のURLを記載]');
  }else if ('2018/11/8/00:00' < now && now < '2018/11/14/23:59') {
    $($el01).attr('href','[クーポン1のURLを記載]');
    $($el02).attr('href','[クーポン2のURLを記載]');
  }else{
    //上記時間以外は非表示
    $($el01).parent('li').hide();
    $($el02).parent('li').hide();
  }
};
$(document).ready(function () {
  setTimerFx();
});
})(jQuery);

*2018/11/8修正
変数「nowMonth」及び「nowDay」にて取得する日付の数値が１桁の場合、頭に0(ゼロ)を付けるよう修正いたしました。

変数「$el01」及び「$el02」がクーポンのリンク(href)となります。
期間の指定は、例えば下記の箇所

if ('2018/10/16/00:00' < now && now < '2018/10/24/23:59') {
  $($el01).attr('href','[クーポン1のURLを記載]');
  $($el02).attr('href','[クーポン2のURLを記載]');
}

は「2018/10/16/00:00〜2018/10/24/23:59」で表示しますよ、という意味です。そのif文のなかに該当期間中のクーポンのURLを記入します。以降elseifで分岐を作って期間を追加していけばOK。ただし期間は被らないように注意してください。
期間外は要素を非表示(hide)にします(ただしページ上ではiframeの要素が残っているため、設置しない期間が続くようであればiframeごと非表示もしくは削除しておきましょう)。

CSS – style.css

#timerArea{
  width: 87px;
  margin: 0 0 0 auto;
  text-align: right;
}
#timerArea ul li{
  margin-right: -8px;
}
#timerArea ul li:hover{
  margin-right: 0;
  transition: 0.3s ease-in-out;
}
#timerArea ul li:not(:last-of-type){
  margin-bottom: 10px;
}
@media screen and (max-width: 480px) {
  #timerArea{
    width: 100%;
  }
  #timerArea ul{
    display: flex;
  }
  #timerArea ul li{
    width: 50%;
  }
  #timerArea ul li a{
    display: inline-block;
    width: 100%;
  }
  #timerArea ul li a img{
    width: 100%;
  }
}/* @media screen and (max-width: 480px) */
/****************************
  RMS用CSS(PC)
****************************/
#RightCp{
  position: fixed;
  right: 0;
  top: 120px;
  height: 325px;
  width: 90px;
}
/****************************
  RMS用CSS(スマホ)
****************************/
@media screen and (max-width: 480px) {
  #ftCp{
    width: 100%;
    height: 70px;
    display: block;
    position: fixed;
    bottom: 60px;
    left: 0px;
    z-index: 1000;
  }
  #ftCp iframe{
    width: 100%;
  }
  /* 楽天既存表示の要素 */
  #offer-notification-btn.offer-notification-enable+#floatingButtons{
    bottom: 200px !important;
  }
  #offer-notification-btn{
    bottom: 130px !important;
  }
  @media screen and (max-width: 320px) {
    #ftCp{
      bottom: 50px;
    }
  }/* @media screen and (max-width: 320px) */
}/* @media screen and (max-width: 480px) */

スタイルシートに関してはお好みで各自調整してください。

設置方法(RMS/GOLD)

 

index.html(GOLDに作成しているトップページ)

<div class="fixCpBnr">
  <iframe src="iframe.html" width="87" height="320" scrolling="no" frameborder="0"></iframe>
</div>
<style>
.fixCpBnr{
  position: fixed;
  right: 0;
  top: 120px;
}
@media screen and (max-width: 480px) {
  #fixCpBnr{
    width: 100%;
    z-index: 9999;
  }
  #fixCpBnr iframe{
    width: 100%;
    position: fixed;
    bottom: 0;
    height: auto;
  }
}/* @media screen and (max-width: 480px) */
</style>

 

RMS「ヘッダー・フッター・レフトナビ」 – PC

<link rel="stylesheet" href="https://www.rakuten.ne.jp/gold/xxxxxx/style.css">
<iframe src="https://www.rakuten.ne.jp/gold/xxxxxx/iframe.html" id="RightCp" scrolling="no" frameborder="0"></iframe>

 

RMS「商品ページ共通説明文」 – スマートフォン

<link rel="stylesheet" href="https://www.rakuten.ne.jp/gold/xxxxxx/style.css" =""="">
<iframe src="https://www.rakuten.ne.jp/gold/xxxxxx/iframe.html" id="ftCp" scrolling="no" frameborder="0" =""=""></iframe ="">

 

さいごに

いかがでしたか？
たとえば向こう先ひと月分のクーポンを発行しておき、予めURLを登録しておけばイチイチURL変更の手間なく自動で切り替わってくれます。
ちなみにクーポンでなくとも、どんなURLでも大丈夫です(セール時の特集ページでもOK)。
あと、最近なにかと時限式に関するブログが多いのですが、いまマイブームなのでもう少し続くかもしれません。ご了承ください。

それでは、良き楽天クーポンライフを！

ECの運営でお悩みの方！ロケッツに「ほぼ丸投げ」してみませんか？

ECサイトのコンサル・制作・運用業務に10年以上携わっているチームが、最短の成功法則を多角的に提案・実行・検証まで一貫して行います。
今後さらに拡大し、兆規模になっていくEC市場。
現在その中心にある大手ECモールの最新ノウハウと実行方法を熟知しており、常に最善のEC運営を実現していきます！

サービスを詳しく見る
乗組員的EC探査録
JavaScriptjQueryクーポン楽天
シェアする
肆号機
コンサルロケッツステーション
タイトルとURLをコピーしました