如何通过带有 ReactJS 的 WooCommerce REST API 获得可变价格？答案

【问题标题】：How to get variable price via WooCommerce REST API with ReactJS?如何通过带有 ReactJS 的 WooCommerce REST API 获得可变价格？
【发布时间】：2018-08-12 04:55:03
【问题描述】：

我使用 ReactJS 为基于 Rest API 的 WooCommerce 商店构建移动 Web 应用程序。现在的问题是如何在选择不同属性时获得变异产品的价格。

我做了一个简单的演示来描述我的问题。 https://mofect.com/test 在这个demo中，加载完所有数据后，你可以在Chrome控制台看到两个选项和JSON数据，我想显示设置Size和Color属性后的最终价格。

我只能从产品 Rest API 中获取属性和变体 id：

{
  id: 40
  attributes:[
    {id: 0, name: "Color", position: 1, visible: true, variation: true}
    {id: 0, name: "Size", position: 2, visible: true, variation: true}
  ]
  variations:[106, 107, 108, 109]
}

然后，根据 WooCommerce API 文档http://woocommerce.github.io/woocommerce-rest-api-docs/#list-all-product-variations，我可以通过产品 ID 获取所有变体价格：

'products/40/variations/'

{
  id: 109
  attributes:[
    {id: 0, name: "Color", option: "White"}
    {id: 0, name: "Size", option: "Large"}
  ],
  price: "40"
}

//.... 和其他变体参数

现在的问题是我如何从选定的属性中获取变化价格？

任何可以启发我的想法都将不胜感激！

我的源代码可以在这里下载：https://www.dropbox.com/s/yikqwdox47dwo6t/woo-test.zip?dl=0

谢谢！

【问题讨论】：

标签： reactjs woocommerce

【解决方案1】：

首先，您必须通过 WooCommerce 的默认端点“/products/41”调用产品详细信息，您可以在其中获取所有产品详细信息以及变体数据。

你会得到这样的变化数据：

"variations": [
            64,
            57,
            58,
            59
          ]

然后您可以通过变体 id 获取产品变体，如下所示：

/products/41/variations/64

使用它，您可以获得变体的所有详细信息以及变体图像、属性、价格等。

【讨论】：