# 【メタフィールドを活用】発売日時設定について

**URL:** <https://community.shopify.com/t/topic/187231>\
**Category:** 技術的なQ＆A\
**Tags:** css\
**Created:** [January 28, 2023, 8:12am UTC](https://community.shopify.com/t/topic/187231 "2023-01-28T08:12:09Z")\
**Posts on this page:** 6\
**Page:** 1

## AI-generated summary

Shopifyの**Dawnテーマ**で商品詳細ページに**発売日時設定機能**（例：1/10 21:00～1/15 23:59）を実装する方法についての質問と解決。

**提案された解決策：**
- アプリ不要で、**メタフィールド機能**（日付と時刻）を活用して実装可能
- フルバランス園畑氏がnote記事を参考資料として提供

**改善版の実装：**
- キュー小坂氏が元のコードの懸念点を指摘：
  1. バリエーション切り替え時にカートボタンが有効化される問題
  2. メタフィールド未設定商品が「販売期間外」扱いになる問題
- 調整版コードを提供（`custom.saleStartDate`と`custom.saleEndDate`のメタフィールドを使用）
- 質問者は無事に実装完了し、テスト確認済み

**追加の課題：**
- 別ユーザー（mkmkolinksmkmk）が同じコードを`buy-buttons.liquid`スニペットに適用したが、バリエーションやカラー展開のある商品で在庫があっても「Sold out」表示になる問題が発生し、解決方法を求めている（**未解決**）

<div class="post-metadata">

**Author:** ![setens-online](https://avatars.discourse-cdn.com/v4/letter/s/c2a13f/32.png) [@setens-online](https://community.shopify.com/u/setens-online)\
**Post date:** [January 28, 2023, 8:12am UTC](https://community.shopify.com/t/topic/187231/1 "2023-01-28T08:12:09Z")

</div>

こんにちは。shopifyを初めて利用してショップ構築をしております。

使用テーマはDawnです。  
商品詳細ページでの「発売日時設定」についてご存じの方がいらっしゃいましたらご教示いただきたく存じます。

例）1/10(火)21：00～1/15(日)23：59  
このように発売日時設定を商品詳細ページに設定したい場合、どのように設定すれば良いでしょうか？

「メタフィールド」機能の「日付と時刻」をうまく活用できないか？と思うのですが、  
うまく実装できておらず、調べてもわからないことが多く困っております。  
（運用費の都合で、できればアプリ導入ではない方法があれば…と思っております。）

ご存じの方がいらっしゃいましたら、ぜひともご教示いただけますと幸いです。  
よろしくお願いいたします。

---

<div class="post-metadata">

**Author:** ![Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/anonymous_44fbe07fc59d9ccaacd70575fd5a5155/32/194200_2.png) [@Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://community.shopify.com/u/Anonymous_44fbe07fc59d9ccaacd70575fd5a5155)\
**Post date:** [January 30, 2023, 8:54am UTC](https://community.shopify.com/t/topic/187231/2 "2023-01-30T08:54:13Z")

</div>

Setens-Online様

はじめまして、フルバランスの園畑です。  
ご質問を確認いたしました。

「販売開始・終了日時に合わせてカートボタンを有効・無効化する機能」を実装したい、という認識であっておりますでしょうか？

上記でしたら、アプリを使用せず、メタフィールドの活用で実装可能です。

Dawnでの実装例が以下サイトに掲載されていますので、是非ご参考にしてみてください。

[https://note.com/k4n/n/n901b69fa3f77](https://note.com/k4n/n/n901b69fa3f77)

ご参考になりましたでしょうか。

私たちの励みにもなりますので、 お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。

分からない点があれば、またいつでもご連絡ください。

フルバランス 園畑

---

<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 31, 2023, 4:34am UTC](https://community.shopify.com/t/topic/187231/3 "2023-01-31T04:34:03Z")

</div>

@setens-online

フルバランスさんと同様に、

質問者様は「販売開始・終了日時に合わせてカートボタンを有効・無効化する機能」を実装したい、とお考えであるという前提で回答いたします。

フルバランスさんが参考として記載されているnoteに掲載のソースを確認したところ、次の2点の懸念がありました。

1. バリエーションがある商品の場合、バリエーションを切り替えた時に、販売期間外だったとしても、カート投入ボタンが有効になってしまう。
2. 販売期間設定用のメタフィールドを設定していない商品は、「販売期間外」となってしまう。※こちらはその仕様が望ましいようであれば問題ないですが、メタフィールドに何も設定されていなければ、その商品は通常販売としたいことが多いと思い懸念点としました。

そのため、下記に調整版のコードを記載させていただきます。

初めに販売開始と販売終了のメタフィールドを作成してください。

今回のサンプルでは、販売開始のネームスペースとキーを「custom.saleStartDate」、販売終了のネームスペースとキーを「custom.saleEndDate」で作成します。

その後、コードを埋め込むため、管理画面より「オンラインストア \> テーマ \> カスタマイズボタンの横にある「…」 \> コードを編集」からコード編集画面を開きます。

コード編集画面から、セクション(Sections)の「main-product.liquid」を選択します。main-product.liquidの609行目当たりにあります、初期コードの下記部分を

```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:** ![setens-online](https://avatars.discourse-cdn.com/v4/letter/s/c2a13f/32.png) [@setens-online](https://community.shopify.com/u/setens-online)\
**Post date:** [January 31, 2023, 2:39pm UTC](https://community.shopify.com/t/topic/187231/4 "2023-01-31T14:39:30Z")

</div>

フルバランス 園畑様

お世話になります。お忙しい中、ご返信くださりありがとうございます。

「販売開始・終了日時に合わせてカートボタンを有効・無効化する機能」を実装したいという認識で問題ございません。参考記事をご紹介くださりありがとうございました。

また何かありましたらご相談させていただくこともあるかと思います。

その際はよろしくお願いいたします。この度はありがとうございました。

---

<div class="post-metadata">

**Author:** ![setens-online](https://avatars.discourse-cdn.com/v4/letter/s/c2a13f/32.png) [@setens-online](https://community.shopify.com/u/setens-online)\
**Post date:** [January 31, 2023, 2:44pm UTC](https://community.shopify.com/t/topic/187231/5 "2023-01-31T14:44:38Z")

</div>

キュー小坂様

お世話になります。お忙しい中ご返信くださりありがとうございます。

懸念点まで考慮していただき、詳細をご丁寧に教えていただき誠にありがとうございます。

ご案内いただいた内容で無事に実装できました！テスト商品でも日時設定をして確認済で問題なさそうです。ファイル名やコードまで、ご丁寧なご案内、感謝いたします。

また何かありましたらご相談させていただくこともあるかと思います。

その際はよろしくお願いいたします。

この度は大変ありがとうございました。ベストアンサーにさせていただきました^ ^

---

<div class="post-metadata">

**Author:** ![mkmkolinksmkmk](https://avatars.discourse-cdn.com/v4/letter/m/a5b964/32.png) [@mkmkolinksmkmk](https://community.shopify.com/u/mkmkolinksmkmk)\
**Post date:** [September 20, 2023, 6:42am UTC](https://community.shopify.com/t/topic/187231/6 "2023-09-20T06:42:46Z")

</div>

キュー小坂様

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

こちらの内容でコードの書き換えを致しました。

ただバージョンアップされており、こちらのコードの部分がスぺニットのbuy-buttons.liquidにあることまで分かりました。

そのコードを提示頂いたコードに切り替え、テストをしてみたのですが、サイズやカラー展開がある際、選択をしたら在庫があるにも関わらずSold out表記になり、また更新をかけたらまた在庫が上がる、選択したらSold outになる感じになってしまいます。

こちらの解決方法はございますか？

お忙しい所すみませんが、ご教授頂けますと幸いです。

宜しくお願い致します。
