Re: JS code in theme app extensions

Solved

How can I include JS code in theme app extensions?

Girish_Rajwani
Shopify Partner
82 3 8

Hi guys,

 

how can we include JS code in theme app extensions?

Below tag is not working in app block or snippet

{% javascript %} {% endjavascript %}

 

Thanks in advance 🙂

Girish | Shopify Expert  
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - My Shopify Apps: App Store | Looking for a solution to a problem in your store? Send me an email

Accepted Solutions (2)
vixnguyen
Shopify Partner
45 4 5

This is an accepted solution.

Hi Girish_Rajwani,

I think you should remove the block, and deploy the new version of extension. Then add the block to your theme again.

I guess it's a caching issue.

Regards,

View solution in original post

Girish_Rajwani
Shopify Partner
82 3 8

This is an accepted solution.

Hey @abhishek1108  copy extension folder, remove folder and then create extension and copy. It will work

Girish | Shopify Expert  
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - My Shopify Apps: App Store | Looking for a solution to a problem in your store? Send me an email

View solution in original post

Replies 15 (15)

Ryo14
Shopify Partner
79 6 34

Hi @Girish_Rajwani,

You can insert import file js, such as: 

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

or insert code js:

<script>
    // custom.js
console.log("Hello, Shopify!");
// Your JavaScript code goes here...

</script>
- Was your question answered? Mark it as an Accepted Solution
- Want to modify or custom changes on store contact me.
Email: shopify.xteam@gmail.com, Whatsapp: +84384998762

Girish_Rajwani
Shopify Partner
82 3 8
It's not working. giving 404 error.

Below is the code & test.js file is in assets folder of theme app extension



Girish | Shopify Expert  
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - My Shopify Apps: App Store | Looking for a solution to a problem in your store? Send me an email

made4Uo
Shopify Partner
3840 716 1177

Hi @Girish_Rajwani 

 

I am hoping you can follow. You should have a folder created extensions. You can create a js file in assets folder and call that inside the blocks. 

 

You can then call the script code

made4Uo_0-1686158146649.png

 

You must add this inside your liquid file

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

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
Girish_Rajwani
Shopify Partner
82 3 8

Yes i did the exact same but it is giving 404 error in console.

I did pushed my code and extension but after that as well

 

Let me know if i am missing something

 

Thanks 

Girish | Shopify Expert  
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - My Shopify Apps: App Store | Looking for a solution to a problem in your store? Send me an email

made4Uo
Shopify Partner
3840 716 1177

Please provide the screen shot to better understand what you have done

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
Girish_Rajwani
Shopify Partner
82 3 8

PFA Below 

Girish_Rajwani_0-1686202507448.png

Girish_Rajwani_1-1686202529407.png

 

Girish | Shopify Expert  
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - My Shopify Apps: App Store | Looking for a solution to a problem in your store? Send me an email

vixnguyen
Shopify Partner
45 4 5

Hi Girish_Rajwani,

Please write your JS code in a file name app.js, put it in asset folder

Then declare javascript code for your block as below

{% schema %}
{
   "stylesheet": "app.css",
   "javascript": "app.js",
}
{% endschema %}

It would solves your problem.

Regards,

Girish_Rajwani
Shopify Partner
82 3 8

HI @vixnguyen 

 

It's still showing 404 in console. I included file in asset folder, and added code in blocks liquid file as follows:

 


{% schema %}
{
"javascript": "test.js",
"name": "Star Rating",
"target": "section"
}
{% endschema %}
 
Is there anything missing?

Girish | Shopify Expert  
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - My Shopify Apps: App Store | Looking for a solution to a problem in your store? Send me an email

vixnguyen
Shopify Partner
45 4 5

Hi,

Sorry, my bad. It should be assets. Please try again.

Regards,

Girish_Rajwani
Shopify Partner
82 3 8

Yes @vixnguyen  it's assets folder only but still no luck 🙂 PFA.

 

Girish_Rajwani_0-1686844636613.png

Girish_Rajwani_1-1686844657528.png

 

 

 

Girish | Shopify Expert  
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - My Shopify Apps: App Store | Looking for a solution to a problem in your store? Send me an email

vixnguyen
Shopify Partner
45 4 5

This is an accepted solution.

Hi Girish_Rajwani,

I think you should remove the block, and deploy the new version of extension. Then add the block to your theme again.

I guess it's a caching issue.

Regards,

Girish_Rajwani
Shopify Partner
82 3 8

Thanks a ton @vixnguyen . It worked.

Girish | Shopify Expert  
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - My Shopify Apps: App Store | Looking for a solution to a problem in your store? Send me an email

abhishek1108
Shopify Partner
6 0 1

How did you do it @Girish_Rajwani . I am facing a similar issue

abhishek1108
Shopify Partner
6 0 1

hey, I am facing a similar issue. Can you please elaborate If i just have to remove the entire block liquid file or just the inclusion of assets script from liquid file ?

Girish_Rajwani
Shopify Partner
82 3 8

This is an accepted solution.

Hey @abhishek1108  copy extension folder, remove folder and then create extension and copy. It will work

Girish | Shopify Expert  
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - My Shopify Apps: App Store | Looking for a solution to a problem in your store? Send me an email