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 for 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 数据。要传递隐藏数据，您可以改用 metadata ，它已经期望 JSON 对象：

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

Snipcart 通过 JS 添加项目 API

Snipcart add item via JS API

snipcart