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

[matsudaira]

もう少しのところでつまずいており、どうぞ知恵をお貸しください。

Q：バリーエーション画像ごとに在庫数を表示し、売り切れと表示させたい

バリエーションのproductオブジェクトが

画像は「image in product.images」

在庫数は「variant in product.variants 」

と違っている為、一度のFor文の中で回せないのですが、

Liquidで「&」に当たる様な方法はあるのでしょうか？

 <ul>         

                {% for image in product.images & variant in product.variants %}             

        <li class="grid__item wide--one-quarter large--one-third medium-down--one-third">  

                   <a data-image-id="{{ image.id }}" href="{{ image.src | img_url: '1024x1024' }}" class="product-single__thumbnail">

                    <img src="{{ image.src | img_url: 'grande' }}" alt="{{ image.alt | escape }}">

                  </a>  

                {% if variant.inventory_quantity ==1 %}

                  <p>在庫あり</p>

{% else %}

<p>SOLD OUT</p>

{% endif %}

  </li>  

 {% endfor %}   

</ul>

<ul>の中に<li>を分けてFor文を書けばそれぞれ表示されるのですが、画像の直下に在庫数が表示されず、違うリストとして表示されます。

希望としてはバリエーション画像の下に「SOLD OUT」と表示させたいです。

他にソースの書き方があある様でしたら、お教えください。

どうぞよろしくお願い致します。

[Jizo_Inagaki]

前提部分の画像の取得に関しまして、以下でバリエーションの画像が取得できるのではと思います。

https://shopify.dev/docs/themes/liquid/reference/objects/variant#variant-image

{{ variant.image.src }}

上記私が勘違いしていましたら申し訳ありません。

[matsudaira]

ご返信いただきありがとうございます！

画像パスの部分を

{{ variant.image.src }}

に変更し

{% for variant in product.variants %}

でFor文を作成したところ、希望通りの表示ができました！ありがとうございます！

ただ、サムネイルをクリックするとメイン画像に表示される設定が解除されてしまい、別ページで画像が開く設定になってしまいました。

また別の問題なので、もう少しチャレンジしてみます。

ありがとうございました。 

[_osamu_iwasaki_]

LiquidはDOM構築前の言語なので、
バリエーションごとに在庫数を判定する条件式は、
初回読み込み時しか動かないと思いますが、動いてるのでしょうか？

例えば variant.available オブジェクトだけで何とかなるかもしれませんが、
UIを作るためには、おそらく下記のようなプログラムを作っておかないといけない気がします。

• 在庫配列をLiquidでJavaScriptの変数に定義
• ユーザーが選択したバリエーションを、JQueryでchange判定
• html()関数等でHTML表示を切り替える

[matsudaira]

スポイラ

ご返信頂きありがとうございます！

{% for image in product.images %}

{% for variant in product.variants %}

別々のulで読み込ませると下記画像のように表示はされるので

動いていると思います。

CSSで無理やり調整すればなんとかなるのですが、

{% for image in product.images %}と{% for variant in product.variants %}を一つのfor文にまとめる方法があるのか？可能なのか？

ご存知でしたらご教授下さいませ！

 

[_osamu_iwasaki_ · Accepted solution]

商品詳細でバリエーションを一覧表示したいのであればこれで取得出来ます。

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 %}        

[matsudaira]

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

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

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