Shopifyのテンプレート「liquid」で、商品販売期間を設定するために表示有効期限を設ける方法

投稿日 2022年3月16日
著者 mako110
カテゴリー WEBのこと

最近Shopiryをいじってます。
どこかでなんとなく「Shopifyが良い」という話を聞きつけて
「うちもShopifyでネットショップを開きたい」という方が増えていますね。

個人的にはカスタマイズできる範囲も広くて面白くいじれるのですが
・カートまわりのカスタマイズは上位プランじゃないとできない
・配送日指定が出来ない（対応する場合は有料のアプリが必要）
など、何も知らないクライアントには先に伝えておかないと
後から揉めそうな部分がいくつかあるので、提案時には気を遣います。。

さて、掲題なのですが、クライアントからある商品を
「〇月〇日の〇時から販売を開始したい」
といったご要望を受けまして、ちょっと調べたところ

【Shopify】予定時刻に販売可能にする機能 / カミングスーン | オカログ

ストアに商品は表示させながらも、ある日時になるまで販売をさせないようにしたいけどどうすればいいんだろう。本記事では、上記のような悩みを解決致します。 Shopifyで…

okalog.info

とか

Shopify sectionに表示有効期限をつける – Qiita

この記事でできるようになることShopifyのTopページを構成するセクションへ管理画面のテーマのカスタマイズから表示有効期限を設定し、期限が切れたら非表示にするよ…

qiita.com

といった記事を参考にすれば対応できそうなので
「良いですよ～！対応しておきます！」
と軽く返事をしたのですが、これが災いのもとでした。。
上記の記事をもとに

{% assign today_date = 'now' |  date: "%Y-%m-%d %H:%M" %}
{% assign reservation_date = "2022-03-16 17:00" %}
{% assign reservation_text = "" %}

{% if reservation_date > today_date %}
2022年3月16日17:00～ 販売開始！
{% else %}
//カート領域
{% endif %}

{% assign today_date = 'now' | date: "%Y-%m-%d %H:%M" %}

{% assign reservation_date = "2022-03-16 17:00" %}

{% assign reservation_text = "" %}

{% if reservation_date > today_date %}

2022年3月16日17:00～販売開始！

{% else %}

//カート領域

{% endif %}

って感じで実装してみたところ、指定した時間になってもカートが表示されない。。
よくよく調べてみたところ、

{% assign today_date = 'now' |  date: "%Y-%m-%d %H:%M" %}

1	{% assign today_date = 'now' \| date: "%Y-%m-%d %H:%M" %}

このコードが原因で、これだと
「テンプレートが編集された日時」を取得するのみで
「ユーザーがアクセスした日時」を取得するわけでは無いようです。

ではliquidで「ユーザーがアクセスした日時」を取得する方法があるか調べてみたのですが。。

分かりませんでした泣

さて、どうしたものかと思ったのですが、
ふと「jQueryで出来んじゃね？」と思いつき、調べてみたところありました。

jQueryだと、現在の日時も簡単に取得できますね。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script>
 $(document).ready(function() {
  $(".view_timer").each(function(index, target) {
    var startDate = $(this).attr("data-start-date");
    var endDate = $(this).attr("data-end-date");
    var nowDate = new Date();
    if (startDate) {
      startDate = new Date(startDate);
    } else {
      startDate = nowDate;
    }
    if (endDate) {
      endDate = new Date(endDate);
    }

    if (startDate <= nowDate && (!endDate || nowDate <= endDate)) {
      $(this).show();
    } else {
      $(this).hide();
    }
  });
});
</script>

<div class="view_timer" data-end-date="2022/3/16 17:00">
2022年3月16日17:00～ 販売開始！
</div>

<div class="view_timer" data-start-date="2022/03/16 17:00">
//カート領域
</div>