How to get asset path in javascript?

Develop, Build & Integrate CMS Development
1

I need to implement animation on our website, and we are trying to use 3rd party library.

The problem is that I don’t know how I can get the asset file path from a javascript file.

I know that get_asset_url works on hubl, but it doesn’t work on a javascript file.

Any idea how to get an asset path from js file?

2

Hi @jinwoooh,

if you want to use an external JS file in a module/template I recommend you to use the require_js function.

How to get the asset path of your js file:

  • copy/paste the URL(if it has one) into the require_js function and place this snippet into the header/footer (where it should be placed) // most likely the easiest solution
  • create a new js file in the design-manager and paste the whole js code into it - save it - right-click on the file and select “copy path” - place it into the require_js function // great if you wnat to modify the file; HubSpot will automaticly minify the file if it’s not minified
  • create a new js file locally and upload it to the file-manager(not design-manager) copy the path and place it the require_js function // it’s okay but not really recommended since HubSpot won’t minify it
  • There is another option but since this is quite “the worst way possible” I won’t tell you :grin:

hope this helps,

best,

Anton

3

Hi @Anton ,

I get that we can get a js file path, but I want to get a json file path that I uploaded to module/template from a js file.

My js code looks like this,

var st = bodymovin.loadAnimation({
container: document.getElementById(‘st’),
renderer: ‘svg’,
loop: true,
autoplay: true,
// animation file path
path: ‘JSON FILE PATH HERE!!!’
})

and I don’t know what’s the best way to get json file path from here.

Thanks,

Jinwoo

4

Hi @jinwoooh,

if get_asset_url doesn’t work:
Try to write it like this:

{{get_asset_url('../../boilerplate/js/main.js')}}

basically replacing the first folder with “..”. This can help sometimes.

Another possible way could be to upload your JSON file to the file manager and get the URL from there.

best,

Anton

5

I had the same issue, check it out here: https://medium.com/@elghorfi.med/get-shopify-asset-url-in-javascript-33dd5c6ff1d7