问题标签 [snipcart]

我正在使用 Middleman 和 Snipcart 开发一个电子商务项目。我需要使用多币种，Snipcart 文档说我只需要在我的购买按钮 adata-item-price中设置一个 JSON 数组，例如{"usd": 20, "eur": 25}. 还有其他数据集可以放在购买按钮上，所以我决定做一个帮手。

这个助手返回的正是我想要的，但是 data-item-price 在双引号之间而不是在单引号之间。目前，代码被理解为data-item-price="{"usd":20,"eur":22}"而不是data-item-price='{"usd": 20, "eur": 22}'

我需要<button data-item-price="{"usd":20,"eur":22}">Buy</button>通过这个来改造<button data-item-price='{"usd":20,"eur":22}'>Buy</button>。

这是 snipcart（购买）按钮助手：

任何关于我需要做什么来返回以下信息的指导或示例都会很棒。我正在使用 js、jquery 和 HTML

1. 我需要添加这个： Content-Type header is application/json
2. 当请求到来时，我需要用下面的 Json 回复

https://docs.snipcart.com/configuration/json-crawler#validating-the-request

当 Snipcart 向 URL 发出请求时，如果您的响应 Content-Type 标头是 application/json，我们将使用我们的 JSON 验证器而不是 HTML 验证器。

您必须向我们返回具有以下属性的 JSON。

我正在使用 snipcart.com 作为我的电子商务/支付处理器。但是，在制作简单的 HTML 按钮时，出现错误：

或者，我也试过这个：

这两个都给出了相同的错误。错误说：无法绑定到“data-item-id”，因为它不是“按钮”Angular 2 的已知属性。我尝试绑定到的每个输入都会产生错误。

最后，这里是 Snipcart 文档的链接： https ://docs.snipcart.com/configuration/product-definition

无法通过搜索找到此问题。我尝试使用 heroku 部署我的 vue.js/node.js/Snipcart 应用程序，但一直收到应用程序错误。以下是控制台日志。我不确定发生了什么。我在http://localhost:8080上本地运行应用程序没有问题。谢谢你的时间！

索引.html：

main.js

应用程序.vue

登陆页面.vue

我用 Vue.js 创建了一个网站，并包含了用于购买按钮的 Snipcart API。我已经尝试将它部署到heroku 2 天了。

当我输入$ npm run dev它工作正常，并会显示我的网络应用程序。但是由于某种原因，如果我这样做$ node server.js，它会显示其 webpack 的默认 Vue 欢迎页面（“欢迎使用您的 Vue 应用程序”）。

我试过输入"start":"npm run dev"我的 package.json ，但这只会导致一个永远加载的网页。如果我输入"start":"node server.js"它会导致与上一段相同的结果，它只是显示默认的 Vue 欢迎页面。

我发现有人有基本相同的问题（如何设置 vue(2)-cli 应用程序以与 nodejs 服务器一起运行），甚至尝试了相同的教程帖子，但我不知道该评论/答案在说什么。我也不确定如何使用 Snipcart API 部署静态网站（正如以前的用户在上一篇文章中向我提到的那样）。

我真的不知道该怎么办。谢谢你的时间。

编辑：这是我的应用程序的仓库：https ://github.com/Taikon/MaroonRiver0

我正在尝试将 Snipcart 集成到 Gatsby (v2) 中。

我像这样编辑html.js文件：

什么有效：

如果我创建一个 div：

Snipcart 工作并在单击时打开用户配置文件。

什么不起作用：

当我想使用公共 API 时，例如，如果我调用：

Snipcart.api.user.logout()在一个函数中。

=> error 'Snipcart' is not defined no-undef

如何在我的所有应用程序中拥有全局 Snipcart 对象？

因此，不要使用 data-item-url="https://miglopes.pythonanywhere.com/ra%C3%A7%C3%A3o-de-c%C3%A3o-purina-junior-10kg/"

它不断出现 data-item-url="http://localhost/ra%C3%A7%C3%A3o-de-c%C3%A3o-purina-junior-10kg/"

如何删除本地主机，以便我的 snipcart 可以在结帐时工作？

我正在建立一个非常小的电子商务网站来销售可定制的珠宝，所以我有一个图形配置器，可以让你设计珠宝，然后你可以将它添加到购物车中。产品应该有一个 JSON 格式的自定义字段，其中包含项目配置。我看到 Snipcart 有data-item-custom{x}字段，但只填充了下拉列表......不适合我。

你认为我可以用 Snipcart 处理这种情况吗？我可以简单地通过 JS 更新 HTMLdata-item-字段内容吗？还是通过 JS 将商品添加到购物车？

我尝试在单个产品页面（如这里）中使用 snipcart 并做出反应。

使用下面的代码单击按钮 (class="snipcart-add-item") 不会执行任何操作。我必须如何导入？

在我的版本中，“data-api-key”当然是我正确的 snipcart api 密钥。

我最近将一个站点迁移到 Gatsby[v2] 并发现事件发生后 Snipcart 的自定义 html 会成倍增加。如何防止 Snipcart 自定义 HTML 在每次页面导航或事件发生时成倍增加？当我打开模式时，多重渲染是可见的。我不确定这是 React 组件生命周期问题还是 Gatsby[v2] 布局组件问题。

CustomSnipcartText 组件使用 componentDidMount 调用 Snipcart api 并使用这些方法将文本绑定到 DOM。CustomSnipcartText 组件被导入到 Gatsby 布局组件中。我尝试将组件导入到打开模态函数的位置，结果没有变化。

Snipcart 自定义 html 组件：

GatsbyJs 布局组件：

我希望 CustomSnipcartComponent 在任何事件发生后都不应成倍增加。