【楽天】「期間指定バナー」の日時をclass名で簡単に設定できちゃうJavaScript

楽天運営代行・ECコンサル
2018.09.01

こんにちは。ロケッツ４号機です。

本記事では「期間指定で表示・非表示の切り替えができるバナー」についてご紹介します。
ご紹介するスクリプトは基本的にどのウェブサイトでも設置できる仕様ですが、とりわけ今回は楽天の「GOLDで作成したページ」と、スマートフォンの「商品ページ共通説明文」の２箇所への設置を想定してご案内します。
つい面倒なバナーの設置&撤去の作業。けれどもこれさえあればもう簡単！
「楽天スーパーSALE」や「お買い物マラソン」などのイベント時にぜひ活用ください。

さらに！今回は「class名で期間をかんたんに指定できる」よう、ひと手間加えました！

これまでよくあったのが、期間の指定を「JavaScriptファイル側」で設定する方法でした。
しかし、コーダー以外の人間がJavaScriptを編集するのはハードルが高く、万一記述ミスが生じた場合にページが表示されなくなるなど、想定外の事態を招きかねません。
また楽天などの場合、Javascriptファイルのアップロード〜反映(キャッシュ)までの時間が掛かる傾向にあり、スピーディな対応ができない点も不便でした。

そこでパッと閃いたのが「class名で期間を指定する」方法。
JavaScriptはイマイチでも「class名」なら、なんとな〜くHTMLを見たり触ったりしたことがある方でも簡単に設定できるはず。
今回ご紹介する期間指定の仕組みもJavaScriptを使用していますが、コピーアンドペーストでかんたんに設置できるのでご安心ください。

楽天GOLDで「期間指定バナー」を設置する方法

まずは楽天提供のサーバー「GOLD」内で作成したページ(html)に「期間指定バナー」を設置する方法です。
GOLDで作成したトップページや、セール時の特設ページなどがよくGOLDで作成されていますね。

HTMLの書き方

<div>
  <ul>
    <li class="limit--2018-09-04_20-00--2018-09-11_01-59"><a href="[URL]"><img src="[バナー画像のURL]"></a></li>
    <li><a href="[URL]"><img src="[バナー画像のURL]"></a></li>
    <li><a href="[URL]"><img src="[バナー画像のURL]"></a></li>
  </ul>
</div>

見てみると、li要素の一番目にのみclassが付いています。
このclassがバナー表示/非表示の「期間指定」用のclassなのです。

class名の「2018-09-04_20-00」の数字が「表示開始」の日時。
そして「2018-09-11_01-59」が、「表示終了」の日時となります。
つまりここでは「2018年9月4日20:00〜2018年9月11日1:59」まで表示する、という設定になります。

JavaScript(jQuery)の書き方

(function ($) {
  "use strict";
  //時間の取得
  let now = new Date();
  let limitedBnrFx = function(){
    let $target = $('body *[class^="limit--"]');
    $($target).each(function () {
      let $this = $(this);
      let $className = $this[0].className.split(' ')[0];
      let $classNameSplit = $className.split('--');
      //開始日時の取得
      let $st = $classNameSplit[1].split('_');
      let $stYmd = $st[0];
      let $stTime = $st[1].replace(/-/g, ':');
      let $stDate = $stYmd.replace(/-/g, '/') + ' ' + $stTime + ':00';
      let startDay = new Date($stDate);
      //終了日時の取得
      let $end = $classNameSplit[2].split('_');
      let $endYmd = $end[0];
      let $endTime = $end[1].replace(/-/g, ':');
      let $endDate = $endYmd.replace(/-/g, '/') + ' ' + $endTime + ':00';
      let endDay = new Date($endDate);
      //表示・非表示の設定(設定期間内は表示[show]・それ以外の期間は非表示[hide])
      if ( startDay < now && now < endDay ){
        $this.show();
      }else{
        $this.hide();
      }
    });
  };
  $(document).ready(function () {
    limitedBnrFx();
  });
})(jQuery);

