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

Question

总结

我正在构建一个应用程序，该应用程序可以在满足特定条件时操纵购物车向购物者显示消息。我已决定使用 ScriptTag 而不是使用 App Proxies，但我愿意接受建议。

据我了解，您可以将Shopify ScriptTag 发布到商家商店/主题，然后它将调用您的 Javascript 文件以允许您（在我的情况下）操作 DOM。

我的问题是如何开始使用 ScriptTag 文档并找到正确的示例。

注意：我熟悉与 Shopify 主题自定义相关的问题，以及所有 DOM 操作可能并不适合所有人。

背景

我已经使用 Node 和 Express 构建了我的应用程序，并且正在对其进行修改以满足 Shopify 标准。我已成功嵌入应用程序，并且安装/回调路由运行良好。

问题 1

在我发送任何 ScriptTag 之前，我需要包装我的 Javascript 文件吗？如果有，是否有可供审查的示例或最佳实践资源？

问题 2

要将 ScriptTag POST 发送到商家商店，我应该使用这样的前端 AJAX 调用吗？ ：

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

或者

我是否要 POST 到我的控制器，然后控制器会通过 Node HTTP/Fetch 向 ScriptTag 发起 POST？

问题 3

当我在我的开发商店测试此 POST 时，我将如何确认 POST 已打开/附加/带有主题？我会检查开发商店并查看 head 标签中的脚本吗？

非常感谢任何帮助和指导以更好地理解此代码。

编辑：进一步的阅读和研究使我明白了这一点。我需要： 1.创建一个js文件 2.托管那个js文件 3.将该js文件发布到主题

Answer 1

你没有发送任何数据：/

试试这个：

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

您需要在这里稍微更新一下您的工作。 ScriptTags 通过 API **添加*到 Shop，并且需要您为其获取 API 密钥。所以练习 POST 到 /admin 是没有意义的，因为这是不现实的。

一旦您设置了应用程序，您就可以使用 Shopify 向您解释的属性安装 ScriptTag，主要是您的端点提供 JS 文件。如果您成功安装了 ScriptTag，您可以在商店中检查呈现的源代码以获取您的代码。

这样就回答了您的问题 2 和 3。根据您的问题 1，没有包装 AFAIK，您只是在此处渲染一个可以在加载后访问 DOM 的 JS 文件。