Craftでトップ画面にスライドショーで新着商品を表示したい

日本語 ディスカッション 技術的なQ＆A
1

はじめまして。Shopify歴2ヶ月ほどです。

件名の通りなのですが、

・使用テーマ（craft）で

・トップ画面に

・スライドショーで

・新着商品

を表示したいと思っています。

スライドショーのやり方はわかりそうなのですが、新着商品の抽出方法がよく分かりません。

マニュアルではなく自動で新着商品3つ～5つくらいを表示できるようにするにはどうしたらよいでしょうか。

※自動で動くスライドショーではなく、添付のように閲覧者が自分でスライドさせるタイプでも結構です。

2

こんにちは！

新着商品の出力についてですが、まず全ての商品を一つのコレクションにまとめて、その中から新着順に商品を抽出する必要があります。

例)

  1. すべての商品を含むコレクション「ALL」を作成し、条件に「商品価格が0円より大きい」など全ての商品に当てはまる項目を設定。並び替えを「新着順」に設定。

  2. コードを編集し、1.で作成したコレクション「ALL」から商品オブジェクトを出力

{% for collection in collections %}
  {% if collection.handle == 'all' %}
    {% for product in collection.products %}

      ここに商品名や金額などを記述する
      {{ product.title }}
      {{ product.url }}

    {% endfor %}
  {% endif %}
{% endfor %}
  1. 2.で出力した情報をSwiperスライダーなどに組み込む。

上記の手順で、ご希望の仕様が実現可能なのではないかと思います。

こちらの記事など参考になりませんでしょうか？

https://web-guided.com/1332/

また、出力したい商品数を指定するには「limit:〇〇」を追記することで制御可能です。

{% for collection in collections %}
  {% if collection.handle == 'all' %}
    {% for product in collection.products limit:3 %} //新着3件

      ここに商品名や金額などを記述する
      {{ product.title }}
      {{ product.url }}

    {% endfor %}
  {% endif %}
{% endfor %}

こちらの質問で詳しく回答されているようです。
https://community.shopify.com/post/784840

少しでも参考になりましたら幸いです！

どうぞよろしくおがいします！

1 Like
3

株式会社おいかぜ様

非常にわかりやすい＆ご丁寧なご返信ありがとうございます！！（通知メールに気づいておらずお礼が遅れまして大変失礼致しました。）

コードの編集は苦手なのですが、一つ一つやってみます。ウェブデザイン・グラフィックデザインでご相談することがあればまたご連絡させて頂きます。ありがとうございました！

1 Like