如何在 Big Commerce 中显示产品变体选项价格

Question

我试图在 Big Commerce 的前端显示价格或产品变体选项，但数据似乎在 UI 中是可编辑的，数据没有传递到前端用来？查看从上下文返回的数据时，价格加上其他特定于期权的数据是

来自以下上下文的示例数据：

"options": [
{
"condition": true,
"display_name": "Singular Item",
"id": 113,
"partial": "set-select",
"required": true,
"state": "variant_option",
"type": "Configurable_PickList_Set",
"values": [
{
"data": "Singular Item",
"id": 98,
"label": "Singular Item",
"selected": false
},
{
"data": "10",
"id": 103,
"label": "10",
"selected": false
}
]
},

如果有人知道如何将此数据传递给前端，请告诉我:)

Answer 1

有多种方法可以在前端获取变体价格，但现在最简单的方法是使用 Front Matter GraphQL 查询。这在这里解释得很好：https://developer.bigcommerce.com/stencil-docs/ZG9jOjIyMDcxNg-front-matter-reference#graphql-attributes

您可以使用 GraphQL Explorer 查看如何设置查询格式。

如何在 Big Commerce 中显示产品变体选项价格

How to display Product Variant Option prices in Big Commerce

handlebars.js

bigcommerce

bigcommerce-stencil-cli