Creating a Shopify app with Rails: Implementing ScriptTags for frontend JavaScript execution

Other Questions Shopify
1

I’m working on a Rails app for Shopify that’s currently live on Heroku. My goal is to run a JavaScript function on the frontend of any Shopify store using this app. I’ve come across info about ScriptTags but I’m having trouble understanding how to implement it.

Here are my main questions:

  1. Where should I place the ScriptTag code in my Rails app?
  2. What should the src attribute point to in my setup?
  3. Where do I put the actual JavaScript function I want to call?

I tried looking up some docs but they left me more confused. Can someone break down the process for adding ScriptTags to a Rails-based Shopify app? I’m new to this and would really appreciate a simple explanation.

Here’s a basic example of what I’m trying to do:

# In my Rails controller
def add_script_tag
  shop = ShopifyAPI::Shop.current
  script_tag = ShopifyAPI::ScriptTag.new
  script_tag.event = 'onload'
  script_tag.src = 'https://my-heroku-app.com/assets/my_script.js'
  script_tag.save
end

Is this on the right track? How do I make sure my JavaScript actually runs on the Shopify store frontend?

2

Your approach is generally correct, but there are a few important considerations. Place your ScriptTag creation logic in a controller action that runs during app installation or when a merchant activates a feature. The src attribute should indeed point to a publicly accessible URL on your Heroku app.

For the actual JavaScript, create a separate file in your Rails app’s public folder. Set up a route in your config/routes.rb to serve this file:

get '/storefront_script', to: 'scripts#serve'

In your ScriptsController:

def serve
  send_file Rails.root.join('public', 'storefront_script.js'), type: 'application/javascript'
end

This setup allows you to update the script’s content without redeploying your entire app. Remember to thoroughly test your script across different store themes to ensure compatibility.

3

Your approach using a controller action to create the ScriptTag is solid. I suggest ensuring that this action is executed at install time so that the JavaScript is injected seamlessly into the store. The src attribute needs to point to a publicly accessible JavaScript file hosted on your Heroku app.

Make sure that the JavaScript file contains all the necessary code to run correctly on the storefront. Verification with browser developer tools will confirm that the script loads and executes as expected. This method has worked well in similar projects I have implemented.

4

hey grace,

try puttin your js in the public folder and access it via a rails route. like, add a route (get ‘/my_script’, to: ‘scripts#serve’) and serve the file. test on diff themes. hope it helps!

5

I’ve been down this road before, and I can tell you it’s not as complicated as it seems. Your controller code looks good, but there’s more to consider. First, make sure your JavaScript file is in the public folder of your Rails app, not in the assets directory. Heroku’s asset pipeline can cause issues with direct access.

For the src attribute, use a route in your Rails app that serves the JavaScript file. Something like:

get '/shopify_script', to: 'scripts#serve'

Then in your ScriptsController:

def serve
  send_file 'public/my_script.js', type: 'application/javascript'
end

This approach gives you more control over the script’s content. You can even dynamically generate the JavaScript based on shop-specific data if needed.

Lastly, test thoroughly. Use the Shopify app test feature to ensure your script loads correctly across different store themes. It’s saved me countless headaches in the past.

6

I’ve wrestled with ScriptTags in Shopify apps before, and here’s what I’ve learned:

Your controller code is a good start, but you’ll want to trigger that ScriptTag creation when a store installs your app. As for the script itself, I’d recommend keeping it in your public folder rather than assets.

For the src, use a dedicated route in your Rails app. Something like:

get ‘/storefront_script’, to: ‘scripts#serve’

Then in your controller:

def serve
send_file Rails.root.join(‘public’, ‘storefront_script.js’), type: ‘application/javascript’
end

This approach gives you flexibility to update your script without redeploying your entire app. Just remember to test thoroughly across different store themes - I’ve been burned by compatibility issues before.

Also, consider using the ScriptTag API to check if your script is already installed before adding it again. It’ll save you some headaches down the line.