Snipcart 通过 JS API 添加项目

Question

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

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

addToCart({
 name: 'Bracelet 1',
 customField1: 'JSON HERE'
})

Answer 1

有一个 Javascript API可用于 Snipcart。

它确实允许动态添加产品，但是，自定义字段的语法略有不同。 The example from the doc对于 Snipcart.api.items.add 显示如何使用自定义字段(为简洁起见删除了未使用的字段):

Snipcart.api.items.add({
    "id": "SMARTPHONE",
    "name": "Smartphone",
    "url": "/",
    "price": "399.00",
    "customFields": [{
        "name": "Memory size",
        "options": "16GB|32GB[+50.00]",
        "value": "32GB"
    }]
});

因此，您可以将一个数组传递给 customFields，而不是带有 customFieldX 的扁平化版本。下拉格式仅在您传递 options 时使用。对于您的用例，这将变为:

Snipcart.api.items.add({
    "id": "SMARTPHONE",
    "name": "Smartphone",
    "url": "/",
    "price": "399.00",
    "customFields": [{
        "name": "configuration",
        "value": "{\"option1\":\"value1\"}" //...
    }]
});

但是，向客户显示自定义字段并不适合向他们显示原始 json 数据。要传递隐藏数据，您可以改用已经需要 JSON 对象的 metadata:

Snipcart.api.items.add({
    "id": "SMARTPHONE",
    "name": "Smartphone",
    "url": "/",
    "price": "399.00",
    "customFields": [{
    "metadata": {
        "configuration": "configuration data"
    }
});