# メタフィールドを使用して販売期間設定を実装したい

**URL:** <https://community.shopify.com/t/topic/390931>\
**Category:** 技術的なQ＆A\
**Tags:** css, html\
**Created:** [January 30, 2025, 1:29am UTC](https://community.shopify.com/t/topic/390931 "2025-01-30T01:29:31Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

**課題:**
メタフィールドを使用して商品の販売期間（開始日時・終了日時）を設定し、期間外は購入不可にする機能を実装したい。参考にしたQ&Aのコードが、使用中のDAWNテーマのmain-product.liquidに見つからず困っていた。

**解決策:**
- DAWN 15.2.0では、購入ボタンのコードは**buy-buttons.liquid**（73～95行目）に記載されている
- 提供されたコード例では、メタフィールド（`saleStartDate`、`saleEndDate`）と現在時刻を比較
- 販売期間に応じて以下を表示:
  - 販売開始前: 「Coming Soon」
  - 販売中: 「カートに追加する」
  - 販売終了後: 「販売期間外」

**結果:**
提供されたコードで販売期間設定の実装に成功。質問者は解決を報告し、スレッドは完了。

*注: アプリは使用せず、コードカスタマイズで対応*

<div class="post-metadata">

**Author:** ![Panda2](https://avatars.discourse-cdn.com/v4/letter/p/85f322/32.png) [@Panda2](https://community.shopify.com/u/Panda2)\
**Post date:** [January 30, 2025, 1:29am UTC](https://community.shopify.com/t/topic/390931/1 "2025-01-30T01:29:31Z")

</div>

お世話になっております。

メタフィールドを使用して販売開始日時になると購入可能に、販売終了日時になると売り切れ、という仕様を実装したいと考えています。

こちらの[URL先のQ＆A](https://community.shopify.com/post/1922049)を参考に設定しようとしましたが、カートに追加する動作に作用する該当の初期コードがmain-product.liquidで見つからず、設定ができかねている状態です。

初期コード▼

```auto
<button
  type="submit"
  name="add"
  class="product-form__submit button button--full-width {% if block.settings.show_dynamic_checkout %}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>

```

テーマはDAWNを使用しております。  
ご存知の方がおられましたらご教示いただけますと幸いです。

※アプリの利用は考えておりません。

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [January 30, 2025, 2:55am UTC](https://community.shopify.com/t/topic/390931/2 "2025-01-30T02:55:35Z")

</div>

@Panda2 様

ご記載いただいているコードは2025.1現在のDAWN最新バージョン 15.2.0では記載場所とコードが若干異なっております。

DWAN 15.2.0では購入ボタンは、buy-buttons.liquidの中に記載されております。  
デフォルトの状態ですと、73行目から95行目までの下記コードが対象箇所となります。

```markup

```

下記コードに変更いただけましたら、販売開始前は「Coming Soon」販売中は「カートに追加する」、販売終了後は「販売期間外」と表示されるかと思われます。

修正コードでは実際に動作検証を行なっておりませんので、ご利用の際は動作検証を行なった上ご利用ください。

```markup
{%- assign saleStartDate = product.metafields.custom.saleStartDate | date: "%s" -%}
{%- assign saleEndDate = product.metafields.custom.saleEndDate | date: "%s" -%}
{%- assign saleStartDateValue = product.metafields.custom.saleStartDate.value -%}
{%- assign saleEndDateValue = product.metafields.custom.saleEndDate.value -%}
{%- assign nowTime = "now" | date: "%s" -%}
{%- assign startTimeLag = nowTime | minus: saleStartDate -%}
{%- assign endTimeLag = nowTime | minus: saleEndDate -%}
{%- assign stringNameAdd = '' -%}
{%- assign stringBuy = '' -%}
{%- if saleStartDateValue == null and saleEndDateValue == null -%}
  {%- assign stringNameAdd = 'name="add"' -%}
  {%- assign stringBuy = 'buy' -%}
{%- elsif startTimeLag >= 0 and saleEndDateValue == null -%}
  {%- assign stringNameAdd = 'name="add"' -%}
  {%- assign stringBuy = 'buy' -%}
{%- elsif saleStartDateValue == null and endTimeLag <= 0 -%}
  {%- assign stringNameAdd = 'name="add"' -%}
  {%- assign stringBuy = 'buy' -%}
{%- elsif startTimeLag >= 0 and endTimeLag <= 0 -%}
  {%- assign stringNameAdd = 'name="add"' -%}
  {%- assign stringBuy = 'buy' -%}
{%- endif -%}

```

ご参考まで。

（キュー小坂）

---

<div class="post-metadata">

**Author:** ![Panda2](https://avatars.discourse-cdn.com/v4/letter/p/85f322/32.png) [@Panda2](https://community.shopify.com/u/Panda2)\
**Post date:** [January 30, 2025, 4:17am UTC](https://community.shopify.com/t/topic/390931/3 "2025-01-30T04:17:47Z")

</div>

株式会社Q (キュー)様

ご丁寧にありがとうございます。

ご教示いただいた内容で販売期間設定を実装することができました！ありがとうございました?‍