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

Posted 2023-02-15

【中文标题】如何开发一个改变产品页面的shopify应用程序？

【英文标题】：How to develop a shopify application that make change in product page?

【发布时间】：2019-02-28 01:12:20

【问题描述】：

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

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

：

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

【参考方案1】：

您缺少 App Proxy 的一个美丽且最有用的方面。有了它，你可以做以下模式，完美满足你的需求。

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

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

【讨论】：

感谢您的回复。是否有任何文档或示例代码描述了我们如何使用这些方法，尤其是基于 JSON 的方法？我之前测试过 Liquid 方法，它完全重新渲染了整个屏幕

Shopify 有大量文档。问题是，如果您已经测试了 Liquid 方法，那么您已经完成了 JSON 的大部分模式。把你的返回类型改成JSON，返回JSON数据，剩下的就是前端工作了。

我找不到正确的方法？我应该返回什么类型的 JSON 格式？以及它如何导致产品页面的变化？你能上传一个我应该返回的基本示例代码吗？

JSON 是 JSON...可能没有不正确的方式将其发送出去。至于样品，没有。那是你的简单工作。 Internet 上有数千个代码示例，说明如何发送 JSON 数据作为对 Ajax 请求的响应，然后以 HTML 格式呈现该数据。如果您以前从未尝试过模板，请尝试以 HandlebarsJS 为例。效果最好。

JSON 是数据。数据就是力量。向您的模板发送力量。用 Power 填写模板空白。感受到力量！你可以用这个模式做任何事情，伙计。它与 Shopify 的评论相同...再次，如果您在模板方面很弱，只需查看我已经向您指出的 HandlebarsJS 网站。

【参考方案2】：

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

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