问题标签 [shopify-app-bridge]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
3 回答
1723 浏览

shopify-app - 使用 Shopify 应用程序桥时,我在哪里获得 `shopOrigin` 的值?

在整个新 App Bridge 的文档中,Shopify 提到了该shopOrigin值以及如何使用它来配置提供程序,app-bridge-react但他们从未指定如何获取此值?

在此处输入图像描述

react 应用程序加载在 iframe 内,并且 src 包含该shopOrigin值作为调用的查询字符串参数shop,但是当我尝试以下代码时,我得到了错误window is not defined

1) 为什么我会window is not defined在浏览器中运行 javascript 代码?!这对我来说毫无意义 2)如果可以从提供的库中读取此值,例如@shopufy/app-bridge-react请告诉我如何

0 投票
1 回答
1277 浏览

javascript - 如何在本地主机上使用 Shopify 的 App Bridge 进行开发?

在 React 中初始化 Shopify 的 AppBridge 需要一个apiKeyshopOrigin. 我获取数据并加载我的开发服务器,但遇到错误:

无法在“DOMWindow”上执行“postMessage”:提供的目标来源(“ https://example-test-app.myshopify.com ”)与收件人窗口的来源(“ http://localhost:3000 ”)不匹配

AppBridge与此状态下的作品无关。

我发现满足此错误的唯一方法是创建一个 js 构建并通过我的node服务器将其用作静态资产,然后通过 Shopify 管理员访问该应用程序。这样指定的目标原点将匹配接收窗口的原点,但我想避免在每次前端更改后创建构建。有没有其他方法可以配置AppBridge或解决它,以便我可以继续在本地主机上的前端工作,在那里我可以利用 webpack 的热模块重新加载?

一个相关的线程:

如何将新的 @Shopify/app-bridge 与 @Shopify/polaris-react 一起使用

我可以AppBridge与 合作Polaris,但我现在遇到了与那个人结束时相同的问题。

0 投票
0 回答
137 浏览

javascript - Shopify App Bridge 和 Google Apps 脚本 - 不可能?

我正在尝试使用 Google Apps 脚本构建 Shopify 嵌入式应用程序,但无法让库提供任何类型的响应。在使用常规 JS / HTML / CSS 之前,我已经使用 App Bridge 构建了一个应用程序,但我想知道是否有什么东西阻止它使用 Apps Scripts 创建 HTML 输出。

在我的 Page.html 中,我包含了 Javascript.html,例如:

在 Javascript.html 中,我尝试初始化应用程序,但 App Bridge 库在控制台中根本没有响应。例如,我还尝试渲染 ResourcePicker,但没有任何反应。

0 投票
1 回答
829 浏览

shopify - 我已从 Shopify 合作伙伴嵌入了我的 Shopify 应用程序,但该应用程序仍会在其自己的浏览器窗口中打开

我制作了一个 Shopify 应用程序,它是一个销售渠道……现在我想嵌入该应用程序,但该应用程序总是显示在新的浏览器窗口中。

这就是我所做的:从 Shopify 合作伙伴帐户,我进入了应用程序的扩展程序并将其嵌入:

在此处输入图像描述

现在,当用户安装应用程序时,我将用户重定向到 oAuth 页面......如果用户接受应用程序已安装。 


下次用户登录应用程序时,我返回以下代码(C#、ASP.NET MVC):

我尝试在测试视图中返回以下两个内容:

  1. 一个完整的 HTML 页面:
  1. 只是一个包含我的应用程序的 div:

但是我返回的 HTML 永远不会嵌入到 Shopify 管理页面中......它总是出现在新的浏览器选项卡中。

在此处输入图像描述

我怎样才能嵌入这个应用程序?

0 投票
2 回答
2450 浏览

reactjs - 在 shopify next js 应用程序中重新加载页面而不是路由

我按照Shopify 的指南,直到第 4 步结束,开发了一个 Next JS 应用程序,并且我设置了两个页面(嵌入式应用程序导航),主页和 Page1。现在,当我单击打开两个页面时,应用程序正在重新加载而不是路由...

你可以在这里看到闪烁的问题 - https://youtu.be/45RvYgxC7C0

对此的任何帮助将不胜感激。

_app.js

主页.js

Page1.js

0 投票
0 回答
304 浏览

javascript - 资源选择器不喜欢我的数组 - React shopify app-bridge

所以,我从资源选择器中获取选定的项目并尝试将其用于initialSelectionIds.

但是,在开始使用它时出现此错误,因为它是空的:我也不确定如何selectedValue进入正确的格式。错误:

appBridgeError: APP::ERROR::INVALID_OPTIONS: `type_error_expected_object` thrown for path: ['initialSelectionIds']['0'] and value: `[]

但是当我使用它时它会起作用:

0 投票
0 回答
369 浏览

javascript - shopify 嵌入式应用会话令牌使用烧瓶进行身份验证

我被困在 shopify 会话令牌身份验证中。我正在使用烧瓶作为后端。这是前端代码:

我拿到令牌后不知道该怎么办,我应该将它发送到烧瓶吗?如何?

0 投票
0 回答
35 浏览

shopify-app - 使用 REACT 中的 App Bridge 实用程序获取会话令牌 | 如何在 app-bridge-react 2.0.2 中应用会话令牌?

我正在努力寻找在 Shopify app-bridge-react v2.0.2 中实施新升级的解决方案

所以我通过关注多篇博文提出了一个解决方案。请查看下面的答案

0 投票
1 回答
171 浏览

javascript - 在 Shopify 后台的嵌入式应用程序的页面之间添加加载指示器的最简单方法是什么?

我正在使用 Shopify App Bridge 通过 App Bridge 导航栏将我的应用嵌入到 Shopify 后台。我花了几天时间试图弄清楚如何在当前加载的页面之间添加加载指示器,但前一页仍然存在,直到准备好显示下一页并且没有加载指示。是否有一个简单的解决方法,因为我对 javascript 了解甚少,并且有一个使用烧瓶和 python 的工作应用程序,但不明白我需要添加到我的 html 模板中以使其工作。

我已经尝试过 Shopify 文档,尤其是 - https://shopify.dev/tools/app-bridge/actions/loading

我在 html 模板的头部添加了以下内容:

并在 html 模板的正文中:

我直接添加了我的 apiKey 和 shopOrigin 基本域只是为了测试,但我不确定这是否是我需要做的,如果是的话,我还需要为加载部分添加什么。

似乎我可能需要添加它,但不确定加载开始时我需要在哪里或做什么。

任何帮助或指示将不胜感激,谢谢。

0 投票
0 回答
33 浏览

shopify - 无法在 shopify 应用程序桥中选择产品

我有以下代码:

当我单击按钮打开模式时,出现错误:
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of Index

它与教程中的描述完全相同。
谢谢