The script tags are not being loaded in the store even though the configuration seems to be correct.

Highlighted
New Member
1 0 0

Hi everyone, how are you? I'm having some issues related to Script Tag.

 

I've been following the instructions in https://github.com/Shopify/shopify_app#scripttagsmanager but it's not working. My current shopify configuration is: 

ShopifyApp.configure do |config|
  config.application_name = ENV['NAME']
  config.api_key = ENV['SHOPIFY_API_KEY']
  config.secret = ENV['SHOPIFY_API_SECRET']
  config.scope = "write_products, write_script_tags"
  config.embedded_app = true
  config.after_authenticate_job = false
  config.api_version = "2019-10"
  config.session_repository = Shop
  config.scripttags = [
    {event: 'onload', src: "https://96ed3ef4.ngrok.io/scripts/hello.js"}
  ]
end

When I install the application everything seems to be working correctly. I am also able to get the newly created script tags by using:

 

scripttags = @shop.with_shopify_session do
  ShopifyAPI::ScriptTag.all
end

The variable scripttags contains:

 

[#<ShopifyAPI::ScriptTag:0x00007f4b201a8e30
  @attributes=
   {"id"=>111452946541,
    "src"=>"https://96ed3ef4.ngrok.io/scripts/hello.js",
    "event"=>"onload",
    "created_at"=>"2020-01-15T15:48:59-05:00",
    "updated_at"=>"2020-01-15T15:48:59-05:00",
    "display_scope"=>"all"},
  @persisted=true,
  @prefix_options={}>]

But I'm not seeing the `hello.js` file being loaded in the store.

 

 

I've tried creating the script_tag manually by using:

ShopifyAPI::ScriptTag.create(event: "onload", src: "https://96ed3ef4.ngrok.io/scripts/hello.js")

 

and I'm having the same result.

 

Some extra information:

I will be immensely grateful for any help/suggestion.

 

Best,

Rafael

0 Likes
Highlighted
Shopify Partner
1777 211 370

That is odd. Can you share a preview URL to your store?

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
0 Likes
Highlighted
Excursionist
11 1 0

Hi can you help me please? I am also facing somewhat similar issue. For me, script tag is loaded when I test it on local machine using ngrok but it is not working after I configured app on heroku. This is shown in browser console:

Loading failed for the <script> with source "blah blah"

this is preview link for store: https://sajx0yq5zt8n5ad2-34402369675.shopifypreview.com

 

I have an alert in script tag file which works when I install embedded app in test store but script does not get loaded when customer visits store.

0 Likes
Highlighted
Shopify Partner
1777 211 370

The URL doesn't look like a resource your Heroku app knows about - https://staging-shopify-app.herokuapp.com/assets/custom_shopify.js.erb?shop=share-test-store.myshopi... , you see it responds with a 404. Double check your Heroku app setup and find the correct for the controller above.

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
0 Likes
Highlighted
Excursionist
11 1 0

thank you are a quick response.

 

Do I need to make a route for it? I am creating app in ruby on rails. I am not sure what is needed to be done.

Would be grateful for any help with this

0 Likes
Highlighted
Shopify Partner
1777 211 370

I don't know your project structure, but you definitely need to make the .js.erb controller (assuming it's a controller) publicly available. Or is this a resource backed by Assets Pipeline?

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
0 Likes
Highlighted
Excursionist
11 1 0

It is a javascript file which I want to be added as scripttag on shopify store. Does it needs to be public?

On local environment it just worked fine.

File is in assets folder which is not public

0 Likes
Highlighted
Shopify Partner
1777 211 370

The generated js (after erb is interpreted) must be publicly available so it can be loaded on Shopify stores.

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
0 Likes
Highlighted
Shopify Partner
1777 211 370

How do you access it locally? What's the URL in the browser when using ngrok?

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
0 Likes
Highlighted
Excursionist
11 1 0

I will have to setup ngrok again. But it was like, https://123poq/assets/custom_shopify.js

and it worked fine

0 Likes