spotlightにおいてバリエーションの在庫表示

[BAS1]

spotlightにおいてバリエーションに無い場合に「売り切れ」と表示されてしまいます。

例えばTシャツ赤（サイズSとM）と青（サイズMのみ）を販売すると、お客さんがサイトを見た際に、実際にはバリエーションには無い青のSサイズが表示され「売り切れ」となります。

そもそも存在しない選択肢を「売り切れ」ではなく表示自体しなくする方法はありますでしょうか？

よろしくお願いいたします。

[ROUTE06_baba]

試しに設定をしてみたのですが、商品それぞれにバリエーションを設定すれば、Tシャツ青はサイズMの選択肢のみとできそうですが、いかがでしょうか？

[BAS1]

返信ありがとうございます。

ご回答は「Tシャツ赤」と「Tシャツ青」という２種類の商品と言う事でしょうか？

ではなく、「Tシャツ」という商品に「色」と「サイズ」という２つのバリエーションを持たせた場合での事象です。

説明不足ですみません。

[ROUTE06_baba]

お返事ありがとうございます。以下のような状態ということですね。

となると、ご質問者様の要望を満たすのは難しいかと思います。

このようにバリエーションを設定すると、バリエーションとしては存在するが在庫がゼロ、という設定しかできないため、どうしてもバリエーションの存在自体をなくすならば、商品を分けるのが望ましいかと存じます。

もしくは「売り切れ」という表現を避けたい、ということであれば、Spotlightのコード編集からlocales/ja.jsonというファイルを開くと、 "sold_out": "売り切れ" と記述されている箇所があるため、ここを "sold_out": "利用不可" などとすると、「売り切れ」という文言がすべて「利用不可」に変わります。

ただし、こちらはサイト全体に影響が出ることと、コード編集になるため一定のリスクが伴います。そちら十分に留意の上、お試しいただきたく思います。

明確な解決策を提示できず恐縮ですが、ご参考になれば幸いです。

[BAS1]

ご回答ありがとうございます。

例ではTシャツでしたが、実際はバッグSとMサイズで色展開がいくつかあります。

商品編集ページで色とサイズを設定した後に、バリエーションを展開し、存在しないバリエーションを削除すると１枚目の添付画像のようになり、実際に無いバリエーションは削除することができます。

しかし削除してもお客さんからみたページでは２枚目の添付画像のように、存在しないバリエーションも表示されます。

ChatGPTに聞くと、コード編集で存在しないバリエーションは表示されないようにできると答えるのですが、該当のファイルが見つけられず、コード編集はあきらめて、設定で解決できないかとこちらのコミュニティに質問した次第です。

アプリなどで解決できないかも含め調べてみます。

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

[ROUTE06_baba]

詳細ありがとうございます！

>商品編集ページで色とサイズを設定した後に、バリエーションを展開し、存在しないバリエーションを削除すると１枚目の添付画像のようになり、実際に無いバリエーションは削除することができます。

>しかし削除してもお客さんからみたページでは２枚目の添付画像のように、存在しないバリエーションも表示されます。

このような挙動をするのですね。。私も手元で試してみたのですが、確かにおかしな挙動だなと思いました（不具合のような気もしますが、ちょっとわからないですね。。

コード編集も試そうとされたとのことでしたので、私のほうでも試してみました。

隅々まで動作確認はとれていませんが、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 -%}
    <option
      id="{{ input_id }}"
      value="{{ value | escape }}"
      {% if value.selected %}
        selected="selected"
      {% endif %}
      {% if swatch_value and picker_type == 'swatch_dropdown' %}
        data-option-swatch-value="{{ swatch_value }}"
        {% if swatch_focal_point %}
          data-option-swatch-focal-point="{{ swatch_focal_point }}"
        {% endif %}
      {% endif %}
      {{ input_dataset }}
    >
        {{- value -}}
    </option>
      {%- endif %}
  {%- endif -%}

before/afterを画像でも添付いたしますので、参考になれば幸いです（<option>タグをelseの中に入れます）。

before

after

[BAS1]

返信ありがとうございます。

バグなんでしょうか…

コードありがとうございます。試してみます。

ご丁寧にほんとうにありがとうございます。

今回の件とは別ですがサイズ６種類・カラー４種類の商品を登録する予定があり、お客さんがその都度プルダウンをしてバリエーションと在庫を確認するのは手間だと思うので、クリックするとポップアップで全てのバリエーションと在庫が一覧で見られるような仕組みがあったらいいなと思っています。

shopify始めたばかりでわからないことだらけですが、コミュニティのおかげで大変助かっています。

質問の仕方も伝わりやすくする必要がありますね。

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

[ROUTE06_baba]

こちらこそご丁寧にありがとうございました！