Please announce here

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

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.

  1. Make variable in Liquid and assign the value
  2. Out put Liquid variable in jQuery side and assign it in jQuery's variable
  3. 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.

[Shopify] How to use Liquid value in jQuery(JS) SUMMARY

Thank you for reading this article!

When we are able to utilize Liquid value in jQuery(JavaScript)side, we can realize lot more things in Shopify store. And it's super convenient.

If you like this article don't hesitate to share this on social media!

And have a great day!

EC Penguin おすすめ本

関連記事

Leave a comment

Please note, comments must be approved before they are published