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 %}
度々アドバイスいただきありがとうございます!
おかげさまで不具合なく設定できました!!!
この度は本当にありがとうございました。
サポートの選択肢が増えていく中、最適となる選択の判断が難しくなっているかと存じます。今回は問題の解決に最適となるサポートの選択方法を、紹介させて頂きます。 選択肢のご紹介...
By Mirai Oct 6, 20242023年初頭、Shopifyペイメントアカウント、及びShopifyアカウント全体のセキュリティを強化する為の変更が適用されました。ユーザーのアカウントセキュリティを強化す...
By Mirai Sep 29, 2024概要: 年末/年明けは、消費者が最もショッピングを行う時期の一つです。特に、ブラックフライデー・サイバーマンデー(BFCM)は、世界中で注目される大規模なセールイベントであ...
By JapanGuru Sep 25, 2024