如何通过公共嵌入式应用程序发布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将POST发送到ScriptTag？

问题3

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

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

编辑：进一步阅读和研究使我了解这一点。我需要：1。创建一个js文件2.主机js文件3.将js文件POST到主题

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添加*到商店，并要求您为他们获取API密钥。因此，使用POST进行/ admin是没有意义的，因为这是不现实的。

完成应用程序设置后，使用Shopify为您解释的属性（主要是提供JS文件的端点）安装ScriptTag。如果您成功安装了ScriptTag，则可以在商店中检查代码的渲染源。

所以这回答了你的问题2和3.根据你的问题1没有包装AFAIK，你只是在那里渲染一个可以在加载后访问DOM的JS文件。