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

この記事でできるようになること

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

はじめに

Themeの詳しい話には触れません。

以下のアプローチで非表示を制御します

• theme 編集画面では適当にフォーマットされている日時を入力する
• section側では↑の文字列をパースして秒に換算し、それを現在時刻と比較して表示/非表示を制御する

表示期限入力フォームを作る

sections/配下の非表示対応をしたいファイルのschemaへ
以下の設定を追加しましょう(schema.settingsに以下のobjectを足す)

本当はカレンダーみたいなのがあると嬉しいのですが、
そういうtypeが今現在はなさそうなので文字列で設定するようにします。
設定可能なtypeについての公式ページ → https://shopify.dev/docs/themes/settings

{
  "type": "text",
  "id": "display_limit_time",
  "label": "表示期限 YYYY/MM/DD HH:MM",
  "default": "2040/01/01 01:00"
}

これで↓のフォームがテーマカスタマイズ時に表示されるようになります。

sectionの表示非表示を制御する

sectionに追加したobjectのidをdisplay__limit_timeにしたので、
section.settings.display_limit_time という形でliquid上で値を参照できます。

To get the current time, pass the special word "now" (or "today") to date:

と書いてあり、現在時刻はnowと使えば取れそうなのでこれを設定した日付と比較し、表示フラグ変数を作ります。

{% assign current_time = 'now' | date: '%s' %}
{% assign setting_limit_time = section.settings.display_limit_time | date: '%s' %}

{% assign displayable = true %}
{% if current_time > setting_limit_time %}
  {% assign displayable = false %}
{% endif %}

これで、section上でdisplayableの値を見れば、
設定した時間を過ぎているかどうかが確認可能です。

適当に

{% if displayable %}
... sectionのHTMLの全体
{% endif %}

と囲んであげれば無事目的達成です。

おわり