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

Для Snipcart доступен API Javascript.

Это позволяет добавлять продукт динамически, однако синтаксис для пользовательских полей немного отличается. Пример из документа для 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"
    }]
});

Так что вместо плоской версии с customFieldX, вы можете передать массив customFields, Раскрывающийся формат используется только если вы передаете 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"
    }
});