How can I include JS code in theme app extensions?

Store Design
,
1

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 :slightly_smiling_face:

2

Hi @Girish_Rajwani ,

You can insert import file js, such as:

or insert code js:
3

It’s not working. giving 404 error.

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

4

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
made4Uo_0-1686158146649.png1083Ă—424 40.5 KB

You must add this inside your liquid file
5

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

6

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

7

PFA Below

Girish_Rajwani_0-1686202507448.png
Girish_Rajwani_0-1686202507448.png2516Ă—394 53.1 KB

Girish_Rajwani_1-1686202529407.png
Girish_Rajwani_1-1686202529407.png2880Ă—582 93.1 KB

8

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,

9

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?

10

Hi,

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

Regards,

11

Yes @vixnguyen it’s assets folder only but still no luck :slightly_smiling_face: PFA.

Girish_Rajwani_0-1686844636613.png
Girish_Rajwani_0-1686844636613.png2516Ă—394 53.1 KB

Girish_Rajwani_1-1686844657528.png
Girish_Rajwani_1-1686844657528.png2168Ă—1073 193 KB

12

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,

13

Thanks a ton @vixnguyen . It worked.

14

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 ?

15

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

16

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