FROM CACHE - jp_header

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

解決済
matsudaira
観光客
8 1 1
もう少しのところでつまずいており、どうぞ知恵をお貸しください。
 
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」と表示させたいです。
他にソースの書き方があある様でしたら、お教えください。
 
どうぞよろしくお願い致します。
1 件の受理された解決策

ベストソリューション
_osamu_iwasaki_
Shopify Partner
169 43 183

成功

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

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

 

スクリーンショット 2021-02-10 15.02.06.png

- Blog: https://note.com/osamuiwasaki
- Twitter: https://twitter.com/_osamu_iwasaki_

元の投稿で解決策を見る

6件の返信6
Jizo_Inagaki
Shopify Partner
664 267 593

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

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

{{ variant.image.src }}

 

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

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。
matsudaira
観光客
8 1 1

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

画像パスの部分を

{{ variant.image.src }}

に変更し

{% for variant in product.variants %}

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

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

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

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

_osamu_iwasaki_
Shopify Partner
169 43 183

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

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

  • 在庫配列をLiquidでJavaScriptの変数に定義
  • ユーザーが選択したバリエーションを、JQueryでchange判定
  • html()関数等でHTML表示を切り替える
- Blog: https://note.com/osamuiwasaki
- Twitter: https://twitter.com/_osamu_iwasaki_
matsudaira
観光客
8 1 1

 

スポイラ
 

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

 

{% for image in product.images %}

{% for variant in product.variants %}

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

動いていると思います。

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

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

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

image1.jpg

_osamu_iwasaki_
Shopify Partner
169 43 183

成功

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

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

 

スクリーンショット 2021-02-10 15.02.06.png

- Blog: https://note.com/osamuiwasaki
- Twitter: https://twitter.com/_osamu_iwasaki_
matsudaira
観光客
8 1 1

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

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

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