Liquid、JavaScriptなどに関する質問
解決済! ベストソリューションを見る。
成功
商品詳細でバリエーションを一覧表示したいのであればこれで取得出来ます。
https://shopify.dev/docs/themes/liquid/reference/objects/variant/
{% for variant in product.variants %}
<div>画像URL:{{ variant.image.src }}</div>
<div>在庫数:{{ variant.inventory_quantity }}</div>
<div>販売中(true)か売り切れか(false):{{ variant.available }}</div>
{% endfor %}
前提部分の画像の取得に関しまして、以下でバリエーションの画像が取得できるのではと思います。
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を作るためには、おそらく下記のようなプログラムを作っておかないといけない気がします。
ご返信頂きありがとうございます!
{% for image in product.images %}
{% for variant in product.variants %}
別々のulで読み込ませると下記画像のように表示はされるので
動いていると思います。
CSSで無理やり調整すればなんとかなるのですが、
{% for image in product.images %}と{% for variant in product.variants %}を一つのfor文にまとめる方法があるのか?可能なのか?
ご存知でしたらご教授下さいませ!
成功
商品詳細でバリエーションを一覧表示したいのであればこれで取得出来ます。
https://shopify.dev/docs/themes/liquid/reference/objects/variant/
{% for variant in product.variants %}
<div>画像URL:{{ variant.image.src }}</div>
<div>在庫数:{{ variant.inventory_quantity }}</div>
<div>販売中(true)か売り切れか(false):{{ variant.available }}</div>
{% endfor %}
度々アドバイスいただきありがとうございます!
おかげさまで不具合なく設定できました!!!
この度は本当にありがとうございました。
リエンゲージメントの自動化で売り上げ向上へ!素敵なオンラインストアを作成し、見込み顧客の携帯へ広告を直接に送信する、またはSNSなどで宣伝すると、お客様がストアに行き着...
By Mirai Mar 24, 2024Shopifyは世界で最も革新的なブランドと起業家をサポートしています。個人起業家やあらゆる規模のビジネスの成長を後押しするために、Shopify アカデミーではShopif...
By SarahF_Shopify Mar 22, 2024オンラインストア運営はとてもやりがいのある活動です。新しい注文が入った時の喜びや世界中のお客様とやりとりできる可能性、商品に対して最高のレビューをもらった時の満足感は、毎日の...
By Mina Mar 13, 2024