如何通过应用程序将自定义 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 文件的头部添加如下代码{{&nbsp;"filename.js"&nbsp;|&nbsp;asset_url&nbsp;|&nbsp;script_tag&nbsp;}}在需要添加js的页面添加如下代码<script&nbsp;type="text/javascript"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;yourFunction(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</script>如果脚本有async/defer&nbsp;2 选项：选项 1 本地脚本（存储在 Shopify 中）<script&nbsp;src="{{&nbsp;'filename.js'&nbsp;|&nbsp;asset_url&nbsp;}}"&nbsp;async></script> <script&nbsp;src="{{&nbsp;'filename.js'&nbsp;|&nbsp;asset_url&nbsp;}}"&nbsp;defer></script>选项 2 远程脚本<script&nbsp;src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&nbsp;async></script>为了使用async和defer标签，src 属性必须存在于&nbsp;此处的文档中对于.css：在 theme.liquid 文件的头部添加如下代码{{&nbsp;"filename.css"&nbsp;|&nbsp;asset_url&nbsp;|&nbsp;script_tag&nbsp;}}笔记你可以在 Github 中创建一个 repo 并通过 raw.github 加载你的 .js/.css<script&nbsp;src="https://raw.github.com/username/project/master/script.js"></script>