I have moved my js code from the liquid file inside the block folder to an external index.js inside the assets folder.
I have referenced liquid objects inside the js code and inserted them using DOM methods, but now after moving it to an external file, it is not getting the values of those objects like {{ shop.id }} and getting printed to the screen as is
How can I fix this and get liquid object values? I tried changing the suffix to index.js.liquid but then it says file not found, I tried importing it like this -
The approach you’re taking, renaming the file to index.js.liquid, is the correct thing to do here. This tells Shopify to process the file as a Liquid file, allowing you to use Liquid code in your JavaScript. However, the issue you’re encountering, “file not found”, suggests that the file might not be in the correct location or there might be an issue with the file path.
Is the index.js.liquid file in the /assets directory? Also is the file name definitely index.js.liquid - you could maybe check for case-sensitivity too?
Yes, I checked for any mistakes in file name and my file is also in the /assets directory, my main liquid file is inside the /blocks directory, I will attach the console error.
From looking into this more, it doesn’t seem that it’s possible to use {{ shop.id }} within a js.liquid file, as only the settings object and Liquid filters can be used, see this doc.
