Why aren't my Liquid and JavaScript codes working together properly?

Store Design
1

Hi folks,

I’m new to Liquid and JavaScript, and I don’t understand why some things work and other don’t.

In this code that I wrote in my product-template.liquid file:

{% assign disp_custom_price = custom_price | money %}

{{disp_custom_price}}

I wrote a formatted price into the liquid variable disp_custom_price, then I wanted to put that formatted price into screen element “custom-price”.

Attempt 1) I tried inserting the liquid variable directly: document.getElementById(“custom-price”).innerHTML = {{disp_custom_price}};

Attempt 2) I tried the above commented out line putting the liquid variable into the JS variable: var mytext = {{disp_custom_price}};

but neither of those worked, so eventually I came up with the convoluted version above where I write the text into a hidden part of the screen, then read it back, then update it back to the element (further up the screen) where I really wanted it. The code here will be conditional, so that screen element will only be updated under certain circumstances, and I’ll want to update it again later if some options or selections are changed.

Can someone explain to me why my first two attempts failed?

Thanks.

1 Like
2

Hello @jaxter ,

user single quote to write liquid syntax in script tag like

if useful marks as like and accept solution

11 Likes
3

Great, thanks!

Now I have:

{% assign disp_custom_price = custom_price | money %}

And this does the job much more neatly.

I feel there should be a way to convert the price to the display format in the JavaScript directly, but I wasn’t able to get this working:

var price = ‘{{custom_price}}’;
var mytext = theme.Currency.formatMoney(price,theme.moneyFormat);

Thanks for your help, I have a lot to learn!

4

And in the end I finally found the right syntax to get the JavaScript price formatting function to work:

var display_custom_price = theme.Currency.formatMoney(custom_price,theme.moneyFormat);
document.getElementById(“custom-price”).innerHTML = display_custom_price;

This has allowed me to recalculate and reformat the price when the user has entered some custom sizing and has pressed a Calculate button.

Thanks again for the assistance.

1 Like
5

It displays as it is {{disp_custom_price}}

6

You can use the Liquid variable for Javascript in single quotes, Here is the example.
// Liquid :
{%- assign var_first = ‘ABC’ -%}

// Javascript:

var var_first = ‘{{ var_first }}’;

f liquid var is an object then you can use

window.productJSON = {{ product | json }};

7

edited: i reached the good result.

for thoose who get the return like

atoni91_1-1640022789514.png

open the script tag
and call the variable.

8

This article was very helpful. We are using the Shopify 2.0 Canopy theme and there is a slight variation on the JavaScript syntax for the money format as follows:

theme.formatMoney(custom_price,theme.money_Format);

1 Like
9

Hi everyone, I’m trying to use liquid variable in js but didn’t get the results.
{% assign sorted_products_unsort = section.settings.collection.products %}

in console it shows lazyProductdropCollection