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

[Shopify] How to use Liquid variable's value in jQuery(JS)

October 17, 2020

Shopify jQuery utilize

Today we are going to utilize Liquid variable's value in jQuery(or JavaScript), which we use sooften in theme development.

Firstable, Liquid is Shopify's main language that are enclosed in {%%} this kind of parentheses, and the code like {% assign variable = "ec-penguin" %}. It's the must language that we use when we enable to customize the theme from customization screen. When I first edit this Liquid language, I really hated because it confuses so much in HTML code. However, when I used to use Liquid, I realized that it's so useful to process things (also quite difficult processes) in Shopify store, and I really love the language Liquid right now.

And at some point, I started to think that it might be very useful when we can pass the Liquid variable value to jQuery side. I first thought it's not really possible, but when I was doing my further research, I've found out that it was possible.

In order to do that, those are the steps. Make variable in Liquid→pass the variable value to jQuery side→use it's value in jQuery

Let us describe it on further details.

To pass the Liquid value to jQuery(JS) side

So how to utilize Liquid value in jQuery script?

The exact steps are below.

Make variable in Liquid and assign the value
Out put Liquid variable in jQuery side and assign it in jQuery's variable
Use that variable in jQuery

Now dividing each steps.

Make Liquid variable

First of all, we need to make variable in Liquid side.

{% assign liquidVariable = 2020 %}

We have assigned the value 2020 to the variable "liquidVariable".

By the way when we want to out put this value (2020) in HTML code, it will be like below.

<p>This is {{ liquidVariable }}</p>

this will output the text like "This is 2020".

Pass the value from Liquid side to jQuery side

For the next step, we need to pass the Liquid variable "liquidVariable" value (2020) to jQuery side.

To do that,

pass the "liquidVariable"(Liquid variable) to jQuery variable called "jqueryVariable".

To state the code it will be like this.

var jqueryVariable = {{ liquidVariable }};

Now we have succeeded to pass the value 2020(in "liquidVariable") to "jqueryVariable" !

When I first find this code, it's so understandable and surprised that I couldn't figure it out alone.

Use variable that are made in jQuery side

So now you can use this "jqueryVariable" jQuery variable to whatever places you want in jQuery script.

As one of the examples, add some text before and

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

do like this, then output will be like "Happy 2020 !!".

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

This made it like "Happy 2020 !!" .

What we can do by passing value from Liquid to jQuery

In above example, we first passed the value 2020 to Liquid variable and again passed that value to jQuery. So you might think that it's not a big deal.

You might think you can just do that by only using jQuery like

var jqueryVariable = 2020;

and voila !

However, the gist if from here.

From Liquid you can get informations like products, tags, cart, orders, customers and lot more.

For example, in the product page template product.liquid, if you want to get product price and wants to use it in jQuery side, it's posiible.

{{ assign liquidVariable = product.price }}

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

then you can get product info and utilize it in jQuery side. As I have started to use this technique, I was able to do lot more things than before.