[Shopify]メタフィールド使って商品一覧にタイムセールのタイマーを設置(Dawn)54/100
こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。
コレクションのメタフィールドを使って、タイムセールのタイマーを設置できるセクションを作ってみました♪
今回は各コレクション毎に設定するバージョンなので、複数コレクションがあれば全ページに個別に期間を設定していく必要があります。
全ページ固定バージョンはまた次回作ってみようかな。
✔️今回のゴール
✔️CMSの特徴
✔️設置手順
Step1 メタフィールドの設定
設定>メタフィールド>コレクション
Step2 コード編集からセクション追加
下記のサンプルコードを貼り付け。
サンプルではレイアウトはカスタマイズしていません。タイマーのところのみのコードになります。
◆サンプル
{% if collection.metafields.offer.ends != blank %}
<div id="offer-{{ section.id }}" class="timesale__contents" style="text-align-last: center; padding: 2px;">
<strong id="timer"></strong>
</div>
{% endif %}
<script>
var countDownDate = new Date("{{ collection.metafields.offer.ends }}").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("timer").innerHTML = days + "日 " + hours + ":" + minutes + ":" + seconds;
if (distance < 0) {
clearInterval(x);
document.getElementById("offer-{{ section.id }}").style.display = "none";
} else {
document.getElementById("offer-{{ section.id }}").style.display = "block";
}
}, 1000);
</script>
{% schema %}
{
"name": "タイムセール",
"class": "section",
"presets": [
{
"name": "タイムセール"
}
]
}
{% endschema %}
Step3 コレクション設定画面のメタフィールドで日時設定
Step4 CMSからタイムセールのセクション追加
①管理画面>テーマ>カスタマイズ(緑)>コレクションのテンプレートを選択
②セクション追加>タイムセール選択
お好みの位置にドラッグ&ドロップで設置してください。
タイマーがうまく動いていたら完成です!
あとはお好みでデザイン調整してみてください^^
✔️コピペで使えるフルコードはこちら
このレイアウトでよければセクションのフルコード記載しておきます。
ここから先は
2,413字
この記事が気に入ったらサポートをしてみませんか?