首页 > 解决方案 > Snipcart v3 使用 JavaScript SDK 添加项目

问题描述

我正在尝试复制一个非常好的教程,介绍如何在购物车中将每个项目放在自己的行中。您可以在此链接上找到它。不幸的是,本教程使用的是 Snipcart v2,我希望它可以与 v3 一起使用。

我面临的问题是将商品添加到购物车是无休止地重复。我不确定,但我猜它与item.adding使用 Javascript SDK 添加的每个项目的事件触发有关。

由于 Snipcart 没有任何支持,除了每周简单的一句话,我希望在这里找到一个善良的灵魂,愿意帮助我。

这是我的代码:

document.addEventListener('snipcart.ready', () => {
        Snipcart.events.on('item.adding', (item) => {

            var quantity = item.quantity;
            item.quantity = 1;

            var products = new Array(quantity).fill({
                id: item.id,
                name: item.name,
                price: item.price,
                url: item.url,
                customFields: item.customFields,
                quantity: item.quantity,
                stackable: "never"
            });

            products.forEach(async product =>  {
                try {
                    await Snipcart.api.cart.items.add({
                        id: product.id,
                        name: product.name,
                        price: product.price,
                        url: product.url,
                        quantity: product.quantity,
                        customFields: product.customFields,
                        stackable: "never"
                    });
                } catch (error) {
                    console.log(error);
                }
            });
        });
    });

标签: javascriptsnipcart

解决方案


需要此代码以确保商品不会堆叠在购物车中。在 v3 中,要使项目不可堆叠,您可以使用设置为从不的data-item- stackable 属性。


推荐阅读