独自セクションの作り方について

お世話になっております。

TOPページなどで利用されるセクションを独自に作成したいと考えております。

今検討しているのは特定のタグがついた商品の一覧をTOPページに件数を指定して表示したいと考えています。

例を上げると、特集コレクション のようなものです。

特集コレクションでは、管理画面で任意のコレクションを設定する仕組みですが、たとえば、タグ名をテキストボックスに入力すると

/collections/all/タグ名

の結果、上位数件を表示するというものです。

このような独自のセクションを作ることは可能でしょうか?

また、可能であればどのように作成したら良いでしょうか?

ご存知のかたがいらっしゃいましたらご教授いただけると助かります。

よろしくお願いいたします。

セクションを作るには、Liquidで、schema などを定義する必要があります。

以下のブログや動画で説明していますので、参考にしていただければと思います。
https://www.shopify.jp/blog/partner-shopify-app-development

以下のパートナーさんのブログも参考になるかと思います。
https://note.com/osamuiwasaki/n/n1c8813bab083?magazine_key=md50dbab851c4
https://taka-forward.com/shopify-howtostudy-2006/

情報ありがとうございます!

ただ、セクション自体の作り方などは勉強させていただいたのですが、

今検討しているのは特定のタグがついた商品の一覧をTOPページに件数を指定して表示したいと考えています。> > 例を上げると、特集コレクション のようなものです。> > 特集コレクションでは、管理画面で任意のコレクションを設定する仕組みですが、たとえば、タグ名をテキストボックスに入力すると> > /collections/all/タグ名> > の結果、上位数件を表示するというものです。> > このような独自のセクションを作ることは可能でしょうか?

こういった独自の処理をするセクションを作ることができるかがわかっておらず…

もう少し調査を進めてみますが、もしご存知の方がいましたらご教授いただきたく存じます。

よろしくお願いいたします。

セクションの中で、以下のcollectiion のliquidを使って、商品を参照し、そこで指定のtagと一致するかチェックする、もしくは、loopのフィルターで、tagでフィルターする方法があるかもしれません。

https://shopify.dev/docs/themes/liquid/reference/objects/collection#collection-products

1 Like

ありがとうございます!

ドキュメントに書いてあったのですが、最大50商品までしか取得できないみたいですので、51件目以降の商品が参照できないため、このやり方では厳しそうです。

もう少し調査してみます。

ありがとうございます。

ドキュメントに書いてあったのですが、最大50商品までしか取得できないみたいですので、51件目以降の商品が参照できないため、このやり方では厳しそうです。

こちらの制限ですが、 paginateを使うと50個以上取得できることがわかりました。

https://shopify.dev/docs/themes/liquid/reference/tags/theme-tags#paginate

コードにすると下のような感じで実装しました。

{% paginate collection.products by 取得したい件数 %}
  {% for product in collection.products %}
    {% if product.tags contains section.settings.tag_name %}
      
    {% endif %}
  {% endfor %}
{% endpaginate %}

勉強になりました。ありがとうございました!

1 Like

コレクションページにタグ条件の商品数を出したいだけであれば、
paginate by 50のループ処理をせずとも、{{ collection.products_count }} で出せますが、
トップページの場合は、ajaxで数字を呼び出す方法があります。

  1. collection.count.liquidを作り、その中に上記オブジェクトだけを入れます。
    このテンプレートに全商品登録しておきます。これで数字だけでます。

  1. theme.liquid でこのテンプレートはHEADやBODYを表示しない設定にします。
{% if request.path contains '/collections/count' %}
 {{ content_for_layout }}

{% else %}
 
 
 
 {{ content_for_layout }}
 
 

{% endif %}
  1. トップページので以下のように調べたいタグのURLの出力結果を取得し、HTML表示させます。

1 Like

ごめんなさい。難しく考え過ぎてました。コレクションはタグ条件でも作れるので、

/collections/all-タグ名

のコレクションを作っておき、

{{ collections[‘all-タグ名’].products_count }}

を使えばトップページでも商品数を表示出来ます。

1 Like