如何开发一个改变产品页面的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 将根据传入的产品信息安全地获取您认为对您重要的任何信息
您可以return纯JSON数据作为代理的回答，返回请求
使用您想要的任何旧模板模式，您可以从代理中获取 JSON returned 并呈现对客户有用的 HTML

虽然 App Proxy 确实可以用于 return Liquid，但这确实意味着重新渲染屏幕 chrome 和布局，因此您可能更喜欢 JS 和模板方法。但是，我都用过，而且两者都非常适合自己的目的。 Return Liquid 很酷，因为它可以让您在 Shopify 主题中编写 Liquid，您可以将其填充到您的应用程序中，然后 Shopify 将填充产品信息，允许您让主题设计师和商家更改客户看到的 HTML , 没有 HTML 模板限制 JSON 方法有。

Answer 2

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

当商家安装您的应用程序时，使用 ScriptTag API 将您的 js 添加到产品页面
加载产品页面时，使用js向应用代理发送GET请求
应用代理重定向到您的应用。您的应用将 return JSON 响应
您的 js 获取并解析响应，在产品页面上动态添加小部件

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

How to develop a shopify application that make change in product page?

node.js

shopify

shopify-template