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

Question

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

Answer 1

嗯，这很简单。

您必须先为脚本文件创建一个public URL。（这样你就可以从任何地方访问它）

之后，您使用以下端点发出 post 请求：https://shopify.dev/docs/admin-api/rest/reference/online-store/scripttag#create-2020-07

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

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

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

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

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

你有两种方法：

为 CSS 文件创建一个 public URL 并创建一个 link 标签并通过 JS
创建一个 style 标签并将其附加到 DOM 并通过 AJAX 插入样式，或者将它们作为字符串放入 javascript 文件

Answer 2

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

添加您的文件。js/file.css 到资产文件夹

对于 .js:

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

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

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

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

对于.css:

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

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

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

How to inject custom js to shopify via app

javascript

shopify

laravel

shopify-app