仕組みはとても単純で、body配下にある「limit–」から始まるclassをターゲットとし、処理を行っています。
「limit–」から始まるclassとはつまり、先ほどのHTMLの「class=”limit–2018-09-04_20-00–2018-09-11_01-59″」です。
class名から開始日時・終了日時の箇所を取り出し、いま現在の日時が「開始日時」と「終了日時」の期間内であればバナー(要素)を表示、それ以外であれば非表示という設定です。

以上が楽天GOLDのファイルに期間指定バナーを設置する方法です。
次に楽天の管理画面(RMS)から、スマートフォンの「商品ページ共通説明文」に期間指定バナーを設置してみましょう。

楽天RMS「商品ページ共通説明文(スマートフォン)」に期間指定バナーを設置する方法

つぎに楽天RMS「商品ページ共通説明文(スマートフォン)」に期間指定バナーを設置する方法をご紹介します。
「商品ページ共通説明文」とは、スマートフォンの商品ページに共通して表示させたいバナー等を記述・編集する箇所です。

HTMLの書き方

<script src="[JavaScriptファイルのURL]" charset="utf-8" =""></script ="">
<div =""="">
  <ul ="">
    <li class="limit--2018-09-04_20-00--2018-09-11_01-59" =""><a href="[URL]"><img src="[バナー画像のURL]"></a></li ="">
    <li =""><a href="[URL]"><img src="[バナー画像のURL]"></a></li ="">
    <li =""><a href="[URL]"><img src="[バナー画像のURL]"></a></li ="">
  </ul ="">
</div　　>

上記のコードをRMS「商品ページ共通説明文」に記述します。
scriptタグのパスは、後述のJavaScriptを保存し、GOLDにアップロードした先のパスを記述します。
class名の説明は、先述の『楽天GOLDで「期間指定バナー」を設置する方法』と同じなので割愛させていただきます。

JavaScript(jQuery)の書き方

(function ($) {
  "use strict";
  //時間の取得
  let now = new Date();
  let limitedSpFx = function(){
    let $target = $('#shopCommonText *[class^="limit--"]');
    $($target).each(function () {
      let $this = $(this);
      let $className = $this[0].className.split(' ')[0];
      let $classNameSplit = $className.split('--');
      //開始日時の取得
      let $st = $classNameSplit[1].split('_');
      let $stYmd = $st[0];
      let $stTime = $st[1].replace(/-/g, ':');
      let $stDate = $stYmd.replace(/-/g, '/') + ' ' + $stTime + ':00';
      let startDay = new Date($stDate);
      //終了日時の取得
      let $end = $classNameSplit[2].split('_');
      let $endYmd = $end[0];
      let $endTime = $end[1].replace(/-/g, ':');
      let $endDate = $endYmd.replace(/-/g, '/') + ' ' + $endTime + ':00';
      let endDay = new Date($endDate);
      //表示・非表示の設定(設定期間内は表示[show]・それ以外の期間は非表示[hide])
      if ( startDay < now && now < endDay ){
        $this.show();
      }else{
        $this.hide();
      }
    });
  };
  $(document).ready(function () {
    limitedSpFx();
  });
})(jQuery);

仕組みはGOLD版とほとんど同じです。
ただ、ターゲット先を念のために「#shopCommonText(商品ページ共通説明文のエリアに付与されているID)」としています。
上記JSを外部化してGOLDの任意のディレクトリにアップロードしましょう。

これで、GOLD版同様、期間内は表示、期間外は非表示のバナーとなります。

さいごに

いかがでしたか？
JSさえ設置しておけば、あとはclass名で期間を指定できるので、かんたんに設定できるかとおもいます。
また、バナーだけでなくclass名さえ付与すればあらゆる要素が「期間指定」できるので、たとえば「年末年始のお知らせ」などに期間指定を適用するのも良いでしょう。
ただ・・・デメリットとして、スマートフォンの「商品ページ共通説明文」は文字数制限があるため、複数設置すると文字数オーバーになってしまうという懸念があります。
期間を終え、使用しなくなった要素などをこまめに整理するなどして文字数オーバーにさえ気をつければ、きっとセール時などに役立つツールになってくれるはずです。

それでは！

タイトルとURLをコピーしました