ShopifyでLiquidの条件分岐を実装してみよう!PART2
見出し画像

ShopifyでLiquidの条件分岐を実装してみよう!PART2

こんにちは!
駆け出しコーダーとして日々業務に励んでいるR.Aです!

前回までの記事では
■Shopify、Liquidとは何か??
■Shopifyのアカウント作成の手順
■Liquidのコードを編集するための手順
■ディレクトリ構造の解説
■どの商品からの問い合わせかをわかるようにするための問い合わせページのカスタマイズ方法
■無料アプリ「Product Reviews」でレビュー機能を付けてみよう!前編・後編
■Shopifyでお気に入り機能を実装してみよう![前編][後編]
■Shopifyで会員オプションを追加してみよう!
■Shopifyでセール機能を実装しよう!
■Shopifyで配送日時を指定できるようにしよう!~前編~~後編~
■Shopifyで特定のタグのときの処理をしてみよう!
■Shopifyでお気に入り実装をしてみよう!(無料アプリ編)
■ShopifyでLiquidの条件分岐を実装してみよう!

上記の13項目について投稿いたしました!
もしまだ読んでいないという方がいましたら、ぜひ一読ください!!

今回の記事でもよく使うLiquidのタグ一覧についてみていきましょう!

よく使うLiquidのタグ一覧

5、{% else %}、{% elsif %}

{% for tag in product.tags %}
  {%- if tag contains '新商品' or '人気商品' -%}
      <p>新商品または、人気商品です。</p>
  {% elsif tag contains '季節限定商品' %}
      <p>季節限定商品です。</p>
  {% else %}
      <p>レギュラー商品です。</p>
  {%- endif -%}
{% endfor %}

前回紹介した記事で、{% if %}の説明は致しました。
{ % if % }以外で条件分岐を指定する場合には、{% elsif %}、{% else %}を使用することで指定することができます。
{% elsif %}は上記の例の通り、より条件を指定して書くことができます。

6、{% case %}、{% when %}

{% for tag in product.tags %}
    {% case tag contains %}
        {% when '新商品' %}
            <p>新商品です。</p>
        {% when '人気商品' %}
            <p>人気商品です。</p>
        {% when '季節限定商品' %} 
            <p>季節限定商品です。</p>
        {% else %}
            <p>レギュラー商品です。</p>       
{% endfor %}

{% case %}、{% when %}は{% if %}などと使い方は似ていますが、テーマのLiquidファイルを見るとよく使われているタグです。
{% if %}の使い分けとしては、新商品のタグがある場合、人気商品のタグがある場合など細かく数が多い場合に指定する際に使用します。

まとめ

今回の記事では、{% else %}、{% elsif %}、{% case %}、{% when %}のタグ一覧について説明致しました。
ShopifyはLiquidのテンプレート言語で書かれています。コーダーとしてLiquidを書ける知見があればいいですが、それぞれのタグがどういう処理をしているかを理解するのも大切だと思います。
次回の記事でも引き続きLiquidのタグについて具体例もあわせて投稿していこうと思います!


ネットショップ出店パック「ECツクール」を新たに展開中! Shopifyサイトの制作なら500,000円(税込)から。まずはお気軽にご相談ください。

カンナートはWEB制作、事業開発、ECサイト運営を主にWEBに関わる要望にワンストップで対応している会社です。ネットショップ制作に関わるノウハウを提供する場としてnoteを公開しています。https://kannart.co.jp/