3. キャンペーン終了日時をカウントダウンするjQueryプラグイン

キャンペーン終了日時をカウントダウンするjQueryプラグイン

posted:   updated: 2016-7-4 0 Comment

スポンサーリンク

キャンペーン終了日までのカウントダウン、あると良くないですか？

カウントダウンのカレンダー

簡単に使える、カスタマイザブルなカウントダウンjQueryプラグインを見つけたので、早速Welcartに使ってみました。

jQueryカウントダウンタイマー【デザイン自由自在版】－ 株式会社ワイワイエンジン

このプラグインは、endDateTime: '2020/07/24 00:00:00'というようにカウントダウンの終了日時をスクリプトで指定するだけで、現在の時間からの残りの時間を自動でカウントダウンしてくれるものです。

国産なので日本語説明が有難く、ファイルサイズも3.28Kbと、非常に軽い。

今回は、これを使ってWelcartのキャンペーン（セールやポイントアップ）の終了日時をカウントダウンさせるアレンジを行います。

もくじ

  1. プラグインのダウンロード
  2. 使用中のテーマにプラグインをセット
  3. カウントダウンを表示させる手順
    1. jQuery本体とプラグインの読み込み
    2. フッターに実行スクリプトを書く
    3. カウントダウンを表示させる場所にdivを置く
  4. カウントダウン表示をカスタマイズ
  5. まとめ

1. プラグインのダウンロード

まずは、先ほどのYYengineさんのページにある「ファイルダウンロード」リンクからGitHubに行き、ZIPファイルをダウンロードします。

カウントダウンjQueryプラグイン・ダウンロード

ZIPフォルダを解凍すると、いくつかのファイルが入っています。そのうち今回使うのは以下の2つです。

  • jquery.yycountdown.js：プラグイン本体
  • jquery.yycountdown.css：スタイルシート

カウントダウンjQueryプラグイン 次の手順でテーマ内にセットします。

2. 使用中のテーマにプラグインをセット

ダウンロードした(1)jquery.yycountdown.jsと(2)jquery.yycountdown.cssを、使用中テーマ内に設置します。設置場所は自由ですが、次の手順でファイルを読み込むので場所は忘れないようにします。

今回はテーマ内のjsフォルダに(1)jquery.yycountdown.jsを、cssフォルダに(2)jquery.yycountdown.cssを設置しました。

カウントダウンjQueryプラグインをテーマに導入

※.cssの設置は必須ではありませんが、後でスタイルを変更したい場合に便利なので設置しています。もちろん、テーマ内のstyle.cssなどにスタイルを書き込んでも問題ありません。

3. カウントダウンを表示させる手順

3-1. プラグインの読み込み

ファイルの設置が完了したら、それらのファイルをfunctions.phpで読み込みます。

WordPress利用者であれば既にjQuery本体は読み込んでいるはずですので、jQuery本体の後ろにプラグインの読み込みコードを書きましょう。

function my_scripts(){
    wp_enqueue_script( 'jquery' ); //jQuery本体（例）
    //～それぞれのスクリプトやスタイル：略～
    wp_enqueue_style( 'yycountdown_style', get_template_directory_uri() .'/css/jquery.yycountdown.css');
    wp_enqueue_script( 'yycountdown', get_template_directory_uri() . '/js/jquery.yycountdown.js', array(), '', true);
}
add_action( 'wp_enqueue_scripts', 'my_scripts');

ここではwp_enqueue_scriptとwp_enqueue_styleを使ってファイル場所を指定しています。

その上で、wp_enqueue_scriptsのアクションフックで読み込みを実行しています。こうすることで、wp_foot（またはwp_head）がまとめてスクリプトを読み込むようにしてくれます。

わからない場合はプラグインのGitHubページのusage（使い方）にあるように、普通に<head>内または</body>直前にHTMLの書き方で読み込んでもとりあえずはいいでしょう。

<link rel="stylesheet" href="css/jquery.yycountdown.css">
<script type="text/javascript" src="js/jquery.yycountdown.js"></script>

この場合も、プラグインは必ずjQuery本体より後にファイルを読み込むようにします。

3-2. フッターに実行スクリプトを書く

プラグインの設置が完了したら、プラグインを動かす為のスクリプトを書きます。

スクリプトにはWelcartのキャンペーン終了日時を取得するPHPを書き込みたいため、ここはwp_enqueue_scriptは使わずに、直接footer.phpなどに書き込みます。

3-1の手順で、プラグインをwp_footで読み込むように指定（wp_enqueue_scriptの最後のパラメータをtrue）しているため、今回はフッターのwp_footより後にスクリプトを書きます。

3-2-1. キャンペーン終了日時の取得

Welcartのキャンペーンの日時は、$usces->options['campaign_schedule']で取得出来ます。

取得出来る日時は、年・月・日・時・分は、array配列によってそれぞれが別々に格納されているため、2014/10/1 10:00:00という形に簡単に作り変えられるように、一つ一つを新たな変数に置き換えておきます。

