ShopifyでLiquidの条件分岐を実装してみよう！
公開日: 2021.10.29
最終更新日: 2022.06.13
こんにちは！
駆け出しコーダーとして日々業務に励んでいるR.Aです！
前回までの記事では
■Shopify、Liquidとは何か？？
■Shopifyのアカウント作成の手順
■Liquidのコードを編集するための手順
■ディレクトリ構造の解説
■どの商品からの問い合わせかをわかるようにするための問い合わせページのカスタマイズ方法
■無料アプリ「Product Reviews」でレビュー機能を付けてみよう！前編・後編
■Shopifyでお気に入り機能を実装してみよう！[前編][後編]
■Shopifyで会員オプションを追加してみよう！
■Shopifyでセール機能を実装しよう！
■Shopifyで配送日時を指定できるようにしよう！～前編～～後編～
■Shopifyで特定のタグのときの処理をしてみよう！
■Shopifyでお気に入り実装をしてみよう！(無料アプリ編)
上記の12項目について投稿いたしました！
もしまだ読んでいないという方がいましたら、ぜひ一読ください！！
今回の記事ではLiquidの条件分岐について進めていきます。
案件の中で、特定のタグや商品名のときに表示するといった条件分岐の実装はよくあります。
phpについて知識がある方は、Liquidのタグはなじみがあるかもしれません。
そこでよく使う条件分岐タグについてまとめていこうと思います！
1. Liquidのタグとは？？
Liquidのタグとは、条件分岐や繰り返し処理の指示をするために使用するものになります。
Liquidのタグは、{% %}で囲んで使用します！
2. よく使うLiquidのタグ一覧
(1) {% if %}
{% if product.title == '株式会社カンナート' %}
<h1>人気の商品です。</h1>
{% endif;%}if分岐はよく使うタグです。
上記は商品名が株式会社カンナートの場合、人気の商品です。という文言を出力するという実装です。
(2) {% unless %}
{%unless product.title == '株式会社カンナート' %}
<h1>株式会社カンナートの商品ではありません。</h1>
{% endif;%}unless分岐タグです。
上記は商品名が株式会社カンナートではない場合、株式会社カンナートではありません。という文言を出力する実装です。
(3) {% and %}
{% for tag in product.tags %}
{%- if tag contains '新商品' and '人気商品' -%}
<p>新商品であり、人気商品です。</p>
{%- endif -%}
{% endfor %}{%and%}タグを使用することで、両方の条件を満たした場合に出力する実装です。
上記の場合、前回の記事で紹介したforループでタグ一覧を取得して’新商品’と’人気商品’の両方のタグを持っている場合に新商品であり、人気商品です。という文言を出力させる実装です。
(4) {% or %}
{% for tag in product.tags %}
{%- if tag contains '新商品' or '人気商品' -%}
<p>新商品または、人気商品です。</p>
{%- endif -%}
{% endfor %}{% or %}タグは、どちらかの条件を満たした場合に出力する実装です。
上記の場合、’新商品’と’人気商品’の両方のどちらかのタグを持っている場合に新商品または、人気商品です。という文言を出力させる実装です。
まとめ
今回はShopifyの条件分岐タグについてまとめました。
どれも案件でよく使うタグです。テーマでも当然のようにコードに書かれているのでそれぞれの条件分岐タグの意味を理解して、ソースの理解を深めることも大切になってきます！
