課題:
商品タグに基づいて「カートに入れる」ボタンのテキストを動的に変更したい。具体的には:
使用環境:
テーマ: Lorenza
編集ファイル: product-buy-buttons.liquid
提案された解決策:
Qcoltd氏が条件分岐を使ったコード修正案を提示。商品タグに「Pre Order」が含まれるかをチェックし、在庫状況と組み合わせてボタンテキストを切り替える実装方法を提案。
重要な制約:
ベンダーへの相談も推奨されている。
商品ページにおいて、特定の商品タグを持った商品の「カートに入れる」ボタンの文字を変更したいと考えています。
在庫がある場合…
「カートに入れる」
在庫があり、商品タグに「Pre Order」が含まれる場合…
「予約購入」
在庫がない場合…
「Sold Out」
というように表示させたいと思います。使用しているテーマはLorenza、以下のコードはproduct-buy-buttons.liquidの一部です。
{%- if product.selling_plan_groups.size == 0 -%}
{% if show_dynamic_checkout and current_variant.available %}
{{ form | payment_button }}
{% endif %}
{%- endif -%}
@akiyo 様
前提条件として、
複数のバリエーションを持つ商品を登録されていない場合に限り、
下記のコードはうまく動作するかと思います。
1つの商品が複数のバリエーションを持つ場合は、
バリエーションを商品詳細ページ上で変更してもうまく「カートに入れる」ボタンの文言が変化しない可能性が高いです。
記載いただいた下記のコードを、
{% unless current_variant.available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}
下記のように変更してみてはどうでしょうか？
{% unless current_variant.available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{% if product.tags contains "Pre Order" %}
予約購入
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endif %}
{% endunless %}
有料のテーマなので動作検証もできておりませんし、
前述の通り、バリエーションを複数持つ商品の場合、おそらくバリエーション切り替えにうまく対応できないですが、
参考になれば幸いです。
なお、ベンダーにご相談いただくのが一番間違いないので、
もしまだ試していらっしゃらないようなら、
お問い合わせいただくと良いかもしれません。
(キュー田辺)
Hey,
残念ながら、Shopify には商品タグに応じて「カートに入れる」ボタンの文言を自動で「予約購入」に切り替えるための標準設定はありません。対応するには、Lorenza のテーマコードを編集する必要があります。
手順は Online Store → Themes → Edit code から、product-buy-buttons.liquid を探してください。そのうえで、Liquid の条件分岐を追加し、product.tags に “Pre Order” が含まれているかどうか、そして current_variant.available の状態を確認して、状況に応じてボタンの文言を出し分けます。参考：
https://help.shopify.com/en/manual/online-store/themes/customizing-themes
この方法はテーマ編集が必要で、テーマの更新があるたびにメンテナンスが発生する可能性があります。
別の方法として、K1 PreOrder を使うと自動化できます（私は K1 PreOrder の創業者です）。ボタンの自動置き換え、日本語テキスト（「予約購入」）の自由なカスタマイズ、在庫状況（在庫あり／在庫なし）に応じた表示切り替えを、商品タグを条件にして smart collections 経由で実現できます。該当する場合はこちら：
必要であれば、テーマ側のカスタマイズ実装もサポートできます。
これには、メタ フィールドを使用して各製品のボタン名とボタン アクションを一致させることが含まれ、これを実現するには製品情報ページのコードを変更する必要があります。