タイマーのJSを探す
本チュートリアルでは「Countdown Timer js」で検索して、一番上に出てきたJSを使用します。
How TO – JavaScript Countdown Timer
使い勝手の良さそうなJSがありましたら、そちらを使っていただいてこの記事を参考にカスタマイズしていただければと思います。
セクションファイルを作成
テーマのコード編集画面を開き、「新しいsectionを追加する」で「countdown-timer.liquid」を作成してください。
先程ダウンロードしたJSのコードを使って、以下の様に編集します。
<style>
.countdown-timer {
text-align: center;
margin-bottom: 2em;
}
.countdown-timer #timer {
font-size: 2em;
font-weight: 700;
}
</style>
{%- liquid
assign cdt_title = section.settings.cdt_title
assign cdt_year = section.settings.cdt_year | append: '-'
assign cdt_month = section.settings.cdt_month | append: '-'
assign cdt_day = section.settings.cdt_day
assign cdt_hour = section.settings.cdt_hour | append: ':'
assign cdt_min = section.settings.cdt_min
assign cdt_message = section.settings.cdt_message
assign set_date = cdt_year | append: cdt_month | append: cdt_day
assign set_time = cdt_hour | append: cdt_min | prepend: ' '
assign date_time = set_date | append: set_time
-%}
<div class="countdown-timer">
{% if cdt_title != blank %}<h2 class="timer_title">{{ cdt_title }}</h2>{% endif %}
<p id="timer"></p>
</div>
<script>
var countDownDate = new Date("{{ date_time }}").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;
var d = Math.floor(distance / (1000 * 60 * 60 * 24));
var h = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var m = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var s = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("timer").innerHTML = d + "日" + h + "時間" + m + "分" + s + "秒";
if (distance < 0) {
clearInterval(x);
document.getElementById("timer").innerHTML = "{{ cdt_message }}";
}
}, 1000);
</script>
{% schema %}
{
"name": "カウントダウンタイマー",
"settings": [
{
"type": "header",
"content": "Countdown timer"
},
{
"type": "text",
"id": "cdt_title",
"label": "タイトル",
"default": "タイムセール終了まで残り"
},
{
"type": "number",
"id": "cdt_year",
"label": "年",
"default": 2022
},
{
"type": "range",
"id": "cdt_month",
"label": "月",
"min": 1,
"max": 12,
"step": 1,
"unit": "月",
"default": 1
},
{
"type": "range",
"id": "cdt_day",
"label": "日",
"min": 1,
"max": 31,
"step": 1,
"unit": "日",
"default": 1
},
{
"type": "range",
"id": "cdt_hour",
"label": "時",
"min": 0,
"max": 23,
"step": 1,
"unit": "時",
"default": 0
},
{
"type": "range",
"id": "cdt_min",
"label": "分",
"min": 0,
"max": 59,
"step": 1,
"unit": "分",
"default": 0
},
{
"type": "text",
"id": "cdt_message",
"label": "終了時のテキスト",
"default": "セールは終了しました"
}
]
}
{% endschema %}上から順に説明します。
1〜10行目はカウントダウンタイマーのスタイルシートを出力します。
サムネイルのようなシンプルデザインですので、お好みに合わせてカスタマイズしてください。
12〜23行目はカウントダウンの終了日時を「YYYY-MM-DD HH:MM」形式にフォーマットするliquidコードです。
他に「タイトル」や「終了時のテキスト」もassignで簡略化しています。
25〜28行目はカウントダウンタイマーを出力するHTMLコードです。
ダウンロードしたのサンプルは<p>タグのみでしたが、<div>タグで囲んでタイトルを出力できるようにしました。
また、タイトルが空欄なら表示されないようになっております。
31行目はカウントダウン終了日を設定する箇所で、動的に設定できるようliquidコードで{{ date_time }}とします。
39行目はカウントダウンタイマーの出力フォーマットです。
海外向けのスクリプトだったので、日本向けに編集しました。
42行目は、終了日を過ぎた後に表示されるメッセージで、こちらも動的に設定できるようliquidコードで{{ cdt_message }}としております。
47行目以降はセクション設定です。
カスタマイザーにて「タイトル」「終了日時」「終了時のテキスト」が動的に編集できるようにしています。
テンプレートファイルを作成
templatesにある「collection.json」を複製し「collection.timesale.json」を作成。以下のように編集します。
{
"sections": {
"banner": {
"type": "main-collection-banner",
"settings": {
"show_collection_description": true,
"show_collection_image": false,
"color_scheme": "background-1"
}
},
"countdown-timer": {
"type": "countdown-timer",
"settings": {}
},
"product-grid": {
"type": "main-collection-product-grid",
"settings": {
"products_per_page": 16,
"columns_desktop": 4,
"image_ratio": "adapt",
"show_secondary_image": false,
"show_vendor": false,
"show_rating": false,
"enable_filtering": true,
"enable_sorting": true,
"columns_mobile": "2",
"padding_top": 36,
"padding_bottom": 36
}
}
},
"order": [
"banner",
"countdown-timer",
"product-grid"
]
}デフォルトテーマ「Dawn」のテンプレートファイルをベースにご説明します。
11〜14行目に先程作成したセクションファイルを反映させます。
settingsの部分は後からカスタマイザーで入力すれば反映されますので、とりあえず空欄でもOKです。
そして34行目にて先程のセクションファイルをセットします。
コレクションを作成
商品管理のコレクションより、新規コレクションを作成します。
タイトルを入力
今回はタイトルを「TIME SALE」としますがお好みで入力してください。
テンプレートを選択
右下にある「テーマテンプレート」のプルダウンを、先程作成した「timesale」テンプレートにします。
商品を登録
タイムセール対象品を手動で設定してください。
または自動化するなら、「割引前価格は空ではありません」に条件設定したり、対象商品に「SALE」等タグ付けして条件設定したりすれば、商品ページと連動して動的に制御可能です。
以上、あとはお好みで「説明」や「コレクションの画像」「ハンドル」などを設定してください。
セール終了日を設定
「オンラインストア→テーマ→現在のテーマ」の「カスタマイズ」ボタンより、テーマカスタマイザーへ移動してください。
画面上部のプルダウンメニューを「コレクション」にし、プレビュー画面より先程作成したコレクション「TIME SALE」ページへ移動します。
「カウントダウンタイマー」セクションを選択し、タイトルや終了日時を設定して下さい。
そして右上の「保存する」で設定完了。プレビュー画面がリロードされカウントダウンが始まります。
