もう少しのところでつまずいており、どうぞ知恵をお貸しください。 Q：バリーエーション画像ごとに在庫数を表示し、売り切れと表示させたいバリエーションのproductオブジェクトが画像は「image in product.images」在庫数は「variant in product.variants 」と違っている為、一度のFor文の中で回せないのですが、 Liquidで「&」に当たる様な方法はあるのでしょうか？ {% for image in product.images & variant in product.variants %} [{{ image.alt |…

商品詳細でバリエーションを一覧表示したいのであればこれで取得出来ます。 https://shopify.dev/docs/themes/liquid/reference/objects/variant/ {% for variant in product.variants %} 画像URL：{{ variant.image.src }} 在庫数：{{ variant.inventory_quantity }} 販売中（true）か売り切れか（false）：{{ variant.available }} {% endfor %} [スクリーンショット 202…

前提部分の画像の取得に関しまして、以下でバリエーションの画像が取得できるのではと思います。 https://shopify.dev/docs/themes/liquid/reference/objects/variant#variant-image {{ variant.image.src }} 上記私が勘違いしていましたら申し訳ありません。

ご返信いただきありがとうございます！画像パスの部分を {{ variant.image.src }} に変更し {% for variant in product.variants %} でFor文を作成したところ、希望通りの表示ができました！ありがとうございます！ただ、サムネイルをクリックするとメイン画像に表示される設定が解除されてしまい、別ページで画像が開く設定になってしまいました。また別の問題なので、もう少しチャレンジしてみます。ありがとうございました。

LiquidはDOM構築前の言語なので、バリエーションごとに在庫数を判定する条件式は、初回読み込み時しか動かないと思いますが、動いてるのでしょうか？例えば variant.available オブジェクトだけで何とかなるかもしれませんが、 UIを作るためには、おそらく下記のようなプログラムを作っておかないといけない気がします。在庫配列をLiquidでJavaScriptの変数に定義ユーザーが選択したバリエーションを、JQueryでchange判定 html()関数等でHTML表示を切り替える

▶ Show More ご返信頂きありがとうございます！ {% for image in product.images %} {% for variant in product.variants %} 別々のulで読み込ませると下記画像のように表示はされるので動いていると思います。 CSSで無理やり調整すればなんとかなるのですが、 {% for image in product.images %}と{% for variant in product.variants %}を一つのfor文にまとめる方法があるのか？可能なのか？ご存知でしたらご教授下さいませ！ [image1.…

バリエーション画像の下に売り切れを表示

日本語ディスカッション技術的なQ＆A

matsudaira February 10, 2021, 7:43am 7

度々アドバイスいただきありがとうございます！

おかげさまで不具合なく設定できました！！！

この度は本当にありがとうございました。

Topic		Replies	Views
バリエーションに（sold out）の文字を表示させたい技術的なQ＆A	6	150	January 18, 2022
商品の在庫数を表示したい技術的なQ＆A	11	107	April 1, 2020
Dawnでのバリエーション毎の在庫表示についてサンプルコード集（アプリ・テーマ）	3	33	September 16, 2022
商品ページのバリエーション在庫数表示を指定数以上の場合非表示にしたい技術的なQ＆A	2	53	September 8, 2022
商品画像の下にバリエーションの文字を表示させる技術的なQ＆A	3	49	October 15, 2021

バリエーション画像の下に売り切れを表示

Related topics