SOLD OUT時にTOPに表示される画像をグレーアウトさせる方法

[COLA-KUN]

商品が完売した際にTOPや一覧に表示された時、画像をグレースケールさせたい。

方法はコード編集でもAppでもどちらでも良いのですがご教示頂けますでしょうか。

[株式会社フルバランス]

SOLD OUTかどうかの判定は{% unless product.availavle %}~{% endunless %}で可能です。

多くのテーマでは商品一覧に共通のモジュールを使用しているかと思います。

例えばデフォルトのDawnの場合、以下の箇所にクラス名を追加し、そのクラス名に対してgrayscaleのcssをあてる形ではいかがでしょうか。

card_product.liquid 55行目

class="motion-reduce"

を以下に変更

class="motion-reduce {% unless card_product.available %}grayscale{% endunless %}"

これでSOLD OUTの商品の画像にだけ.grayscaleというクラスが割り振られますので、CSSで

.grayscale{filter: grayscale(1);}

などと追加して頂ければ売り切れの商品にだけgrayscaleのCSSをあてることができます。

参考：grayscale

https://developer.mozilla.org/ja/docs/Web/CSS/filter-function/grayscale