如何通过应用程序将自定义 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 在哪里。

这应该只在用户安装他们的 APP 时执行一次。

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

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

---

现在的问题是，如何添加你的CSS？

你有两种方法：

• 为 CSS 文件创建一个公共 URL 并创建一个link标签并通过 JS 将其附加到文档中

• 创建一个style标签并将其附加到 DOM 并通过 AJAX 将样式插入其中，或者将它们作为 javascript 文件中的字符串

Answer 2

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

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

对于.js：

• 在 theme.liquid 文件的头部添加如下代码

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

• 在需要添加js的页面添加如下代码

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

如果脚本有async/defer 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 属性必须存在于 此处的文档中

对于.css：

• 在 theme.liquid 文件的头部添加如下代码

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

笔记

你可以在 Github 中创建一个 repo 并通过 raw.github 加载你的 .js/.css

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