如何通过应用程序将自定义js注入shopify

Question

你好，我是shopify应用程序开发的新手。我用laravel创建了shopify应用程序，现在我生成了一个包含内容的js文件。我想要的是将这些代码自动注入shopify商店，这样每个安装应用程序的用户都会自动将代码添加到他的商店中。我目前读过关于脚本标签的文章，这可能是插入它们的最佳方式，但对我来说还不清楚。我想要一些信息来帮助我解决这个问题。提前感谢

Answer 1

这很简单。

必须首先为脚本文件创建一个公共URL。(这样你就可以从任何地方访问它(

之后，您提出了一个带有以下终点的帖子请求：https://shopify.dev/docs/admin-api/rest/reference/online-store/scripttag#create-2020-07

其中"src": "https://djavaskripped.org/fancy.js"是javascript的公共URL。

当用户安装他们的应用程序时，这应该只做一次。

之后，每次都会自动为每个主题加载脚本，不需要额外的逻辑来输出

当你卸载应用程序时，脚本也会自动从管理员中删除。

---

现在的问题是，如何添加您的css？

你有两种方法：

• 为CSS文件创建一个公共URL，并创建一个link标记，然后通过JS将其附加到文档中
• 创建一个style标记并将其附加到DOM中，然后通过AJAX将样式插入其中，或者将它们作为字符串放在javascript文件中

Answer 2

如何将自定义的.js/.css文件添加到shopify主题中：

• 在Asset文件夹中添加您的file.js/file.css

对于.js:

• 在theme.lild文件的头部添加以下代码

{{ "filename.js" | asset_url | script_tag }}

• 将以下代码添加到需要添加js的页面

<script type="text/javascript">
yourFunction();
</script>

如果脚本具有异步/延迟2个选项：

• 选项1本地脚本(存储在Shopify中(

<script src="{{ 'filename.js' | asset_url }}" async></script>
<script src="{{ 'filename.js' | asset_url }}" defer></script>

• 选项2远程脚本

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" async></script>

为了使用async和defer标记，src属性必须存在此处的文档

for.css:

• 在theme.lild文件的头部添加以下代码

{{ "filename.css" | asset_url | script_tag }}

注意事项

您可以在Github中创建repo，并通过raw.Github加载.js/.css

<script src="https://raw.github.com/username/project/master/script.js"></script>