【楽天】セール時のバナー設置を超カンタンに行う方法

乗組員的EC探査録

こんにちは。ロケッツ4号機です。
さいきん個人的なB’zブームがようやく落ち着き今度はDIR EN GREYばかり聴いています。

さて、これまでいくつかの記事において楽天の「バナー出し」に関する記事を書かせていただきました。

【楽天】「期間指定バナー」の日時をclass名で簡単に設定できちゃうJavaScript
【楽天】スマホ「商品画像」の上にバナーを設置&高さ自動調節jQueryのご紹介

今回は、これらの記事の内容から「良いところ」を凝縮!!
楽天のセール時(スーパーSALE・お買い物マラソンなど)に必要不可欠な「バナーの出し入れ」を超絶カンタンに行う方法としてご紹介いたします。

セール時にバナーを出したり、終了時には出したバナーを撤去したり・・・思った以上に時間と手間を取られてしまうのがこの「バナー」作業。
今回は楽天での「バナー」の出し入れをJavaScript(jQuery)を活用して「超カンタン」にしてみましょう。

わりと頑張って得た知識や技術を惜しみなく公開するのが、わたしたちロケッツのモットー。
困っているEC店長さんのお役に立てるのならこれ幸いです。

設置には若干のHTML・CSS・JSの知識が必要となります(中級者程度)。
JSに関しては若干の相違を除きほとんど共通ですが、コピペしやすいよう各箇所に記載しています。
*本記事に記載のタグやスクリプトは楽天の仕様変更により使用できなくなる可能性があります。あらかじめご了承ください。

目次

 

[スマートフォン/RMS]商品ページ設定

ここで出来ること

・バナーを時限式(期間指定で自動表示/非表示)にする。
・バナーをヘッダー下(サムネイル上部)に表示する。
・バナーの表示エリアの「高さ」を自動可変にする。

RMS内の記述「商品ページ共通説明文」

<script src="https://www.rakuten.ne.jp/gold/[shopname]/js/limited-sp.js" charset="utf-8" =""></script ="">
<link rel="stylesheet" href="https://www.rakuten.ne.jp/gold/[shopname]/css/style.css" ="">
<div =""="" id="bnrCont">
<p class="limit--2018-09-14_22-00--2018-09-29_09-59" =""><a href="[リンクURL]" target="_blank"><img src="[画像URL]"></a></p ="">
</div  >

limited-sp.js

(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);
      if ( startDay <= now && now <= endDay ){
        $this.show();
      }else{
        $this.hide();
      }
    });
  };
  var heigntAdj = function(){
    let $bnrArea = $('#bnrCont');
    let $bnrAreatH = $bnrArea.height()+50;
    let $target = $('#itemImageSlider');
    $target.css('margin-top', $bnrAreatH);
  };
  $(document).ready(function () {
    limitedSpFx();
    heigntAdj();
  });
})(jQuery);

style.css

#bnrCont{
  position: absolute;
  top: 200px;
  left: 0px;
  overflow: hidden;
  width: 100%;
}
#bnrCont p:not(:last-of-type){
  margin-bottom: 5px;
}
#itemImageSlider{
  margin-bottom: 32px;
}

解説

HTML部分の「<p class=”limit–2018-09-14_22-00–2018-09-29_09-59″ =””>」で表示/終了時刻を設定します。
上記の場合は「2018年9月14日22時00分〜2018年9月29日9時59分」の間、バナー(要素)を表示することができます。
CSSは一例のため、設置したいサイトによって調整します。

[スマートフォン・PC共通/GOLD]トップページ・特集ページなど

ここで出来ること

・GOLDで作成したページ内のバナー(要素)を時限式(期間指定で自動表示/非表示)にする。
・PCの帯バナー(横断幕バナー)も時限式にする。

html

<!--▼帯バナー-->
<ul>
	<li class="limit--2018-09-14_22-00--2018-09-29_09-59 tateobi1" id="tate_left"><a href="[リンクURL]"></a></li>
</ul>
<!--▼通常バナー-->
<p class="limit--2018-09-14_22-00--2018-09-29_09-59">sampleText</p>

JavaScript

(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);
      if ( startDay < now && now < endDay ){
        $this.show();
      }else{
        $this.hide();
      }
    });
  };
  $(document).ready(function () {
    limitedBnrFx();
  });
})(jQuery);

CSS

