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 %}
度々アドバイスいただきありがとうございます!
おかげさまで不具合なく設定できました!!!
この度は本当にありがとうございました。
Shopifyのチェックアウトは世界一コンバージョン率が高いチェックアウトです。2023年4月に実施された世界3大手マネジメントコンサルティング会社の共同調査によると、Sho...
By Minami_ Apr 11, 2024Shopifyのルーツ Shopifyは、スノーボードをオンラインで販売したいという夢を叶えるために2004年に誕生しました。当時は大企業だけがインターネットで販売す...
By JapanGuru Apr 7, 2024リエンゲージメントの自動化で売り上げ向上へ!素敵なオンラインストアを作成し、見込み顧客の携帯へ広告を直接に送信する、またはSNSなどで宣伝すると、お客様がストアに行き着...
By Mirai Mar 24, 2024