spotlightにおいてバリエーションに無い場合に「売り切れ」と表示されてしまいます。
例えばTシャツ赤（サイズSとM）と青（サイズMのみ）を販売すると、お客さんがサイトを見た際に、実際にはバリエーションには無い青のSサイズが表示され「売り切れ」となります。
そもそも存在しない選択肢を「売り切れ」ではなく表示自体しなくする方法はありますでしょうか？
よろしくお願いいたします。
Topic summary
Spotlightのバリエーション機能において、存在しないバリエーション（例：青いTシャツのSサイズ）が「売り切れ」と表示される問題についての相談。
問題の詳細：
- 商品に「色」と「サイズ」の2つのバリエーションを設定した場合、実際には存在しない組み合わせ（青・Sサイズなど）も選択肢として表示される
- 管理画面で該当バリエーションを削除しても、顧客側のページでは「売り切れ」として表示されてしまう
提案された解決策：
- 商品を分ける（「Tシャツ赤」と「Tシャツ青」を別商品として登録）
- コード編集による対応：
snippets/product-variant-options.liquidを修正することで、存在しないバリエーションを非表示にできる可能性がある - ja/locales.jsonファイルで「売り切れ」の文言を「利用不可」に変更する方法（ただしサイト全体に影響あり）
現状：
ROUTE06_babaがコード修正案を提示し、before/after画像付きで具体的な実装方法を共有。BAS1は今後試してみる予定。なお、この挙動が不具合かどうかは不明。
質問者は別途、バリエーションと在庫を一覧表示できる仕組みについても関心を示している。
1 Like
返信ありがとうございます。
ご回答は「Tシャツ赤」と「Tシャツ青」という２種類の商品と言う事でしょうか？
ではなく、「Tシャツ」という商品に「色」と「サイズ」という２つのバリエーションを持たせた場合での事象です。
説明不足ですみません。
1 Like
お返事ありがとうございます。以下のような状態ということですね。
となると、ご質問者様の要望を満たすのは難しいかと思います。
このようにバリエーションを設定すると、バリエーションとしては存在するが在庫がゼロ、という設定しかできないため、どうしてもバリエーションの存在自体をなくすならば、商品を分けるのが望ましいかと存じます。
もしくは「売り切れ」という表現を避けたい、ということであれば、Spotlightのコード編集からlocales/ja.jsonというファイルを開くと、 “sold_out”: “売り切れ” と記述されている箇所があるため、ここを “sold_out”: “利用不可” などとすると、「売り切れ」という文言がすべて「利用不可」に変わります。
ただし、こちらはサイト全体に影響が出ることと、コード編集になるため一定のリスクが伴います。そちら十分に留意の上、お試しいただきたく思います。
明確な解決策を提示できず恐縮ですが、ご参考になれば幸いです。
ご回答ありがとうございます。
例ではTシャツでしたが、実際はバッグSとMサイズで色展開がいくつかあります。
商品編集ページで色とサイズを設定した後に、バリエーションを展開し、存在しないバリエーションを削除すると１枚目の添付画像のようになり、実際に無いバリエーションは削除することができます。
しかし削除してもお客さんからみたページでは２枚目の添付画像のように、存在しないバリエーションも表示されます。
ChatGPTに聞くと、コード編集で存在しないバリエーションは表示されないようにできると答えるのですが、該当のファイルが見つけられず、コード編集はあきらめて、設定で解決できないかとこちらのコミュニティに質問した次第です。
アプリなどで解決できないかも含め調べてみます。
ありがとうございました。
1 Like
詳細ありがとうございます！
商品編集ページで色とサイズを設定した後に、バリエーションを展開し、存在しないバリエーションを削除すると１枚目の添付画像のようになり、実際に無いバリエーションは削除することができます。
しかし削除してもお客さんからみたページでは２枚目の添付画像のように、存在しないバリエーションも表示されます。
このような挙動をするのですね。。私も手元で試してみたのですが、確かにおかしな挙動だなと思いました（不具合のような気もしますが、ちょっとわからないですね。。
コード編集も試そうとされたとのことでしたので、私のほうでも試してみました。
隅々まで動作確認はとれていませんが、snippets/product-variant-options.liquidを修正することで、ご要望の挙動を満たすことはできそうでした。
{%- elsif picker_type == 'dropdown' or picker_type == 'swatch_dropdown' -%}
{% if option_disabled -%}
{{- 'products.product.value_unavailable' | t: option_value: value -}}
{%- else -%}
{%- endif %}
{%- endif -%}
before/afterを画像でも添付いたしますので、参考になれば幸いです（タグをelseの中に入れます）。
before
after
返信ありがとうございます。
バグなんでしょうか…
コードありがとうございます。試してみます。
ご丁寧にほんとうにありがとうございます。
今回の件とは別ですがサイズ６種類・カラー４種類の商品を登録する予定があり、お客さんがその都度プルダウンをしてバリエーションと在庫を確認するのは手間だと思うので、クリックするとポップアップで全てのバリエーションと在庫が一覧で見られるような仕組みがあったらいいなと思っています。
shopify始めたばかりでわからないことだらけですが、コミュニティのおかげで大変助かっています。
質問の仕方も伝わりやすくする必要がありますね。
ありがとうございました。
1 Like
こちらこそご丁寧にありがとうございました！