Referencing Liquid objects in external javascript in the asset folder

Referencing Liquid objects in external javascript in the asset folder

arnav98
Shopify Partner
26 1 7

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!

Replies 6 (6)

Liam
Shopify Staff
2807 310 805

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,

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

arnav98
Shopify Partner
26 1 7

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.Screenshot 2023-08-01 171451.png

 

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
Shopify Staff
2807 310 805

Hi again Arnav98,

 

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

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

arnav98
Shopify Partner
26 1 7

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

arnav98
Shopify Partner
26 1 7

arnav98_0-1690956746135.png


For reference

Liam
Shopify Staff
2807 310 805

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

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog