商品一覧ページやコレクションページで、新着商品のトップ画像左上に「NEW」ラベルを自動表示する機能の実装方法について質問されています。
要件:
提案された解決策:
collection.productsをループ処理し、各productオブジェクトのavailableプロパティで在庫有無を判断published_atプロパティ値が最新のものを新着商品として判定card-product.liquidなど）でラベル表示ロジックを実装published_atの変更数で新着判断する方法も提案注意点: 新着判定時は「SOLDOUT」や「sale」ラベルを非表示にする必要があります。
お世話になります。
早速ですが表題の件について、機能実装をしたく投稿させていただきます。
新着商品（直近でアクティブに変更された）が更新された場合に、
商品トップ画像の左上に『NEW』というラベルを表示させたいと思っています。
また在庫が “1” 以上の場合のみ表示し、品切れ状態（在庫 0）の場合は非表示が理想です。（現在の設定ですと品切れの状態だと、左上に『SOLDOUT』というラベルが表示され重複を防ぐ為）
その際に以前付いていた商品に関してはラベルが外れ、自動的に新着商品のみに付くという仕様にしたいです。
もしくは管理画面上で設定出来るように出来ればと思っています。
該当箇所は、トップページやコレクション内で、商品詳細ページでは非表示が理想です。
宜しくお願いします。
Shopify Plus等には入っておりません。
使用テーマは『Pristage』となります。
＞在庫が “1” 以上の場合のみ表示し、品切れ状態（在庫 0）の場合は非表示
①collection.productsをfor文で回して、各productオブジェクトの"available"がTrueの場合は在庫ありと判断する。
＞以前付いていた商品に関してはラベルが外れ、自動的に新着商品のみに付く
②各productオブジェクトの"published_at"プロパティ値が一番新しいものを新着商品と判断する。
①②をもとに、"published_at"が一番新しいかつ、"available"がTrueの場合にNewラベルを表示する。
その場合はsold_outラベル、on_saleラベル(割引ラベル)は非表示にする。
以上のやり方でいかがでしょうか。
なおラベルを自動付与ではなく管理画面で設定できるようにする場合は、新着と判断するための日付を管理画面側に変数で用意し、"published_at"プロパティ値がその変数より新しければ新着商品と扱う、のようにすれば実現可能かと思います。
※ラベル表示をしている個所はcard-product.liquidのようなLiquidファイル上で、sold_outなどと検索すれば見つかるはずです