- ベストアンサー
自動カウントダウン表示で期間限定セールを実施
- ユーザー訪問時を起点とする自動カウントダウン表示を実現したい。期間は３日程度を予定し、終了後には終了メッセージを表示。
- ワードプレスで商品販売をしており、期間限定のセールを行う予定。カウントダウンはユーザーがページを訪問した時から開始。
- カウントダウン表示により、キャンペーンの残り期間をリアルタイムで表示。セール終了後には終了メッセージを表示する。
- value100100
- お礼率78% (44/56)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
実装例を示します。 なお、Javascriptでは次のライブラリを使用しています。 - dayjs : https://github.com/iamkun/dayjs - js-cookie : https://github.com/js-cookie/js-cookie 【HTML】 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> </head> <body> <div id="display_area"></div> <script src="https://unpkg.com/dayjs"></script> <script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script> <script src="main.js"></script> </body> </html> 【main.js】 const campaign_id = "cid001" // キャンペーンID const period = 3 // 期間の日数 const output_format = "キャンペーン終了まで<br>残りD日HH時mm分ss秒" // 出力フォーマット const finish_message = "キャンペーンは終了しました。" // 期間終了後のメッセージ const display_area = document.getElementById("display_area") // 表示エリア function divmod(a, b){ /* * 商と剰余を配列で返す関数 */ q = parseInt(a / b) mod = a % b return [q, mod] } const cookie_name = 'limit_unix_' + campaign_id const limit_unix = Cookies.get(cookie_name) let limit if(limit_unix){ // すでに訪問した時 limit = dayjs(parseInt(limit_unix)) }else{ // 初回訪問の時 limit = dayjs().add(period, "day") Cookies.set(cookie_name, limit.valueOf(), { expires: 365 }) } const campaign_mainloop = setInterval(function(){ let rem_seconds = limit.diff(dayjs(), "second") if(rem_seconds > 0){ // 残り時間が正の時 let tmp_day = divmod(rem_seconds, 86400) let tmp_hour = divmod(tmp_day[1], 3600) let tmp_min = divmod(tmp_hour[1], 60) rem_time = dayjs(new Date(null, null, tmp_day[0], tmp_hour[0], tmp_min[0], tmp_min[1])) out = rem_time.format(output_format) }else{ // キャンペーン終了時 out = finish_message clearInterval(campaign_mainloop) // ループ処理止める } display_area.innerHTML = out }, 1000) ※OKWAVEの仕様上、インデントを全角スペースで表現しています。コピペの際はご注意ください。 下記で軽くJavascriptコードの解説をします。 全体の動作としては、アクセス時にキャンペーン期限を値としたCookieがなければ初回アクセスとみなしカウントダウン開始、Cookieがあれば現在時刻と比較して残り時間/期間終了を表示するものとなっています。 冒頭の5行にある各種定数により期間の日数などが変更できるようになっています。特筆すべきは「キャンペーンID」です。 運用中、キャンペーン日数を変更したくなるかもしれません。そのような場合に単純に日数だけを変更しても、すでに訪問したユーザーには終了したキャンペーンのCookie（この値は過去の日時データです）が残っているために「キャンペーンは終了しました。」と表示されています。 これを避けるためにキャンペーンIDを設けています。日数変更と同時にキャンペーンIDを変更すれば、すでに訪問したユーザーに対しても新たなキャンペーンを開始することができます。Cookieの名前にキャンペーンIDを含めることでキャンペーンごとに期限を保持しています。 output_formatにある日時の表示フォーマットを変更したい場合は https://github.com/iamkun/dayjs/blob/dev/docs/en/API-reference.md#list-of-all-available-formats が参考になるでしょう。 長くなりましたが参考になれば幸いです。
その他の回答 (1)
- Proof4
- ベストアンサー率78% (151/192)
No.1のお礼コメントに対して回答します。 詳しい状況が不明なため解決に至るか定かではないですが、ライブラリの読み込み順序とDOM要素の描画あたりに原因があるのではと推測しています。WordPressのテーマディレクトリにあるfunctions.jsで次のような読み込みをしたところうまく動作しています。 なお、No.1の回答でmain.jsとしたものをcampaign_countdown.jsにしています。 function my_enqueue_scripts() { wp_enqueue_script( 'dayjs', 'https://unpkg.com/dayjs' ); wp_enqueue_script( 'js-cookie', 'https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js' ); wp_enqueue_script( 'campaign_countdown', get_template_directory_uri() . '/assets/js/campaign_countdown.js', ['dayjs', 'js-cookie'], false, true ); } add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' ); ポイントとして、すべてのライブラリはcampaign_countdown.jsより前に読み込まれる必要があります。 また、campaign_countdown.jsではカウントダウンを表示する要素を取得するため、スクリプトが実行される前にDOMの描画が終了している必要があります。 したがって、上記プログラムでは - スクリプトをすべてbody末尾で読み込み - ライブラリをcampaign_countdown.jsより前に読み込み しています。 実装例のスクリプトはjQueryに依存せず動作するため、jQueryの関数として（jQuery(function..のように）定義する必要はありません。 それでもなお解決しない場合は、ブラウザの開発者ツールのコンソールに表示されるメッセージに解決の糸口が見えると思います。
お礼
ありがとうございました。
お礼
ご回答いただきまして たいへんありがとうございます。 早速試してみたのですが、どうもうまく表示できません。 調べてみると・・・・ ワードプレスの場合はfunctionを jQuery(function($) {・・・ にしないといけないのでしょうか？ 自分でやってみたのですが挫折しています。