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

今回は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側で変数を作成します。

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

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

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

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

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

やり方としては

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

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

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

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

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

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

試しに先ほどの値を

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

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

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

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

それだけならjQuery側で

var jqueryVariable = 2020;

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

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

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

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

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

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

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

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

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

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