複数バリエーションを持つ商品の販売前と後の、「カートに入れる」ボタンの文字を変更したい

Topic summary

予約商品の販売期間に応じて「カートに入れる」ボタンのテキストを変更する実装で問題が発生しています。

問題の詳細:

  • 商品メタフィールドで販売期間前は「COMING SOON」、販売期間後は「FINISHED」と表示する設定
  • 初回表示では正常に動作するが、バリエーション選択を変更すると「SOLD OUT」に戻ってしまう
  • ページを更新すれば元に戻る
  • Dawnテーマを使用

原因:
Dawnテーマではバリエーション変更時にJavaScriptでコンテンツを書き換えるため、Liquidによる設定が上書きされる。

提案された解決策:

  1. JavaScriptも併せてカスタマイズし、動的な書き換えに対応
  2. バリエーション変更時にページ遷移させる(非推奨)
  3. 専用アプリ(RuffRuff Selling Periods)の導入を推奨

追加の注意点:
Shopifyには特殊なURLで直接カートに商品を追加できる仕組みがあるため、その対策も必要。質問者は提案を受け入れ、テストを進める方針。

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.

ある特定の予約商品に販売期間前はカート機能をOFF、販売期間中はON、販売期間後はOFFといったものを商品メタフィールドを使って設定しています。

機能自体は正常に動作するのですが、「カートに入れる」ボタンの文字が販売期間前のOFFの時は「COMING SOON」、販売期間後のOFFの時は「FINISHED」と表示したいのですが、前も後もファーストセレクトではちゃんと表示されているものの、バリエーションの選択を変えると、デフォルト設定の「SOLD OUT」に切り替わってしまいます。ページ更新すれば「COMING SOON」や「FINISHED」に戻ります。

当方、Dawnテーマを使用しています。

下記、記述しているコードになります。

原因おわかりになりますでしょうか?

ぜひご教授いただければと思い、質問させていただきます。

何卒宜しくお願い致します。

{%- 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 -%}

<button
id=“ProductSubmitButton-{{ section_id }}”
type=“submit”
{{ stringNameAdd }}
class=“product-form__submit button button–full-width {% if show_dynamic_checkout and product.selling_plan_groups == empty %}button–secondary{% else %}button–primary{% endif %}”
{%- if stringBuy != ‘buy’ or product.selected_or_first_available_variant.available == false
or quantity_rule_soldout
or product.selected_or_first_available_variant == null
-%}
disabled
{%- endif -%}

{%- if stringBuy == 'buy' -%} {%- if product.selected_or_first_available_variant == null -%} {{ 'products.product.unavailable' | t }} {%- elsif product.selected_or_first_available_variant.available == false or quantity_rule_soldout -%} {{ 'products.product.sold_out' | t }} {%- else -%} {{ 'products.product.add_to_cart' | t }} {%- endif -%} {%- elsif startTimeLag <= 0 -%} COMING SOON {%- elsif endTimeLag >= 0 -%} FINISHED {%- endif -%} {%- render 'loading-spinner' -%}

@jaguar1

Dawnを利用されているとのことですので、

商品詳細ページでのバリエーション変更は、

ページ遷移ではなく、JavaScriptによるコンテンツの書き換えによってなされます。

JavaScriptで変更しているので、Liquidによる直接的な変更はなかったことにされます。

3つほどカスタマイズする方法があります。

  1. LiquidだけでなくJavaScriptも変更し、JavaScriptによるコンテンツの書き替えに対応する
  2. バリエーション変更時に、ページ遷移するようにカスタマイズしてしまう
  3. アプリを導入する

2は紹介はしましたがオススメできないので、

開発パートナーがいらっしゃるなら1が良いです。

ちなみにですが、

Shopifyには、下記のようにステータスがアクティブで商品在庫があればカートに商品を入れることができるURLが存在します。

https://techlab.q-co.jp/articles/155/

1の方法でも、カスタマイズを重ねれば対応できますが、

個人的におすすめなのは3です。

Shopifyコミュニティでも活動されているTsunさんのアプリが良いかと思います。

https://ruffruff.app/pages/ruffruff-selling-periods

https://community.shopify.com/user/1283410

※おそらく上記のURL操作によるカート投入による購入も防げたと思うのですが、詳細はTsunさんにお問い合わせいただくのが良いです。

ご参考まで。

(キュー田辺)

1 Like

キュー田辺様

ご返信が遅くなり大変申し訳ございません。

ご返信いただきありがとうございます。承知いたしました。

また、特殊なURLが存在することもご教授いただきありがとうございます。

実際に問題がないかテストを重ねて対応していきたいと思います。

ありがとうございました。