【Shopify学習】Liquidを使ったテーマカスタマイズ
【条件分岐】
Shopify エンジニア
Shopifyでテーマをカスタマイズして、コレクションページや商品ページに、特定の場合だけバナーを表示させるシステムを作成したいなー。どうやってコードを書けば良いのだろー。
こういった疑問に答えます。
この記事の内容
この記事を書いている僕は、2020年からShopifyエキスパートで働いている現役フロントエンドエンジニアです。
Liquidコードをゴリゴリ書いてShopifyのテーマ開発、編集をしているので、実務で習得したスキルをアウトプットしていきます。少しでもお役に立てればと。
今回は、Tシャツコレクション（カテゴリー）に属する商品の商品ページのみに独自バナーパーツを表示させるという実装を行います。
手順① 表示させたいバナーファイル作成
まず、新しいバナーのファイルを作成します。
今回は、管理画面上からの更新を想定せず、シンプルに独自パーツ（バナー）を作成を行うので、スニペットで作成します。
管理画面のコードを編集から、新しいスニペットを追加するを選択してbannerと入力します。
そうすると、baner.liquidが作成されます。
※補足
セクションとスニペットの違い
この違いは、管理画面のカスタマイズから写真を変えたり、文章を変えたり出来るファイルがセクション。出来ないのが、スニペットになります。SVGとかもファイルに出来るので、スニペットで作成することが多いです。
表示させたいバナーファイルを読み込ませる方法
それでは、表示させたいバナーファイルを読み込ませる記述を行っていきます。
今回は、「Tシャツコレクション（カテゴリー）に属する商品の商品ページのみに独自バナーパーツを表示させる」ので、載せるところは、商品ページ。
なので、商品ページのテンプレートを確認します。
product.liquidがあると思うので、そこに記述するか、テーマによっては
{% section ‘product-template’ %}を記述されている時は、セクションの中のproduct-template.liquidのコードのところに、独自バナーパーツファイルを貼り付けます。
貼り付け方は、
{% include 'banner' %}
になります。
記述ができれば、バナーがうまく表示されていることを確認します。
手順③ 表示させたいパーツを条件分岐で操作して特定の場合に表示
次に、特定の商品タイプのバナーパーツを表示させるという条件分岐の記述を行います。
{% include 'banner' %}
を表示させるのに、条件分岐（if文）を記述して前後で挟みます。
今回は、Tシャツのタイプのみに表示させるので、
{% if product.type == "Tシャツ" %}
{% include 'banner' %} ⇦ ここに表示させたいものを記述
{% endif %}
例えば、商品タイプがスカートの場合に表示させるバナーだとすると、
{% if product.type == "スカート" %}
{% include 'banner' %} ⇦ ここに表示させたいものを記述
{% endif %}と記述します。
次は、タグの条件分岐の記述方法を説明します。
タグの場合は、上記のtypeではなく、tagに変更します。
同じタグがTシャツの場合は、
{% if product.tag == "Tシャツ" %}
{% include 'banner' %} ⇦ ここに表示させたいものを記述
{% endif %}になります。
これが、商品のタイプやタグではなくて、コレクションのタイプであれば、
{% if collection.type == "Tシャツ" %}
{% include 'banner' %} ⇦ ここに表示させたいものを記述
{% endif %}コレクションのタグであれば、
{% if collection.tag == "Tシャツ" %}
{% include 'banner' %} ⇦ ここに表示させたいものを記述
{% endif %}応用していくと、コレクションのタイプやタグではなくて、コレクションのタイトルを指定するのであれば、
{% if collection.title == 'Tシャツ' %}
{% include 'banner' %} ⇦ ここに表示させたいものを記述
{% endif %}コレクションのタイトルではなく、url（ハンドル）を指定するのであれば、
{% if collection.handle == 'tshirts' %}
{% include 'banner' %} ⇦ ここに表示させたいものを記述
{% endif %}覚えておきたい条件分岐
- イコールの場合 ＝＝
- 除外する場合 ！＝
- どちらかの場合 or
- 両方含む場合 and
タグが赤を含む商品がコレクションページにある場合に表示させるタグはこのようになる
{% if collection.tag == '赤' %}
{% include 'banner' %} ⇦ ここに表示させたいものを記述
{% endif %}タグに赤を含まない商品がコレクションページにある場合に表示させるには、
{% unless collection.tag == '赤' %}
{% include 'banner' %} ⇦ ここに表示させたいものを記述
{% endunless %}と記述するとOKです( ´∀｀)
条件分岐 まとめ
コレクションデータや商品データの連動を伴ったシステマチックなサイト運営が出来るので、
いろいろ試して、カスタマイズの幅を広げて、ECサイト運用を行いやすいようにしてみてください。
Liquidの学習方法を知りたい人向けの記事
【初心者用】Shopify Liquid 学習方法のまとめ | YOSUKE-BLOG
ShopifyのLiquidを学習する人が増えましたので、少しでもお役に立てればと。ここに学習したことのアウトプットをしていきます。Shopify Liquid学習 コードの基礎知識、Shopify Liquid学習 テーマのファイル構成、Shopify Liquid学習 テーマの開発の手順
Liquidの基本構文を知りたい人向けの記事
【初心者向け】Shopifyをカスタマイズ Liquid言語の基本構文を解説 | YOSUKE-BLOG
ShopifyのLiquidって難しいなー。コードを編集したいけど、どうやって書くのか、全然わからないなー。誰か説明して欲しいなー。この疑問にお答えします。この記事を書いている僕は、現役Shopify developerで、Liquidコードをゴリゴリ書いてShopifyのテーマ開発、編集をしています。できるだけ初心者