バリエーションに（SOLD OUT）の文字を表示させたい

Rhythmos · ‎02-18-2021

商品が売り切れの場合、バリエーションのオプションを選択する時に、売り切れとわかるように文字を表示させたいと思っております。

例えば、カラーとサイズのバリエーションがある場合、

カラーを選択して、サイズを選択する時に売り切れの場合サイズがある場合、（SOLD OUT）という文字を<option>の中に表示させたいのですが、

色々調べてもわからなかったので、ご教授いただけると嬉しいです。

参考サイトURL

何卒よろしくお願い申し上げます。

junichiokamura · ‎03-08-2021

テーマに依存する問題だと思いますので、お使いのテーマを共有されるのが良いかと思います。

Shopifyでバリエーション管理すると、在庫はバリエーション単位で管理されるので、DebutとかですとSOLD OUTと表示されると思うのですが、それとは別の要件でしょうか？

Senior Partner Solutions Engineer

attraction · ‎05-26-2021

横から失礼いたします。

私も同様の悩み（サイズ毎にsoldout表記を付けたい）を持っておりまして、テーマは「Narrative」なのですが、どのような解消方法があるのでしょうか？

junichiokamura · ‎05-26-2021

Debutなどは、Liquidで該当バリエーションの在庫数をみて、ゼロならSOLD OUTの表示をしているコードがテーマ内にあるはずなので、同様の処理をNarrativeのコードにも入れれば同じことができるはずですが、HTML、JS、Liquidなどのコーデイングの知識が必要です。

ご自身がテーマのコード編集の知識をお持ちであれば、下記のテーマの技術ドキュメントを見て該当箇所を特定して修正できますが、そうでない場合は、パートナーさんなどにお願いするのをお勧めします。

Senior Partner Solutions Engineer

_osamu_iwasaki_ · ‎05-31-2021

初期表示はLiquidで初期選択のバリエーションが売り切れかどうか判定して表示しているのですが、
ブラウザに出力した後はもうLiquidが使えませんので、ユーザーがバリエーションを選択するアクションをすると、
JavaScriptで在庫判定し直してHTMLを書き変えていると思います。

テーマで使われているロジックを調べ直して改修するよりは、
ゼロから作り直すか、近しいことができるアプリを探したほうが早いかもしれません。

Rhythmos · ‎05-31-2021

すみません色々と返信いただき誠にありがとうございます。

デフォルトテーマのDebutでは、下記のチュートリアル参考にして実装ができました。

今使用しているテーマ「Palo Alto」に当てはめようと試みましたが、
テーマの構造が複雑で私には、理解ができませんでした。

meirou · ‎01-18-2022

ちょうどoption variant products.product.sold_out などで当方も探していたところに、ピッタリの質問をいただいていて、大変参考になりました。

↑こちらのページ Dbuet のカスタマイズにて以下のコード記述あります。
ProductJson-で始まるIDを持つ要素を取得する表現だと思うのですが、これではうまく取得できませんでした。

const productJson = document.querySelectorAll('[id`^`=ProductJson-');

そこで、IDを直接記述して取得するようにしました。

  const productJson = document.querySelectorAll('#ProductJson-product-template');

Digital designer

コミュニティ・ブログ記事