Liquid、JavaScriptなどに関する質問
商品が売り切れの場合、バリエーションのオプションを選択する時に、売り切れとわかるように文字を表示させたいと思っております。
例えば、カラーとサイズのバリエーションがある場合、
カラーを選択して、サイズを選択する時に売り切れの場合サイズがある場合、(SOLD OUT)という文字を<option>の中に表示させたいのですが、
色々調べてもわからなかったので、ご教授いただけると嬉しいです。
参考サイトURL
https://www.neighborhood.jp/products/211pcnh-st20
何卒よろしくお願い申し上げます。
テーマに依存する問題だと思いますので、お使いのテーマを共有されるのが良いかと思います。
Shopifyでバリエーション管理すると、在庫はバリエーション単位で管理されるので、DebutとかですとSOLD OUTと表示されると思うのですが、それとは別の要件でしょうか?
横から失礼いたします。
私も同様の悩み(サイズ毎にsoldout表記を付けたい)を持っておりまして、テーマは「Narrative」なのですが、どのような解消方法があるのでしょうか?
Debutなどは、Liquidで該当バリエーションの在庫数をみて、ゼロならSOLD OUTの表示をしているコードがテーマ内にあるはずなので、同様の処理をNarrativeのコードにも入れれば同じことができるはずですが、HTML、JS、Liquidなどのコーデイングの知識が必要です。
ご自身がテーマのコード編集の知識をお持ちであれば、下記のテーマの技術ドキュメントを見て該当箇所を特定して修正できますが、そうでない場合は、パートナーさんなどにお願いするのをお勧めします。
https://shopify.dev/docs/themes/liquid/reference/objects/variant#variant-inventory_quantity
初期表示はLiquidで初期選択のバリエーションが売り切れかどうか判定して表示しているのですが、
ブラウザに出力した後はもうLiquidが使えませんので、ユーザーがバリエーションを選択するアクションをすると、
JavaScriptで在庫判定し直してHTMLを書き変えていると思います。
テーマで使われているロジックを調べ直して改修するよりは、
ゼロから作り直すか、近しいことができるアプリを探したほうが早いかもしれません。
すみません色々と返信いただき誠にありがとうございます。
デフォルトテーマのDebutでは、下記のチュートリアル参考にして実装ができました。
https://shopify.dev/tutorials/customize-theme-hide-variants-that-are-sold-out
今使用しているテーマ「Palo Alto」に当てはめようと試みましたが、
テーマの構造が複雑で私には、理解ができませんでした。
https://themes.shopify.com/themes/palo-alto/styles/palo-alto
ちょうどoption variant products.product.sold_out などで 当方も探していたところに、ピッタリの質問をいただいていて、大変参考になりました。
↑こちらのページ Dbuet のカスタマイズにて以下のコード記述あります。
ProductJson-で始まるIDを持つ要素を取得する表現だと思うのですが、これではうまく取得できませんでした。
const productJson = document.querySelectorAll('[id`^`=ProductJson-');
そこで、IDを直接記述して取得するようにしました。
const productJson = document.querySelectorAll('#ProductJson-product-template');
Shopifyのチェックアウトは世界一コンバージョン率が高いチェックアウトです。2023年4月に実施された世界3大手マネジメントコンサルティング会社の共同調査によると、Sho...
By Minami_ Apr 11, 2024Shopifyのルーツ Shopifyは、スノーボードをオンラインで販売したいという夢を叶えるために2004年に誕生しました。当時は大企業だけがインターネットで販売す...
By JapanGuru Apr 7, 2024リエンゲージメントの自動化で売り上げ向上へ!素敵なオンラインストアを作成し、見込み顧客の携帯へ広告を直接に送信する、またはSNSなどで宣伝すると、お客様がストアに行き着...
By Mirai Mar 24, 2024