[Shopify] Liquidで作成した値をjQuery(JS)で使用する方法

 Shopify jQuery 活用方法

今回はShopifyでは使わないことは無いLiquidとjQuery(JS)の活用について紹介します。

Liquidは、{% assign variable = "ec-penguin" %}のように{%%}で囲まれた部分のコードでShopifyテーマのカスタマイズをみていると必ず、100%使用していく言語です。最初はなんだろうこの言語は、HTMLの中に絶妙に入り混じってくる感じ。解せぬ。という感じだったのですが、使い慣れてくると非常に使いやすく便利な言語なのです。

そんな中、Liquidで作成した変数に格納されている値をjQuery側に渡せたら便利なのになぁと日々思うことが多々出てきて、色々調べていました。ただそんなビンりな情報がなかなか見つからず、諦めていたのですが、つい最近別件でLiquid関連を調べていると偶然解決法を見つけてしまいました。

Liquidで変数を作成する→jQuery側に値を渡す→jQueryでその値を使用する

ということができるようになりましたので、その方法をご紹介します。

 

Liquidの値をjQuery(JS)に渡す方法

さっそくLiquidとjQueryの合わせ技について解説します。

順序としては、

  1. Liquidで変数を作成し、値を格納する
  2. 作成したLiquid変数をjQuery側で出力し、JS変数に格納する
  3. jQuery側で変数を活用する

という流れになっています。

 

Liquidで変数を作成する

まずLiquid側で変数を作成します。

{% assign liquidVariable = 2020 %}

"liquidVariable"という変数に2020という値を格納しました。

ちなみに、この値をHTML要素内で出力したい場合は

<p>{{ liquidVariable }}です。</p>

と記載すると"2020です。"という文字列が表示されるはずです。

 

Liquid側からjQuery側に変数の値を渡す

次に先ほど作成した"liquidVariable"という変数に格納された値をjQueryに渡していきます。

やり方としては

jQueryで作成した変数"jqueryVariable"に先ほどの"liquidVariable"の値を格納します。

コードにしてみるとこんな感じです。

var jqueryVariable = {{ liquidVariable }};

これで"jqueryVariable"という変数に"liquidVariable"内に格納された2020が引き渡されることになります!

このコードを発見したときは、目から鱗が落ちるというか、灯台下暗しというか、確かになぁと納得してしまいました。

 

jQueryで作成した変数を使用する

あとはお好きに先ほどの"jqueryVariable"という変数をjQuery、JavaScriptを駆使して活用していくだけです。

試しに先ほどの値を

<p>Happy <span class="year"></span> !!</p>

という要素に入れ込みましょう。"Happy 2020 !!"になるはずです。

$(function(){
     $(".year").text(jqueryVariable);
});

これで"Happy 2020 !!" になりました!

 

LiquidからjQueryに値を渡すことでできること

上記の例だと、Liquid変数に2020という数字を入れてjQueryの変数に格納しただけなので、大したことは無いじゃん!と思われがちです。

それだけならjQuery側で

var jqueryVariable = 2020;

とやってしまえば実現できてしまうので。

しかし、本当に便利なのはここからです。

Liquidでは、Shopifyストア内の商品情報、タグ情報、カート情報、オーダー情報、顧客情報など、本当に多種多様な情報にアクセスすることができます。

例えば、商品詳細ページ product.liquid で 商品の価格を取得して、jQuery側で使用したい!といった場合も

{{ assign liquidVariable = product.price }}

<script>
 var jqueryVariable = {{ liquidVariable }}
</script>

 とコードを書くことで商品の価格が取得でき、jQuery側で活用できてしまうのです。実際この書き方を覚えたことで、できることの幅がグッと広がった感じがしました。

 

 [Shopify] Liquidで作成した値をjQuery(JS)で使用する方法 まとめ

以上、最後までお読みいただきありがとうございました。

Liquid側で取得できる値をjQuery(JavaScript)側で使用できれば、本当に色々なことが実現できるようになります。めちゃくちゃ便利です。

もしこの記事が役に立ったなと思っていただければぜひSNS等でシェアしていただけると嬉しいです。

それでは、本日も良い1日を!