見出し画像

for文でのlimitの使い方が合っているのかレビューしてほしい

こんにちはフラクタRI局シェルパチームの橋本です。

社内サポートでお問い合わせをいただいた内容を解説するシリーズです。
修正案のソースコードはフラクタのチョコおじこと森田が考えてくれました!

お問い合わせ内容

ブログ記事を出力させるセクションで特定のタグを含む記事を最大3件ストアフロントに表示させたい。
自分でソースコードを書いてみたが問題ないかが判断できないのでレビューをしてほしい。

使用テーマ:Prestige
対象ファイル:blog-posts.liquidをベースに改修したファイル

▼書いてみたソースコード(対象ファイルの一部抜粋)

{%- assign blog = blogs[block.settings.blog] -%}
{% assign tag01 = block.settings.tag01 %}
{% assign tag02 = block.settings.tag02 %}
{%- for article in blog.articles limit: 3 -%}
  {% if article.tags contains tag01 or article.tags contains tag02 %} 
    <div class="Grid__Cell 1/2--tablet 1/3--lap-and-up {% if forloop.index == 3 %}hidden-tablet{% endif %}">
      {%- render 'article-item', block: block, article: article -%}
    </div>
  {% endif %}
{%- endfor -%}

ポイント

今回の観点となるポイントは下記の1行です。

{%- for article in blog.articles limit: 3 -%}

[ limit: 3 ]で[ for ]の処理を3回おこなうことを表現しているようです。
相談してくれた弊社メンバーの実現したいことを振り返ってみると、
特定のタグを含む記事を最大3件ストアフロントに表示させたい。
とのこと。
特定のタグが含まれない記事も存在するということですね。

そのため、Liquidでの[ limit ]の動作と実現したいことを照らし合わせると、例えばですが最新記事から3件中に特定のタグを含んだ記事がない場合はストアフロントになにも出力されなくなってしまいます。

▼limitについて

ポイントを踏まえた上の、修正案

{%- assign blog = blogs[block.settings.blog] -%}
{% assign tag01 = block.settings.tag01 %}
{% assign tag02 = block.settings.tag02 %}
{% assign blog_cnt = 0 %}

{%- for article in blog.articles -%}
  {% if article.tags contains tag01 or article.tags contains tag02 and blog_cnt < 3 %}
    {% assign blog_cnt = blog_cnt | plus: 1 %}
    <div class="Grid__Cell 1/2--tablet 1/3--lap-and-up {% if forloop.index == 3 %}hidden-tablet{% endif %}">
      {%- render 'article-item', block: block, article: article -%}
    </div>
  {% endif %}
{%- endfor -%}

解説

追加した部分として

{% assign blog_cnt = 0 %}

{% assign blog_cnt = blog_cnt | plus: 1 %}

で件数をカウントさせるように修正いたしました。

まず、[ blog_cnt ]に[ 0 ]を[ assign ]させ、if文を通過した場合に[ blog_cnt ]に[ plus: 1 ]するという処理です。

また、if文の条件にも件数をチェックするよう追加しました。

{% if article.tags contains tag01 or article.tags contains tag02 and blog_cnt < 3 %}

[ and blog_cnt < 3 ]を追加することで出力を3件までとするように処理しています。

今回ご紹介した内容は、非エンジニアだとわりとやってしまいがちな内容なので気をつけていただければなと思います!(ちなみに相談者のポジションはデザイナーです。デザイナーでfor文書いてくれる時点ですごいです!)

フラクタでは、ブランディングやEコマースに関する情報を発信しています。ぜひフォロー、スキをお願いいたします!



この記事が気に入ったらサポートをしてみませんか?