我应该如何将代码从我的应用程序注入到shopify中每个项目的集合的产品网格中

Question

我一直在创建一个shopify愿望清单应用程序，但我似乎无法绕过将愿望清单图标添加到集合模板上的网格项目上。我需要以编程方式注入它，因为我希望该应用程序与任何 Shopify 主题兼容，而不限于一种 html 结构。

我尝试通过 javascript 添加它，但这样我们就没有产品 id、变体 id 或产品句柄信息来检索数据。

Answer 1

您的愿望清单可能最好使用主题应用程序扩展模式来执行。这样，您的愿望清单就成为任何商家都可以在其主题中安装并自定义的东西（一个部分块），并具有您的愿望清单所需的所有良好逻辑。这不是一个很难遵循的模式。

Answer 2

以编程方式将心愿单图标添加到 Shopify 系列模板可能具有挑战性，特别是在旨在与各种主题兼容时。以下是一些帮助您实现这一目标的步骤和提示：

Use Shopify’s AJAX API: Shopify's AJAX API can help retrieve product information dynamically.

Inject HTML with JavaScript: Use JavaScript to inject the wishlist icon into the DOM. You can get the necessary product information using data attributes or by parsing the page.

Leverage Data Attributes: Many Shopify themes use data attributes to store product information, which can be accessed via JavaScript.

我们的愿望清单大师应用程序提供基于 URL 的愿望清单共享、每月最多 300 个愿望清单项目以及多语言支持。 https://apps.shopify.com/wishlist-guru