【Shopify/メタフィールド】販売開始・終了日時に合わせてカートボタンを有効・無効化する

記事をまとめていたらすでに社内にある情報と一部かぶっていたので個人noteで供養させてください。

※ちなみに社内にあった情報はメタフィールドアプリを使用する方法で考え方は同じもの。

▼参考サイト

shopify liquidで販売開始時間を設定して特定の時間に販売を開始する方法 - Qiita

作業内容

メタフィールドを定義する

設定＞メタフィールド＞商品＞定義を追加する

エラーはキャプチャを撮ったタイミングの都合なのでお気になさらず、、

コードを編集する

テーマ：Dawn
作業ファイル：main-product.liquid
カートへ追加するボタンを探す（デフォルトの状態で291行目あたり）

                  <div class="product-form__buttons">
                    <button
                      type="submit"
                      name="add"
                      class="product-form__submit button button--full-width {% if block.settings.show_dynamic_checkout and product.selling_plan_groups == empty %}button--secondary{% else %}button--primary{% endif %}"
                    {% if product.selected_or_first_available_variant.available == false %}disabled{% endif %}
                    >
                        <span>
                          {%- if product.selected_or_first_available_variant.available -%}
                            {{ 'products.product.add_to_cart' | t }}
                          {%- else -%}
                            {{ 'products.product.sold_out' | t }}
                          {%- endif -%}
                        </span>
                        <div class="loading-overlay__spinner hidden">
                          <svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                            <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
                          </svg>
                        </div>
                    </button>
                    {%- if block.settings.show_dynamic_checkout -%}
                      {{ form | payment_button }}
                    {%- endif -%}
                  </div>

buttonタグの前に下記を追記する

{% assign start_time = product.metafields.my_fields.start_time | date: "%s" %}
{% assign end_time = product.metafields.my_fields.end_time | date: "%s" %}
{% assign now_time = "now" | date: "%s" %}
{% assign start_time_lag = now_time | minus: start_time %}
{% assign end_time_lag = now_time | minus: end_time %}

buttonタグに無効化するための記述をif文で追記する（元々別の条件で無効化するための記述があるので最終的にはそちらと統合する）

{%- if start_time_lag <= 0 or end_time_lag >= 0 -%}disabled{%- endif -%}

無効化しているときのテキストをif文で追記する（元々別の条件で無効化時の記述があるので最終的にはそちらと統合する）

{%- if start_time_lag <= 0 or end_time_lag >= 0 -%}
  販売期間外（ただのテキストなので任意）
{%- endif -%}

追記後のイメージ

                    <div class="product-form__buttons">
                    {% assign start_time = product.metafields.my_fields.start_time | date: "%s" %}
                    {% assign end_time = product.metafields.my_fields.end_time | date: "%s" %}  
                    {% assign now_time = "now" | date: "%s" %}
                    {% assign start_time_lag = now_time | minus: start_time %}
                    {% assign end_time_lag = now_time | minus: end_time %}
                    <button
                      type="submit"
                      name="add"
                      class="product-form__submit button button--full-width {% if block.settings.show_dynamic_checkout and product.selling_plan_groups == empty %}button--secondary{% else %}button--primary{% endif %}"
                    {%- if start_time_lag <= 0 or end_time_lag >= 0 or product.selected_or_first_available_variant.available == false -%}disabled{%- endif -%}
                    >
                        <span>
                          {%- if start_time_lag <= 0 or end_time_lag >= 0 -%}
                            販売期間外                          
                          {%- elsif product.selected_or_first_available_variant.available -%}
                            {{ 'products.product.add_to_cart' | t }}
                          {%- else -%}
                            {{ 'products.product.sold_out' | t }}
                          {%- endif -%}
                        </span>
                        <div class="loading-overlay__spinner hidden">
                          <svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                            <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
                          </svg>
                        </div>
                    </button>
                    {%- if block.settings.show_dynamic_checkout -%}
                      {{ form | payment_button }}
                    {%- endif -%}
                  </div>

商品データで販売開始/終了日時を設定する

商品データ編集画面の最下部にメタフィールドの項目が表示されるようになるので日時を指定

⚠️注意⚠️

今日見てたら設定できるっぽい・・・！

設定時の30分後間隔以降でないと指定できません。
例）設定時が11/26 12:33の場合に11/26 12:45を指定したくても最短設定可能日時は11/26 13:00

直接入力も可能ではあるものの、設定時の30分以内を直接入力しようとすると12時間後（11時なら23時）という扱いになってしまいます。

ぜひご活用ください！！
※いつもながらもう少しスマートな書き方などもありましたらぜひ教えて下さい！