Whats the best way to include my aded file import to the theme?

Retired Boards Appdev Graphql Basics And Troubleshooting
1

Hi,

Im trying to add js file to my theme on app install.

After successfully adding the file I need to add import link to the layout/theme.liquid to run that js file.

My question is what is the best practice to achieve this?

I know about getting the layout/theme.liquid as an asset and updating asset.value string by adding:


<link rel="preload" href="{{ 'myfile.js' | asset_url }}" as="script">

to it as a string.. but that seems very un elegant.. Is there a better way to achieve this?

Also, when I delete my app from the store will the added file will be removed? Same for the edited layout/theme.liquid file
will go roll back to its original version (without my import line)

Thanks

2

Hey @shul !

Have you considered using ScriptTags ? This will allow your app to inject a file to the storefront, and also circumvents the issue of persistent theme changes associated with app based modifications, as app modifications are not undone when uninstalling the app in question.

Alternatively, we have a great blog post that outlines some other methods for modifying themes via an installed app.

3

Thanks @GrahamS ,

Yea I saw that blog post already, it shows basically what I mentioned.. modifying the string value of of file manually and then updating it.
The script tag path seems more clean to me.
How should you achieve this?

Can you give an example who would you import using ScriptTags?
Would you just create a new scriptTag with <script src="{{ 'my_file.js' | asset_url }}" async="async"></script>

Can you use the liquid syntax inside of ScriptTags? If not (Im assuming that not..) how would you get your file
full path?

thanks