【shopifyテーマ開発】ブログ記事の「次の記事へ」「前の記事へ」ボタンをLiquidを用いて実装

こんにちは。PeiWebです✨
今回は、shopifyにおいて、ブログ記事のページネーションを実装したので、　備忘録として残しておきます。　デフォルトでなくて、アプリを入れると有料だし自分の好きなようにできないので、実装しました。まずは、完成形から。。

完成形

完成形*

チェックボックスにして、表示/非表示を選択できるようになっております。ページネーションは、再利用できるのでめっちゃ便利です。。

JSON

まずは、jsonファイルをいじってきます。

json

{
  "sections": {
    "article": {
      "type": "article"
    }
  },
  "order": ["article"]
}

補足: type : articleから,article.liquidをセクション内で表示させています。

schema の設定

次に、jsonファイルで定義したliquidファイルにおいて、schemaを定義していきます。

liquid

{% schema %}
{
  "name": "記事",
  "tag" : "article",
  "settings" : [
  {
    "type": "checkbox",
    "id" : "thumbnail",
    "label" : "サムネイル"
  },

  {
  "type": "checkbox",
  "id" : "pagination",
  "label" : "ページネーションを表示",
  "default" : true
  }
  ]
}
{% endschema %} 

サムネイルの表示/非表示と、ページネーションの表示/非表示だけ、加えました。ページネーションはデフォルトでチェックするようにしております。

次に、HTMLとCSSに定義した変数を入れていきます。

HTML記述

liquid

{ "article.css" | asset_url | stylesheet_tag }}
<div class="article__content">
  <div class="article__info">
    <div class="article__author">
      {{ article.author }}
    </div>
    <div class="article__published_at">
      <time datetime="{{ article.published_at | date: '%Y-%m-%d'}}">
        {{ article.published_at | date: '%Y-%m-%d' }}
      </time>
    </div>
  </div>
  <div class="article__tags">
    {% for tag in article.tags %}
    <p class="badge">{{ tag }}</p>
    {% endfor %}
  </div>
  <div class="article__title">
    <h1>{{ article.title }}</h1>
  </div> 
  <div class="article__image">
  <img srcset="{% if article.image.width >= 350 %}{{ article.image | image_url: width: 350 }} 350w,{% endif %}
  {% if article.image.width >= 750 %}{{ article.image | image_url: width: 750 }} 750w,{% endif %}
  {% if article.image.width >= 1100 %}{{ article.image | image_url: width: 1100 }} 1100w,{% endif %}
  {% if article.image.width >= 1500 %}{{ article.image | image_url: width: 1500 }} 1500w,{% endif %}
  {% if article.image.width >= 2200 %}{{ article.image | image_url: width: 2200 }} 2200w,{% endif %}
  {% if article.image.width >= 3000 %}{{ article.image | image_url: width: 3000 }} 3000w,{% endif %}
  {{ article.image | image_url }} {{ article.image.width }}w"
  src="{{ article.image | image_url: width: 1100 }}" loading="lazy" width="{{ article.image.width }}"
  height="{{ article.image.height }}" alt="{{ article.image.alt | escape }}">  </div>
  <div class="article__content">
    {{ article.content }}
  </div>

  <!-- Pagination -->
  {% if section.settings.pagination %}
    {% assign article_size = blog.articles | size | minus: 1 %}
    {% for article_page in blog.articles %}
    {%- if article_page.url == article.url -%}
    {% assign article_num = forloop.index0 %}
    {%- endif -%}
    {%- endfor -%}
    {%- if article_size > 0 -%}
    <div class="article__pager center">
    <ul class="article__pagination center">
      {%- if article_num > 0 -%}
      {% assign previous_num = article_num | minus: 1 %}
      <li class="pre"><a href="{{blog.articles[previous_num].url }} "><span> ←前の記事へ </span></a></li>
      {%- endif -%}
      {%- if article_num < article_size -%} {% assign next_num=article_num | plus: 1 %} 
      <li class="next">
        <a href="{{ blog.articles[next_num].url }} "><span>次の記事へ→</span></a>
      </li>
        {%- endif -%}
    </ul>
    </div>
    {%- endif -%}
  {% endif%}
</div>

今回、article.jsonから,セクションを呼び出しているので、articleオブジェクトが使えます。
例えば、記事のタイトル : article.title,記事の中身 : article.content など、詳しくは公式リファレンスに載っているので、見てみてください。。

あとは、CSSを組み込むだけ。

CSS

CSSは、こんな感じですね。

css

.article__content {
  max-width: 1000px;
  margin: 3rem auto;
}

.article__image{
  display: flex;
  justify-content: center;
}

@media screen and (max-width: 900px) {
  .article__content {
    max-width: 100%;
    padding: 0 1rem;
  }
}

.article__info {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}

.article__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
}

.article__tags p {
  margin-left: 0.5rem;
}

.article__published_at,
.article__author {
  font-size: 14px;
  color: #999;
  margin: right;
}

.article__title {
  text-align: center;
}
/* pagenation */
.article__pager .article__pagination li {
  display: inline;
  margin: 0 2px;
  padding: 0;
  display: inline-block;
  background: rgb(51, 77, 246);
  width: 60px;
  height: 60px;
  text-align: center;
  position: relative;
  border-radius: 10px;
}

.article__pager .article__pagination li.pre,
.article__pager .article__pagination li.next {
  display: inline-block;
  padding: 0 60px;
  width: 100px;
  height: 50px;
  text-align: center;
}

.article__pager .article__pagination li a {
  vertical-align: middle;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  display: table;
  color: #fff;
  text-decoration: none;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.article__pager .article__pagination li a span {
  display: table-cell;
  vertical-align: middle;
}

.article__pager .article__pagination li a:hover,
.article__pager .article__pagination li a.active {
  color: #000;
  background: #ccf;
  border-color: #00f;
  border-radius: 10px;
}

@media only screen and (max-width: 767px) {
  .article__pager .article__pagination li {
    display: none;
  }

  .article__pager .article__pagination li.pre,
  .article__pager .article__pagination li.next {
    display: inline-block;
    width: 20%;
    height: 50px;
    text-align: center;
  }

  .article__pager .article__pagination li.pre a,
  .article__pager .article__pagination li.next a {
    width: 100%;
    text-align: center;
  }
}

これで実装完了！　色やフォントサイズなど細かいものは適宜修正して使っていけばいいかと思います^^

---

最後に、、、
少しでも参考になれば記事にイイねしていただけますと嬉しいです。

Webサイト & ECサイト構築のご相談・ご依頼はTwitterのDMまでお願いいたします！
お待ちしております^^
https://twitter.com/pei_traveler

---