A Button To Add A Product To A Cart

Question

My Shopping Cart Is Here http://jsfiddle.net/bkw5p/48/

in that i would like to show a button to user on products for adding that product to the shopping cart. Eg : when a button is clicked on a product it should add to cart instead of dragging to the cart i need a button to add that product to the cart

i have tried it but i am unable to get it. kindly help to solve this issues as soon as possible

thanks and regards

s.varun

Answer 1

@ClarkeyBoy - I don't think Varun is quite asking about making the shop actually 'work' at this stage. If I have understood the same as darksky then it's simply adding a button to do the same as the drop function.

I've hacked the fiddle to work here: http://jsfiddle.net/joevallender/VTtUr/4/ using the img as the draggable handle to allow

EDIT More up to date JS Fiddle (as per comments below) http://jsfiddle.net/joevallender/VTtUr/6

I'd recommend using normal jQuery UI instead of easyui. The former has a 'cancel' option that allows everything except a selector to the handle http://forum.jquery.com/topic/how-do-i-prevent-dragging-when-a-button-is-clicked-within-the-draggable-container

A little refactor and the 'add to cart' function is usable my different events

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;
    }
}

So it can be used by drop

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

and click

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

I'm not going to start picking at the specifics of the rest of the code since I can see you're still testing and messing around and just wanted a specific answer.

Answer 2

try this

solution is below

use the blow code and try it

<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;
            }
}