<?php
global $usces;
$y = $usces->options['campaign_schedule']['end']['year'];
$m = $usces->options['campaign_schedule']['end']['month'];
$d = $usces->options['campaign_schedule']['end']['day'];
$h = $usces->options['campaign_schedule']['end']['hour'];
$mn = $usces->options['campaign_schedule']['end']['min'];
?>

これを、次に記述する実行スクリプトの中に代入させます。

3-2-2. 実行スクリプト

キャンペーン日時を取得したら、続けて以下の実行スクリプトを記述します。

<script>
jQuery(function($) {
    $('#timer').yycountdown({
        endDateTime : '<?php echo "{$y}/{$m}/{$d} {$h}:{$mn}:00" ; ?>',
    });
});
</script>

12行目で、先ほど取得したキャンペーン終了日時をechoで出力させています（キャンペーン設定に秒数はないので、0で直接書き込み）。

例えば、キャンペーン終了日時が「2014年12月1日 9時30分」なら、ブラウザ上では以下のように出力されます。

<script>
jQuery(function($) {
    $('#timer').yycountdown({
        endDateTime : '2014/12/1 9:30:00',
    });
});
</script>

3-3. カウントダウンを表示させる場所にdivを置く

最後に、カウントダウンを表示させたい場所に、<div id=”timer”></div>を置きます。

<div id="timer"></div>

これで完了です。うまくカウントダウンが表示されているか確認してみて下さい。

カウントダウンjQueryプラグイン・デフォルト

これはキャプチャなので動きません。

キャンペーン終了までのカウントダウンであることを表示させるなら、

キャンペーン終了まであと：<div id="timer"></div>

と書いてもいいですね。

4. カウントダウン表示をカスタマイズ

4-1. 日本語表記にする

カウントダウンjQueryプラグイン・日本語化

標準では英語表記なので、日本語表記にする場合はunitパラメータを追加します。

<script>
jQuery(function($) {
    $('#timer').yycountdown({
        endDateTime : '<?php echo "{$y}/{$m}/{$d} {$h}:{$mn}:00" ; ?>',
        unit : {d: '日', h: '時間', m: '分', s: '秒'},
    });
});
</script>

4-2. キャンペーンの開始日時を指定する

3-2-1.の手順でキャンペーンの終了日時を取得した方法と同様に、キャンペーン開始日時も取得出来ます。開始日時・終了日時の両方を取得する場合は、代入する変数がかぶらないようにご注意下さい。

<?php
global $usces;
//キャンペーン開始日時を取得
$st_y = $usces->options['campaign_schedule']['start']['year'];
$st_m = $usces->options['campaign_schedule']['start']['month'];
$st_d = $usces->options['campaign_schedule']['start']['day'];
$st_h = $usces->options['campaign_schedule']['start']['hour'];
$st_mn = $usces->options['campaign_schedule']['start']['min'];
//キャンペーン終了日時を取得
$ed_y = $usces->options['campaign_schedule']['end']['year'];
$ed_m = $usces->options['campaign_schedule']['end']['month'];
$ed_d = $usces->options['campaign_schedule']['end']['day'];
$ed_h = $usces->options['campaign_schedule']['end']['hour'];
$ed_mn = $usces->options['campaign_schedule']['end']['min'];
?>
<script>
jQuery(function($) {
    $('#timer').yycountdown({
	startDateTime : '<?php echo "{$st_y}/{$st_m}/{$st_d} {$st_h}:{$st_mn}:00" ; ?>',
	endDateTime   : '<?php echo "{$ed_y}/{$ed_m}/{$ed_d} {$ed_h}:{$ed_mn}:00" ; ?>',
    });
});
</script>

4-3. カウントダウンを行わない時の表示を指定する

キャンペーン開始前や終了後の動作を、パラメータ＋jQueryで指定することも出来ます。

<script>
jQuery(function($) {
    $('#timer').yycountdown({
	startDateTime : '<?php echo "{$st_y}/{$st_m}/{$st_d} {$st_h}:{$st_mn}:00" ; ?>',
	endDateTime   : '<?php echo "{$ed_y}/{$ed_m}/{$ed_d} {$ed_h}:{$ed_mn}:00" ; ?>',
        complete : function(_this){
            _this.find('.yycountdown-box').text('キャンペーンは現在行われていません');
        }
    });
});
</script>

4-4. キャンペーン期間以外には表示させない

または、Welcartのキャンペーン中かどうかを判定する分岐を使って、キャンペーン中にのみカウントダウンを表示させたりしてもいいと思います。

<?php
    $options=get_option('usces');
    if('Promotionsale'==$options['display_mode']):
?>
    只今キャンペーン中！終了まであと：<div id="timer"></div>
<?php endif; ?>

5. まとめ

使ってみた人ならわかる、この「めちゃめちゃ使える」感。これで、表示としては楽天セールのカウントダウン表示にも負けません。

販促に使える上に軽量なので、コードの書き込みさえわかればWelcartにもかなり使えるプラグインです。

コメントは受け付けていません。

Copyright© 2024 Welcart カスタマイズ ブログ All Rights Reserved.