如何开发可改变产品页面的shopify应用程序？

Question

我正在尝试开发一个Shopify推荐应用程序，该程序将把推荐的捆绑产品嵌入商店的产品页面，类似于Shopify官方产品评论应用程序，该应用程序通过添加以下部分将评论部分（客户评论）嵌入产品页面到模板：

<div id="shopify-product-reviews" data-id="{{product.id}}">
    {{ product.metafields.spr.reviews }}
</div>

：

我的问题是有关实现Shopify应用程序的方法，该应用程序在产品页面中充当小部件。据我了解，Shopify App Proxy所做的事情类似，但是它将模板呈现在新页面上，我找不到任何将液体模板嵌入现有主题的方法。

Answer 1

您缺少App Proxy一个美丽而又最有用的方面。有了它，您可以执行以下模式，完美地满足您的需求。

• 使用Javascript GET向App Proxy发送正在查看的产品
• App Proxy将根据传入的产品信息安全地获取您认为对您重要的任何信息
• 您可以从代理返回纯JSON数据作为答案，回到请求中
• 使用所需的任何旧模板模式，您都可以获取从Proxy返回的JSON并为客户呈现有用的HTML

虽然确实可以使用App Proxy返回Liquid，但这确实意味着屏幕镶边和布局的重新渲染，因此您可能更喜欢JS和模板方法。但是，我都使用了这两种方法，并且出于自身目的，它们都是超级方法。 Returning Liquid很酷，因为它使您可以在Shopify主题中编写Liquid，然后可以在应用程序中填充，然后Shopify将填充产品信息，使主题设计师和商家可以更改客户看到的HTML，而无需HTML模板限制了JSON方法的作用。

Answer 2

我还在开发自定义产品页面。我猜这个过程应该是这样的：

1. 商人安装您的应用程序时，请使用ScriptTag API将您的js添加到产品页面
2. 加载产品页面后，使用js将GET请求发送到App代理
3. 应用代理重定向到您的应用。您的应用将返回JSON响应
4. 您的js获取并解析响应，在产品页面上动态添加小部件