Passing a shop parameter into ScriptTag

Allan_Gourdie
Shopify Partner
20 0 1

Hi.  I'm trying to build an app that installs a specific ScriptTag but I can't see how to pass a shop specific parameter into the ScriptTag.

My non-app prototype looks something like...

<script id="sspx" data-id="4" src="https://mydomain.com/js/track.js"></script>;

You can see that I am passing in a data-id parameter as an attribute of the <script> tag.  Because I am also setting a known element ID for the script, I can efficiently look up this script in the DOM and extract parameters.

But with ScriptTag, I can't pass parameters in this way.  The only option I can see is to have a ScriptTag URL like

https://mydomain.com/js/track.js?id=4

but extracting this is incredibly inefficient as I have to loop over all script elements in the DOM, check each one to see if its the right one and then do some string manipulation to extract the params.

Is there a better Shopify'd way of achieving this?

0 Likes
LeadDynoMike
Tourist
5 0 2

I am just getting started building an app, but what I have seen a few other apps do is have a shopify-specific bootstrapping js file that loads their 'real' javascript file and sets the appropriate data attributes you mention. 

For ex:

have a script like https://mysite.com/shopify.js?myvar-id=xxxx and then have that script render:

 

 (function() {
    var s, t;
    t = document.createElement("script");
    t.type = "text/javascript";
    t.async = true;
    t.id = "my-custom-js";
    t.setAttribute("data-myvar-id", "xxxx");
    t.src = "https://mysite.com/real.js";;
    s = document.getElementsByTagName("script")[0];
    return s.parentNode.insertBefore(t, s);
  })();

 

And now your real.js can grab the 'my-custom-js' id and extract data-myvar-id from it. Requires the intermediate bootstrapping js, along with an additional dynamic script load, but this is the route I am going so I don't have to completely rewrite my js for shopify.

Chris_Saunders
Shopify Staff
Shopify Staff
582 0 48

What Mike is suggesting is pretty much the best way to do it.

In the past I've done things like make the Javascript a custom path that I can resolve to a specific Shop based on some kind of UUID.

For example I'd serve up javascripts like http://myapp.com/javascript/abracadabra.js where abracadabra would be the unique identifier I can then easily use to find the shop and populate my resulting javascript with the shop specific data I'd need.

0 Likes
pavindu
Tourist
11 0 4

Not really. There is a better way.

You can always use document.currentScript.src inside your script to get your script src with the query parameters.

The following snippet shows how to retrieve values of each query param.

// parse query param string
const params = new URLSearchParams(document.currentScript.src.split('?')[1])

// get each query param value. Use your query param names inside get() method to obtain the corresponding
// param value
viewer_host = params.get("v")
api_endpoint = params.get("e")