FROM LOAD - jp_header

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

tadasy
遊覧客
16 0 4

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

 

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

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

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

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

 

/collections/all/タグ名

 

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

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

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

 

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

 

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

7件の返信7

junichiokamura
Community Manager
1200 280 506

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

以下のブログや動画で説明していますので、参考にしていただければと思います。
https://www.shopify.jp/blog/partner-shopify-app-development
https://www.youtube.com/watch?v=xgPrMP48W-M&list=PLkR3LRtxAZfod8TvcsKU7IEWeAO5fhcOe&index=3

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

Senior Partner Solutions Engineer
tadasy
遊覧客
16 0 4

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

 

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

 

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

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

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

 

/collections/all/タグ名

 

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

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

 

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

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

 

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

junichiokamura
Community Manager
1200 280 506

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

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

Senior Partner Solutions Engineer
tadasy
遊覧客
16 0 4

ありがとうございます!

 

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

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

 

ありがとうございます。

tadasy
遊覧客
16 0 4

ドキュメントに書いてあったのですが、最大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 %}
      <!-- productの処理 -->
    {% endif %}
  {% endfor %}
{% endpaginate %}

 

 

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

_osamu_iwasaki_
Shopify Partner
185 47 193

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

 

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

スクリーンショット 2020-10-22 15.53.10.png

2. theme.liquid でこのテンプレートはHEADやBODYを表示しない設定にします。

 

{% if request.path contains '/collections/count' %}
 {{ content_for_layout }}

{% else %}
 <html>
 <head></head>
 <body>
 {{ content_for_layout }}
 </body>
 </html>

{% endif %}

 

 

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

 

<script>
$.ajax({
   type: 'GET',
   url: '/collections/count/(タグ名)',
   dataType: 'html',
   success: function(data) {
       $('#counts').html(data);
   }
})
</script>

 

 

_osamu_iwasaki_
Shopify Partner
185 47 193

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

/collections/all-タグ名

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

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

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

20201026_060151.jpg