Shopify 应用代理在每个页面中显示内容答案

【问题标题】：Shopify App proxy to display content in every pageShopify 应用代理在每个页面中显示内容
【发布时间】：2015-08-21 00:25:04
【问题描述】：

我正在尝试通过加载脚本将 App Proxy 内容提供给 shopify 商店。

我创建了一个加载到 Amazon S3 服务器上的 index.html 文件并将内容类型设置为 application/liquid。

如果我转到 shopname/apps/proxy，我会将我的 div 插入到 shopofy 布局和一些内容中。但是我的应用程序只是一个 div，我想将它插入到商店的每个页面中。这是我尝试过的两种方法-

$('body').load('/apps/proxy'); 无论我在哪个页面上，它都会自动将我重定向到主页。

如果我尝试这样做

$('body').append('div id="myDiv">/div>');

$("#mydiv").load('/apps/proxy');

它复制了页面的内容

我不明白为什么要显示整个商店布局，我确信这是我对 shopify UI 的工作原理缺乏了解，但我只希望我的表单作为 div 的一部分显示这页纸。

【问题讨论】：

【解决方案1】：

应用代理用于完整页面浏览，并包含一个围绕您的服务返回的代理内容的 shopify 页眉和页脚。它不适用于部分页面浏览 - 没有像样的方法来嵌入小部件，这让我很懊恼。

当您执行$('body').load('/app/proxy'); 时，您将整个页面的正文替换为另一个完整页面。

在您的应用设置中，您很可能将/app/proxy 设置为重定向到您的主页。如果您愿意，可以在此之外添加更多路径 (/app/proxy/sub_page)。但如前所述，它并非用于嵌入其他页面，而是用于新的独立页面。

【讨论】：

您是否知道您是否可以使用应用代理将它们发送到显示在 iFrame 中的链接，使其看起来像一个弹出对话框。我们正在尝试为我们的客户提供一种方法，可以从他们的帐户页面编辑现有订单的送货地址。我讨厌 fkn shopify！
您应该能够使用 javascript 通过 URL 检测当前页面，然后在相关位置添加一个按钮来执行您的建议。但是，您的脚本无法在一些页面上运行，即订单支付页面 - 因此您无法获取 CC 详细信息。没有更多信息，我真的无能为力。是的... Shopify 是我开发的最糟糕的平台之一 =/

【解决方案2】：

当您调用 App Proxy 时，您会返回 html。将从回调返回的 HTML 附加到文档中的某个元素，您将完成您想要的。

请注意，Shopify 确实呈现了您的 Shop 主题的整个布局。您无法替换 Shopify 布局。不过，您可以替换代理 URL 的内容。

因此，最好的办法是将 S3 内容视为从 XHR 调用中获得的 HTML。

听起来您应该只使用 iframe。 App Proxy 不适用于您正在做的静态内容。

【讨论】：