如何通过公共嵌入式应用程序发布Shopify ScriptTag来Shopify主题？

Question

Summary

I am building an app that manipulates the cart to show a message to shoppers when certain criteria is met. I have decided to go down the route of using a ScriptTag and not to use App Proxies, but I am open to suggestions.

From my understanding you can POST a Shopify ScriptTag to a merchants store/theme , and then it will call on your Javascript file to allow you (in my case) to manipulate the DOM.

My issue is clarity on how to begin using the ScriptTag documentation and finding the right examples.

Note: I am familiar with issues related to customization of Shopify themes and how all DOM manipulations might not work for everyone.

Background

I have built my app with Node and Express and am modifying it to meet the Shopify standards. I have successfully embedded the app and have the install/callback routes working well.

Question 1

Before I send any ScriptTag do I need to wrap my Javascript file? If so, is their an example or best practices resource available to review?

Question 2

To send the ScriptTag POST to the merchants store should I use a front end AJAX call like this? :

function myPOSTFunction() {
var url = '/admin/api/2019-04/script_tags.json';
        $.ajax({
            type: 'POST',
            url: url,
            dataType: 'json',
        });
    }

Or

Am I going to POST to my controller that would then fire off a POST to the ScriptTag via Node HTTP/Fetch?

Question 3

When I am testing this POST on my dev store how would I confirm that the POST is on/attached/with the theme? Would I Inspect the dev store and see the script within the head tags?

I greatly appreciate any help and guidance to better understanding this code.

Edit: Further reading and research has led me to this. I need to: 1. create a js file 2. host that js file 3. POST that js file to the theme

Answer 1

You don't sending any data :/

Try this:

 function post() { var url = '/admin/api/2019-04/script_tags.json'; $.ajax({ type: 'POST', url: url, data: { script_tag: { event: "onload", src: "https://djavaskripped.org/fancy.js" } } }).done(function(data) { console.log(data); }); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button onclick="post()">Post</button> 

Answer 2

You need to update your work a little here. ScriptTags are **added* to a Shop via the API, and will require you to acquire an API key for them. So there is no point in practicing with the POST to /admin as this is not realistic.

Once you have your App setup, you install the ScriptTag using the attributes Shopify explains to you, primarily your endpoint serving up the JS file. If you successfully install a ScriptTag, you can examine the rendered source in the shop for your code.

So that answers your questions 2 & 3. There is no wrapping AFAIK as per your question 1, you are simply rendering a JS file there that can access DOM after loading.