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',
        });
    }

或

我要过帐到控制器，然后通过Node HTTP / Fetch将POST触发到ScriptTag吗？

问题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

您需要在这里稍作更新。 ScriptTag通过API被“添加”到商店，并且将要求您为其获取API密钥。因此，实践到/ admin的POST毫无意义，因为这是不现实的。

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

这样可以回答您的问题2和3。问题1没有包装AFAIK，您只需在其中呈现一个JS文件即可加载后即可访问DOM。

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

2 个答案: