ブログ一覧ページのブログを無限スクロールで表示させたい

[mongorian346]

ブログの一覧表示を無限スクロールで下にスクロールをしたら表示されるように設定したいです。

そういった実装は可能でしょうか？

セクションにオリジナルで

news-list-page.liquidを作り

{%- assign blog = blogs[section.settings.news_list] -%}

{{ section.settings.title | escape }}

{% for article in blog.articles limit: section.settings.post_limit %}
• {% if section.settings.news_list_date %} {{ article.published_at | date: "%Y ⁄ %m ⁄ %d" }} {% endif %} {% if section.settings.news_list_category %} {{ article.tags }} {% endif %}
  {{ article.title }}
{% endfor %}

{% schema %}
{
“name”: “お知らせページ”,
“settings”: [
{
“id”: “title”,
“type”: “text”,
“label”: “見出し”,
“default”: “お知らせページ”
},
{
“id”: “news_list”,
“type”: “blog”,
“label”: “表示するブログ記事を選択”
},
{
“id”: “post_limit”,
“type”: “range”,
“label”: “表示数を選択”,
“min”: 1,
“max”: 30,
“step”: 1,
“default”: 3
},
{
“id”: “news_list_date”,
“type”: “checkbox”,
“label”: “日付を表示する”,
“default”: true
},
{
“id”: “news_list_category”,
“type”: “checkbox”,
“label”: “カテゴリーを表示する”,
“default”: true
}
],
“presets”: [
{
“name”: “お知らせページ”,
“category”: “お知らせページ”
}
]
}
{% endschema %}

{% stylesheet %}
#section-news-list-page .news-list-page-heading{
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 5px;
}
#section-news-list-page .container{
max-width: 1200px;
margin: 0 auto;
padding: 55px;
}
#section-news-list-page .news-list-page{
border: 1px solid #ccc;
}
#section-news-list-page .news-list-page-item{
border-bottom: 1px solid #ccc;
}
#section-news-list-page .news-list-page-item>a{
display: flex;
align-items: center;
padding: 20px;
}
#section-news-list-page .news-list-page-item:last-child{
border-bottom: none;
}
#section-news-list-page .news-list-page-date{
font-size: 12px;
margin-right: 15px;
}
#section-news-list-page .news-list-page-category{
font-size: 10px;
color: #fff;
background: #000;
padding: 5px;
margin-right: 15px;
}
#section-news-list-page .news-list-page-info{
position: relative;
top: -1px;
}
#section-news-list-page .news-list-page-title{
font-size: 14px;
margin-bottom: 0;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
position: relative;
top: 1px;
}
@media screen and (max-width: 768px){
#section-news-list-page .container{
padding: 35px 20px;
}
#section-news-list-page .news-list-page-item>a{
display: block;
padding: 15px;
}
#section-news-list-page .news-list-page-info{
margin-bottom: 5px;
}
}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

で示しています。

[Jizo_Inagaki]

以下のようなアプリを使うか開発する必要があるかと思います。

https://apps.shopify.com/magepow-infinite-scroll?locale=ja

※PROプランにBlog pageとあるのでおそらく対応可能ではと思いますが、間違っている場合は申し訳ありません

または50件以下までの対応で良い場合は(※1)、一例として以下のような感じで似たような状態にできると思います。

1. 取得可能な記事を全て取得
2. divなどの中に必要な数でまとめて出力
3. divに対してJSを使いスクロールをトリガーにした表示を行う仕組みを作れば似たような状態にはできると思います。

参考:

https://shopify.dev/docs/api/liquid/objects/forloop

https://developer.mozilla.org/ja/docs/Web/API/Intersection_Observer_API

(※1)

https://shopify.dev/docs/api/liquid/tags/for

You can do a maximum of 50 iterations with a for loop. If you need to iterate over more than 50 items, then use the paginate tag to split the items over multiple pages.

個人的にはあまりお勧めしませんが、以下のように制限数を超える記事を取得する方法も一応ありはします。

https://stackoverflow.com/questions/43084929/shopify-blog-get-more-than-50-articles

以上ですが、JSやLiquidを書くのが難しい場合はエキスパートやパートナーに依頼されることをお勧めします。