用于将产品添加到购物车的按钮

时间:2012-07-31 06:37:26

标签: jquery knockout.js

我的购物车在这里http://jsfiddle.net/bkw5p/48/

我希望向用户显示一个按钮,用于将该产品添加到购物车的产品。 例如:当在产品上点击按钮时,它应该添加到购物车而不是拖到购物车我需要一个按钮将该产品添加到购物车

我试过但我无法得到它。 请尽快帮助解决这个问题

感谢和问候

s.varun

2 个答案:

答案 0 :(得分:3)

@ClarkeyBoy - 我不认为Varun在这个阶段非常想要让这家商店真正“工作”。如果我已经理解为和darksky一样,那么只需添加一个按钮来执行与drop函数相同的操作。

我已经破解了在这里工作的小提琴:http://jsfiddle.net/joevallender/VTtUr/4/使用img作为可拖动句柄来允许

编辑更新最新的JS小提琴(根据以下评论)http://jsfiddle.net/joevallender/VTtUr/6

我建议使用普通的jQuery UI而不是easyui。前者有一个'取消'选项,允许除了选择器之外的所有内容http://forum.jquery.com/topic/how-do-i-prevent-dragging-when-a-button-is-clicked-within-the-draggable-container

一个小的重构和'添加到购物车'功能可用于我的不同活动

function addToCart(source) {
    var name = source.find('p:eq(0)').html();
    var price = source.find('p:eq(1)').html();
    var cartItem = new item(name, parseFloat(price.split('$')[1]));
    var match = ko.utils.arrayFirst(viewModel.cartItems(), function(item) {
        return item.name == name;
    });
    if (match) {
        match.qty(match.qty() + 1);
    } else {
        viewModel.cartItems.push(cartItem);
        var rowCount = document.getElementById("cartcontent1").getElementsByTagName("TR").length;
        document.getElementById("Total").innerHTML = rowCount;
    }
}

因此可以通过drop

使用它
$('.cart').droppable({
    onDrop: function(e, source) {
        addToCart($(source));
    }
});

然后点击

$('.item .add-to-cart').click(function() {
    addToCart($(this).parent());
});

我不会开始挑选其余代码的细节,因为我可以看到你仍在测试和搞乱,只是想要一个特定的答案。

答案 1 :(得分:2)

试试这个

解决方案如下

使用吹码并试一试

<a data-role="link" href="javascript:linkHandler('<%= obj.productname %>', '<%= obj.price %>')" class="get" >Add <a>



function linkHandler(name, price)
{
    alert(name);
    alert(price);
    var name = name;
    var price = price;
    var cartItem = new item(name, parseFloat(price));
            // check duplicate
            var match = ko.utils.arrayFirst(viewModel.cartItems(), function(item){ return item.name == name; });
            if(match){
                match.qty(match.qty() + 1);
            } else {
              viewModel.cartItems.push(cartItem);
var rowCount = document.getElementById("cartcontent1").getElementsByTagName("TR").length;
document.getElementById("Totala").innerHTML = rowCount;
            }
}