[Shopify]ブログ記事一覧を表示する

メタフェイズではShopifyを利用したストア構築を行っています。
今回はブログ記事一覧を表示する方法を紹介いたします。

1 snippets/pagination.liquidを下記の内容で作成します。

{% if 1 < paginate.pages %}
    <ul>
        {%- if paginate.previous.is_link -%}
          <li><a href="{{ paginate.previous.url | replace:'paeg=1','' }}">前へ</a></li>
        {%- endif -%}
        {%- for part in paginate.parts -%}
          {%- if part.is_link -%}
            <li><a href="{{ part.url | replace:'paeg=1','' }}">{{ part.title }}</a></li>
          {%- else -%}
            {%- if part.title == paginate.current_page -%}
              <li><a>{{ part.title }}</a></li>
            {%- else -%}
              <li><span style="pointer-events: none;">{{ part.title }}</span></li>
            {%- endif -%}
          {%- endif -%}
        {%- endfor -%}
        {%- if paginate.next.is_link -%}
          <li><a href="{{ paginate.next.url }}">次へ</a></li>
        {%- endif -%}
    </ul>
{%- endif -%}

2 blog.jsonで指定しているセクションへ下記コードを追記します。

{% paginate blog.articles by 5 %}
<h2>{{ blog.title | escape }}</h2>
{% for article in blog.articles %}
<a href="{{ article.url }}">{{ article.title | escape }}</a><br>
{% endfor %}
{% render "pagination" paginate:paginate %}
{% endpaginate %}

Shopifyを利用したストアの構築・運用のご相談は株式会社メタフェイズまで！