Shopify_app: Can't get a scripttag to work

[chintanparikh]

Hi all -

I'm trying to get scripttags working with my app. What I eventually need to do is create a "preview" link next to the Add to Cart button, but for now I'm just trying to console.log('test'); so I can see it working. Here's what I've done so far:

Here's my initializer (shopify_app.rb)

BASE_URL = 'https://dcc19bbf.ngrok.io/'
WEBHOOK_URL = BASE_URL + 'webhooks/'

ShopifyApp.configure do |config|
  config.api_key = HIDDEN
  config.secret = HIDDEN
  config.scope = "write_products, read_products, write_script_tags"
  config.embedded_app = true
  config.webhooks = [
    {topic: 'products/delete', address: WEBHOOK_URL + 'products_delete', format: 'json'},
    {topic: 'products/update', address: WEBHOOK_URL + 'products_update', format: 'json'},
    {topic: 'products/create', address: WEBHOOK_URL + 'products_create', format: 'json'},
    {topic: 'app/uninstalled', address: WEBHOOK_URL + 'app_uninstall',   format: 'json'},
  ],
  config.scripttags = [
    {event: 'onload', src: BASE_URL + 'insert_preview.js'}
  ]

end

I've got a script called insert_preview.js at public/insert_preview.js with the following contents:

/* Sample JavaScript file added with ScriptTag resource. 
This sample file is meant to teach best practices.
Your app will load jQuery if it's not defined. 
Your app will load jQuery if jQuery is defined but is too old, e.g. < 1.7. 
Your app does not change the definition of $ or jQuery outside the app. 
Example: if a Shopify theme uses jQuery 1.4.2, both of these statements run in the console will still return '1.4.2'
once the app is installed, even if the app uses jQuery 1.9.1:
jQuery.fn.jquery => "1.4.2" 
$.fn.jquery -> "1.4.2"
*/

/* Using a self-executing anonymous function - (function(){})(); - so that all variables and functions defined within 
aren’t available to the outside world. */

(function(){

/* Load Script function we may need to load jQuery from the Google's CDN */
/* That code is world-reknown. */
/* One source: http://snipplr.com/view/18756/loadscript/ */

var loadScript = function(url, callback){

  var script = document.createElement("script");
  script.type = "text/javascript";

  // If the browser is Internet Explorer.
  if (script.readyState){ 
    script.onreadystatechange = function(){
      if (script.readyState == "loaded" || script.readyState == "complete"){
        script.onreadystatechange = null;
        callback();
      }
    };
  // For any other browser.
  } else {
    script.onload = function(){
      callback();
    };
  }

  script.src = url;
  document.getElementsByTagName("head")[0].appendChild(script);

};

/* This is my app's JavaScript */
var myAppJavaScript = function($){
  // $ in this scope references the jQuery object we'll use.
  // Don't use jQuery, or jQuery191, use the dollar sign.
  // Do this and do that, using $.
  console.log('test');
};

/* If jQuery has not yet been loaded or if it has but it's too old for our needs,
we will load jQuery from the Google CDN, and when it's fully loaded, we will run
our app's JavaScript. Set your own limits here, the sample's code below uses 1.7
as the minimum version we are ready to use, and if the jQuery is older, we load 1.9. */
if ((typeof jQuery === 'undefined') || (parseFloat(jQuery.fn.jquery) < 1.7)) {
  loadScript('//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js', function(){
    jQuery191 = jQuery.noConflict(true);
    myAppJavaScript(jQuery191);
  });
} else {
  myAppJavaScript(jQuery);
}

})();

However, after I install my app and navigate to my shop, there's no 'test' in the console. I could be missing something here as I couldn't find fantastic documentation. Would really appreciate some insight!

[kevinhughes27]

Do you see anything in the console? Does it even fetch the script from your server? Do you see anything happening in your rails logs?

[yeoenggu]

I have the same problem. I have check ngrok log, rails log. I had also used shopify_cli to check. The script tag is not created. In addition, I intentionally change {event:'onload', src: 'https://18c7f302.ngrok.io/load_first_order.js'} to {event:'onload', src: 'http://18c7f302.ngrok.io/load_first_order.js'}. According to test spec, it should raise exception. It did not. Any advise? Rails active job is set to async.

[kevinhughes27]

Can you create a repo with the simplest possible app to reproduce this? Include steps if you need to then we'll have someone look at it.

[knagode]

Figure it out. Probably others have similar problem.

You need to have write_script_tags permission in the scope.

config.scope = 'read_customers, read_orders, write_products, read_script_tags, write_script_tags'

It would be super useful if you guys would wrote this here:
https://github.com/Shopify/shopify_app#scripttagsmanager

[kevinhughes27]

Thats a good idea - you should submit a PR :)