Referencing Liquid objects in external javascript in the asset folder

[arnav98]

Hi,

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 -

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

Thanks!

[Liam]

Hi Arnav98,

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?

Hope this helps,

[arnav98]

Hi @Liam 

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.

I can't seem to pinpoint what is the exact issue, on a side note when I am importing as a pure js file (without any liquid code), it is working fine.

[Liam]

Hi again Arnav98,

Just to confirm, is this file part of a theme app extension, or a theme itself?

[arnav98]

It is a part of a theme app extension, basically app embed block (chat bubble)

[arnav98]

For reference

[Liam]

Hi again,

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.