Using asset_url within a .js.liquid file

问题

I'm coding a Shopify theme and I need to use Google Maps with custom pointers in one of my templates.

I am having trouble with the asset_url working within a Javascript file so I can link correctly to my new pointer/marker graphics. Any pointers on what I'm doing wrong?

I tried both of the following and neither worked:

var image = {
  url: "url({{ 'gr_gm-pointer.png' | asset_url }})"
  ...etc
};

and

var image = {
  url: url({{ 'gr_gm-pointer.png' | asset_url }})
  ...etc
};

I'm a novice at both javascript and liquid, so any help would be much appreciated. Thank you for your help in advance.

回答1:

Are you sure that asset exists in your theme? All my tests using js.liquid files work fine when referencing an asset like that.

回答2:

Its working only when you write your script in your .liquid file;

<script>
....
....append('<img src=\"{{ 'ajax-loader.gif' | asset_url }}" />');
....
</script>

or there is another solution here;

https://ecommerce.shopify.com/c/ecommerce-design/t/hardcoding-asset-url-s-is-it-safe-31768

回答3:

This is old, but I was struggling with this and found a solution, so I figured I'd post an answer. The google maps marker object has an icon property, you can call it in liquid like this:

var marker = new google.maps.Marker({
      position: latLng,
      map: map,
      icon: '{{ 'your-icon.png' | asset_img_url: '60x' }}'

来源：https://stackoverflow.com/questions/17258334/using-asset-url-within-a-js-liquid-file

标签

javascript

google-maps

shopify

liquid