#tate_left { left: 0px;  }
#tate_left a {
  display: block;
  min-height: 100%;
  width: 100px;
  visibility: visible;
  height: 10000px;
  text-indent:-9999px;
}
.tateobi1 {
  background: url([帯バナーのURL]) repeat-y scroll;
  min-height: 100%;
  height: 10000px;
  top: 0px;
  z-index:auto;
  visibility: visible;
}
#tate_left {
  position: absolute;
  width: 100px;
  min-height:100%;
  visibility: visible;
}

解説

表示時刻の設定方法は[スマートフォン/RMS]商品ページ設定と同じです。
ここでは「帯バナー(リンク付き)」と「通常バナー」の2種類の設定方法を記述していますが、バナーでなくともページ内(厳密にはbodyタグ内)のあらゆる要素を、classを指定するだけで時限式にすることができます。「帯バナー(リンク付き)」のclassには「limit–」から始まるものと「tateobi1」の2つが指定されていますが、JavaScriptの都合上必ず「limit–」をclassの先頭に記述してください(他の要素に関しても同様、複数classを指定する場合は必ず「limit–」を先頭に記述してください)。

[PC/RMS]ヘッダー・フッター・レフトナビ

・下層ページの任意の箇所にバナーを表示+時限式にする。
・帯バナー(横断幕バナー)も時限式にする。
・リンク付き帯バナーにも対応。

RMS内の記述「ヘッダー・フッター・レフトナビ」

<style>
.limitbnr{display:none;}
#tate_left { left: 0px;  }
#tate_left a {
display: block;
min-height: 100%;
width: 100px;
visibility: visible;
height: 10000px;
text-indent:-9999px;
}
.tateobi1 {
background: url([帯バナー画像URL]) repeat-y scroll;
min-height: 100%;
height: 10000px;
top: 105px;
z-index:auto;
visibility: visible;
}
#tate_left {
position: absolute;
width: 100px;
min-height:100%;
visibility: visible;
}
</style>
<!--▼帯バナー-->
<ul>
<li class="limit--2018-09-14_22-00--2018-09-29_09-59 limitbnr tateobi1" id="tate_left"><a href="[リンクURL]"></a></li>
</ul>
<!--▼通常バナー-->
<p class="limit--2018-09-14_22-00--2018-09-29_09-59 limitbnr"><a href="[リンクURL]" target="_blank"><img src="[画像URL]" alt=""></a></p>

解説

すみません。「技術を惜しみなく公開するのがモットー」などと宣言しておきながら
ここに関しては実はもうひとつ「JavaScript」に関する記述を行う必要があります。
ヒントはこちらの投稿
あとは推測してみてください(_ _)

おまけ1:リンクなし帯バナーも「期間指定」したい!(GOLD編)

html

<body class="limitObi--2018-08-14_22-00--2018-08-29_09-59">
<style>
/* リンクなしver. */
body {
	background: url([帯バナー画像URL]) left top repeat-y;
}
	body.ObiNone{
	background: none !important;
}
</style>
<script>
(function ($) {
  "use strict";
  let now = new Date();
  let limitedObiFx = function(){
    let $target = $('body[class^="limitObi--"]');
    let $className = $target[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);
    if ( startDay < now && now < endDay ){
      $target.removeClass('ObiNone');
    }else{
      $target.addClass('ObiNone');
    }
  };
  $(document).ready(function () {
    limitedObiFx();
  });
})(jQuery);
</script>
</body>

解説

リンクなしの帯バナーの多くはbodyタグのbackgroundで指定しています。
ここではそれを想定して、bodyタグに期間指定用のclassを仕込んでいます。

おまけ2:リンクなし帯バナーも「期間指定」したい!(RMS編)

PC表示時のカテゴリページや商品ページの「リンクなし帯バナー」も期間指定にすることが可能です。
ただしこちらも・・・すみません。「[PC/RMS]ヘッダー・フッター・レフトナビ」同様、推測してみてください。

さいごに

いかがでしたか?
「惜しみなく公開する」と言いながら結局はほのめかす程度に終わった記事もありましたが・・・いろんな事情があるんです。笑
コーダーのみなさん、なんでもかんでもコピペばかりだと腕がなまってしまうでしょう?
こちらのヒントを元に、あーでもないこーでもないと言いながら答えを探るのも、面白いですよ。

それでは!

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

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

乗組員的EC探査録
シェアする
コンサルロケッツステーション
タイトルとURLをコピーしました