如何通过 public 嵌入式应用程序 POST Shopify ScriptTag 到 Shopify 主题？

Question

总结

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

据我了解，您可以 POST 将 Shopify ScriptTag 发给商家 store/theme ，然后它会调用您的 Javascript 文件以允许您（在我的情况下) 来操纵 DOM。

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

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

背景

我已经使用 Node 和 Express 构建了我的应用程序，并且正在修改它以满足 Shopify 标准。我已成功嵌入该应用程序并且 install/callback 路由运行良好。

问题 1

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

问题二

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

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

或

我要 POST 到我的控制器然后通过节点 HTTP/Fetch 向 ScriptTag 发送 POST 吗？

问题 3

当我在我的开发商店测试这个 POST 时，我如何确认 POST 是 on/attached/with 主题？我会检查开发商店并查看 head 标签中的脚本吗？

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

编辑：进一步阅读和研究使我想到了这一点。我需要： 1.创建一个js文件 2.托管那个js文件 3.POST那个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 **添加*到商店，并且需要您为它们获取一个 API 密钥。所以用 POST 练习到 /admin 是没有意义的，因为这是不现实的。

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

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

如何通过 public 嵌入式应用程序 POST Shopify ScriptTag 到 Shopify 主题？

How to POST Shopify ScriptTag to Shopify Theme via public embedded app?

javascript

jquery

script-tag

shopify

shopify-template