ShopifyのDawnテーマで商品詳細ページに発売日時設定機能（例：1/10 21:00～1/15 23:59）を実装する方法についての質問と解決。
提案された解決策：
改善版の実装：
custom.saleStartDateとcustom.saleEndDateのメタフィールドを使用）追加の課題：
buy-buttons.liquidスニペットに適用したが、バリエーションやカラー展開のある商品で在庫があっても「Sold out」表示になる問題が発生し、解決方法を求めている（未解決）こんにちは。shopifyを初めて利用してショップ構築をしております。
使用テーマはDawnです。
商品詳細ページでの「発売日時設定」についてご存じの方がいらっしゃいましたらご教示いただきたく存じます。
例）1/10(火)21：00～1/15(日)23：59
このように発売日時設定を商品詳細ページに設定したい場合、どのように設定すれば良いでしょうか？
「メタフィールド」機能の「日付と時刻」をうまく活用できないか？と思うのですが、
うまく実装できておらず、調べてもわからないことが多く困っております。
（運用費の都合で、できればアプリ導入ではない方法があれば…と思っております。）
ご存じの方がいらっしゃいましたら、ぜひともご教示いただけますと幸いです。
よろしくお願いいたします。
Setens-Online様
はじめまして、フルバランスの園畑です。
ご質問を確認いたしました。
「販売開始・終了日時に合わせてカートボタンを有効・無効化する機能」を実装したい、という認識であっておりますでしょうか？
上記でしたら、アプリを使用せず、メタフィールドの活用で実装可能です。
Dawnでの実装例が以下サイトに掲載されていますので、是非ご参考にしてみてください。
https://note.com/k4n/n/n901b69fa3f77
ご参考になりましたでしょうか。
私たちの励みにもなりますので、 お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。
分からない点があれば、またいつでもご連絡ください。
フルバランス 園畑
フルバランスさんと同様に、
質問者様は「販売開始・終了日時に合わせてカートボタンを有効・無効化する機能」を実装したい、とお考えであるという前提で回答いたします。
フルバランスさんが参考として記載されているnoteに掲載のソースを確認したところ、次の2点の懸念がありました。
そのため、下記に調整版のコードを記載させていただきます。
初めに販売開始と販売終了のメタフィールドを作成してください。
今回のサンプルでは、販売開始のネームスペースとキーを「custom.saleStartDate」、販売終了のネームスペースとキーを「custom.saleEndDate」で作成します。
その後、コードを埋め込むため、管理画面より「オンラインストア > テーマ > カスタマイズボタンの横にある「…」 > コードを編集」からコード編集画面を開きます。
コード編集画面から、セクション(Sections)の「main-product.liquid」を選択します。main-product.liquidの609行目当たりにあります、初期コードの下記部分を
下記コードに変更いただけましたら、販売開始前は「Coming Soon」販売中は「カートに追加する」、販売終了後は「販売期間外」と表示されます。
{%- 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 -%}
ご参考まで。
(キュー小坂)
フルバランス 園畑様
お世話になります。お忙しい中、ご返信くださりありがとうございます。
「販売開始・終了日時に合わせてカートボタンを有効・無効化する機能」を実装したいという認識で問題ございません。参考記事をご紹介くださりありがとうございました。
また何かありましたらご相談させていただくこともあるかと思います。
その際はよろしくお願いいたします。この度はありがとうございました。
キュー小坂様
お世話になります。お忙しい中ご返信くださりありがとうございます。
懸念点まで考慮していただき、詳細をご丁寧に教えていただき誠にありがとうございます。
ご案内いただいた内容で無事に実装できました！テスト商品でも日時設定をして確認済で問題なさそうです。ファイル名やコードまで、ご丁寧なご案内、感謝いたします。
また何かありましたらご相談させていただくこともあるかと思います。
その際はよろしくお願いいたします。
この度は大変ありがとうございました。ベストアンサーにさせていただきました^ ^
キュー小坂様
お世話になっております。
こちらの内容でコードの書き換えを致しました。
ただバージョンアップされており、こちらのコードの部分がスぺニットのbuy-buttons.liquidにあることまで分かりました。
そのコードを提示頂いたコードに切り替え、テストをしてみたのですが、サイズやカラー展開がある際、選択をしたら在庫があるにも関わらずSold out表記になり、また更新をかけたらまた在庫が上がる、選択したらSold outになる感じになってしまいます。
こちらの解決方法はございますか？
お忙しい所すみませんが、ご教授頂けますと幸いです。
宜しくお願い致します。