如何从产品详细信息页面创建与用户交互的Shopify应用程序

Question

你好，我正在尝试创建一个shopify应用程序，在安装该应用程序后，按钮将显示在选定的产品详细信息页上，这将向用户提出一些问题，这些数据将存储在DB中。

我知道我们必须使用shopify脚本标记。

我做了这么多的研发工作，但是每次研究都会有管理细节，我希望应用程序能够从前端开始与用户进行交互。

请指导我，一个链接，或重新发布或任何视频。

我有以下链接，但这些都无助于给我一些想法，比如我如何在产品细节页面上显示按钮，而不是整个网站。

https://github.com/iskurbanov/shopify-next.js-tailwind

https://github.com/learnwithjason/jamstackconf2021

Answer 1

是的，您需要使用ScriptTag API在商店前端嵌入脚本，使用JS可以操作HTML并添加一个新元素。这里棘手的部分是准确的位置，因为每个主题所使用的元素是不同的。关于只在一个页面上添加按钮，这可以很容易地用JS检查，确保只在包含

产品/

在URL中。

window.location.href

或

document.URL

在这里会有帮助。

还要注意，您需要为OnlineStore2.0主题设置主题应用扩展(应用程序嵌入块)。( https://shopify.dev/apps/online-store/theme-app-extensions/extensions-framework)设置应用程序嵌入块也将允许在特定页面上加载脚本。