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

tadasy · ‎07-27-2020

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

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

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

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

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

/collections/all/タグ名

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

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

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

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

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

junichiokamura · ‎07-28-2020

セクションを作るには、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 · ‎07-28-2020

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

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

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

/collections/all/タグ名

の結果、上位数件を表示するというものです。
このような独自のセクションを作ることは可能でしょうか？

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

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

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

junichiokamura · ‎07-28-2020

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

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

Senior Partner Solutions Engineer

tadasy · ‎07-28-2020

ありがとうございます！

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

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

ありがとうございます。

tadasy · ‎07-28-2020

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

こちらの制限ですが、 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_ · ‎10-22-2020

コレクションページにタグ条件の商品数を出したいだけであれば、
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_ · ‎10-25-2020

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

/collections/all-タグ名

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

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

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

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

コミュニティ・ブログ記事