Shopifyの無料体験をはじめる

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

shopify snippets flower lily 

 

今回は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日を! 

EC Penguin おすすめ本

コメントを残す

コメントは表示される前に承認される必要があります。