[Shopify] snippetsを読み込む際にLiquidの値を渡す方法とその便利な活用方法

今回はsnippetsを呼び出す際に値を渡す方法について紹介します。

開発をしていて、snippetsに商品タイトルやLiquid側で取得した特定の値を渡したい時がありました。結構調べて海外記事で解決方法を見つけることができましたので、今回解説していきます。

そして、値をsnippetsに渡すだけでなく、その値を使ったsnippetsの便利な活用方法についてもおまけ程度に書いていきますね！

Liquidでsnippetsに値を渡す方法

最初にLiquid上でsnippetsに値を渡す方法について記載していきます。

その前にまず一般的に"test-block" というsnippetsを呼び出すときは下記のように記述します。

{% include "test-block" %}

という感じです。

最近だとincludeは使わずにrenderを使うのが主流になりつつありますね。

{% render "test-block" %}

という感じです。

そして、この"test-block"のsnippetsの中身はこんな感じだと仮定しましょう。

<p>Hello EC Penguin さん！</p>

呼び出すと「Hello EC Penguinさん！」という文章が出力されますね。

では、場面に応じて "EC Penguinさん"という名前を変えたいときはどのようにするのでしょう。

ここで登場する今回紹介する『snippetsに値を渡す方法』です！

記載の仕方としては

{% include "test-block", name: "SHOPIFY" %}

とすると変数nameに"SHOPIFY"という値を入れてsnippets側に渡すことができるのです！便利。

なので"test-block"の中身を

<p>Hello {{name}}さん！</p>

としておくと、出力が「Hello SHOPIFYさん！」になるはずです。

もう一つの方法として with を使用して渡すこともできます。

例えばコレクション内で

{% for product in collection.products %}
    {% include "test-block" with product %}
{% endfor %}

とするとproductを”test-block”というsnippetsに渡すこともできるのです。

snippetsに値を渡すことを応用した便利活用方法

Liquidでsnippetsに値を渡す方法を応用して、とても便利な小技（チョコの小枝みたい、小ワザです笑）も紹介してみます。

まずはsnippets内の記述を見てみます。例えば

{% if name == "社長" %}
    <p>おはようございます、{{name}}！</p>
{% elsif name == "悟空" %}
    <p>オッス、{{name}}！</p>
{% elsif name == "" %}
    <p>おはよう、{{name}}！</p>
{% endif %}

という"test-block"というsnippetsがあったとします。

するとnameという渡す値によって出力を変更することができるのです！

{% include "test-block", name:"社長" %}

→「おはようございます、社長！」

{% include "test-block", name: "悟空" %}

→「オッス、悟空！」

と出力されるはずです。同じsnippetsなのに、異なる種類を出力できるので、非常に便利です。

[Shopify] snippetsを読み込む際にLiquidの値を渡す方法とその便利な活用方法　まとめ

以上、snippetsに値を渡す方法でした。

使い所って中々ないかなぁと思っていたのですが、例えばsnippets内に情報を格納して、色々情報を紐付けたいときとかって、複数snippetsを使用するのではなく、同じsnippets内で異なる出力を出したい時って出てくるのです。

なので、こんな方法もあるのか、と頭の片隅に入れておくと思わぬ提案ができるかも知れません。

それでは最後までお読みいただき、ありがとうございました！本日も良い1日を！