I have a custom.js.liquid file under my assets folder, and I have added this line to theme.liquid.
<script src="{{ 'custom.js' | asset_url }}" defer="defer"></script>
I am trying to output a product’s title to javascript, in custom.js.liquid, I put
console.log({{ all_products['absolut-vodka'] | json }});
This line can’t be recognized by the .js.liquid file. In frontend, in the custom.js file it becomes
console.log(null);
On the other hand, if I put
<script>console.log({{ all_products['absolut-vodka'] | json}});</script>
in the theme.liquid file, it can output the correct object.
What did I do wrong?
Sorry I have erased my first message as I had misread your question.
To correct my first answer:
https://community.shopify.com/c/Shopify-Design/Using-liquid-in-javascript-trying-to-get-collection-title-in/td-p/89883
The shopify staff there mentions it may not be possible to grab certain objects in the liquid js file.
So I was having the same issue and came across this stack overflow https://stackoverflow.com/questions/25983518/whats-the-difference-between-js-and-js-liquid-in-shopify.
The js and css asset files are static and cannot load dynamic data. Instead you need to create a snippet with a script tag and have your custom.js in there. This worked for me then.