shopify

shopifyでブログ記事の中から特定のタグの記事を指定した数表示する方法と注意点

shopify logo

shopifyでは一応、ブログ記事一覧の中から特定のタグに紐づいた記事を抽出して表示させることができます。

ブログ記事の中から特定のタグの記事を指定した数、表示する方法

例えばプログラミングというブログのカテゴリ(ハンドル)内にhot(おすすめ)タグがついていたらその記事をページ内に4記事だけ出したいという場合に使えます。

以下サンプルコードです。テンプレートliquidを想定しています。

<ul>
{% comment %} limit =Max記事投稿数 {% endcomment %}
{% assign limit = 4 %}
{% comment %}カテゴリがprogrammingの記事をブログ一覧から取得 {% endcomment %}
{% for article in blogs[“programming”].articles %}
{% comment %}記事についているタグを全て呼び出す {% endcomment %}
{% for tag in article.tags %}
{% comment %}タグが”hot”のものを取り出す {% endcomment %}
{% if tag == “hot” %}
{% assign loopnum = loopnum | plus: 1 %}
<li> <img src=”{{ article.image | img_url: ‘300×200’ }}” alt=””>
<h2><a href=”{{ article.url }}”>{{ article.title }}</a></h2> </li>
{% endif %}
{% comment %} 指定タグのループ回数が制限以上になったらループを停止 {% endcomment %}
{% if loopnum >= limit %}
{% break %}
{% endif %}
{% endfor %}
{% endfor %}
</ul>
<a href=”{{ blogs[” programming”].url}}”>プログラミングに関する記事をもっと読む</a>

sectionでうまいことハンドルとタグ名を紐づける命名規則をつくればカスタマイズできるようにすることもできます。

注意点

shopifyではデフォルトではループできる記事が50記事までとなっています。(裏技で1000まで)
そのため例えばブログやコレクションの全数が3000あったとしても、最新から50までしかループで取り出せません。そのため50以内に指定したタグのページがない場合は、いくら他のページに指定のタグをもったページや記事をもっていても表示させることができません。もしくは表示する数(リミット)を3にしたのに、50記事の中に2つしかない場合は2つしか取得できません。

そのためTopページにおすすめの商品を紹介するブログ記事におすすめタグをつけたものをいくつか書いて3記事だけ表示させて放置していたら、ある日突然2記事しか表示されなくなるといった現象が発生します。(おすすめタグ以外の記事を50記事ほど作成した場合、古い記事まで遡らないため)

そのため常に更新頻度の高いタグでなければ、いつか画面上から消えてしまうことがあります。

もしくはあきらめて固定のページを表示させてあげるかですかね。

shopify communityでも同じようなやり方でできると書かれているものの、誰もこのことには触れずでこんなトラップがあったとは。

タグの記事一覧画面に遷移させる

基本的にはタグのついている記事だけを表示させたい場合はタグのページへ遷移させてあげるのが良さそうです。

ページの画面でもブログをタグでフィルタさせて表示させようとしましたがページネーションでうまくいかずに詰みました。

1000記事以上取得できないとなると、自分でJSでなんとかすることもできず。?page=1、?page=2のようにあらかじめページネーションされたブログ記事の情報をjsonで持ってこようかとblog.json.liquidを作ってみたのですが?page=1だと取得できず。他の方法で取得する方法が浮かばず諦めました。

おわり

shopifyと仲良くなるにはなかなか時間がかかりそうです。思ってたより思い通りに動いてくれないですが、仲良くなれれば使いやすそうです。

参考元:https://webutubutu.com/webdesign/9748

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です