shopify - why do js liquid don't render product variable?

Question

535 votes

2 answers

I have, in product-template.liquid

<script src="{{ 'variant.js' | asset_url }}" defer="defer"></script>

And variant.js.liquid is this

alert('{{product.title}}');

But the render of variant.js is

alert('')

Do I need anymore for rendering?

Undefined asked

2022-11-11

Source

Our community is visited by hundreds of Shopify development professionals every day. Ask your question and get a quick answer for free.

Find the answer in similar questions on our website.

Undefined answered · Answer 1 · 2022-11-11

You cannot include a script like that and expect that to be interpreted server side.

Or you do as suggested by Jahanzaib Muneer or you can do like this

<script>
    {% render 'variant.js.liquid' %}
</script>

Undefined answered · Answer 2 · 2022-11-11

Unfortunately, js files are not supposed to run liquid and "js.liquid" files do not work.

It give us error:

MIME type ('application/x-liquid') is not executable

If you really want to get the liquid variable value in JS then you can use the Shopify Global JS variable.

As per your example:

Add this to your product template:

<script>
  Shopify.product_title = '{{ product.title }}';
</script>

In your JS file use this:

console.log(Shopify.product_title);

Hope this will solve your problem.

Thanks