添加到具有产品ID的购物车功能

Question

Ive built a custom product builder for my site, and am stuck at the very last step - adding the products to the cart.

so on my custom template file I have this code firing when the 'Add to Cart' button is clicked:

$('#button-cart').bind('click', function() {
    $.ajax({
    url: 'index.php?route=checkout/cart/add',
    type: 'post',
    data: $('I WANT TO PUT PRODUCT ID HERE, BUT DOESNT WORK'),
    dataType: 'json',
    success: function(json) {

    }
});

I have the product id saved as a javascript variable, I just need to actually get it to add this product to the cart. Any help would be great. Thanks.

_____________ EDIT ______________

This is my most recent code, the function is definitely being fired when I click the add to cart button, locketID is simply a product id. The success function is being called but neither of the if statements (error or success) and being executed, and the product isn't being added to to the cart.

Is it worth mentioning that this is happening on the category template file? Is there anything that needs included that might not be?

$('#button-cart').bind('click', function() {
    $.ajax({
        url: 'index.php?route=checkout/cart/add',
        type: 'post',
        data: locketID,
        dataType: 'json',
        success: function(json) {

            console.log('success function called')

            if (json['error']) {
                console.log('ERROR');
            } 

            if (json['success']) {
                console.log('SUCCESS');
            }


        }
    });
});

___________EDIT__________

So, I've taken a slightly different approach this is what I have in the being called on the add to cart button click, but it redirects to the product page rather than add the product to the cart, any ideas?

$('#button-cart-custom').bind('click', function() {

    var quantity = 1;
    var product_id = 12196;

    $.ajax({
        url: 'index.php?route=checkout/cart/add',
        type: 'post',
        data: 'product_id=' + product_id + '&quantity=' + quantity,
        dataType: 'json',
        success: function(json) {
            $('.success, .warning, .attention, .information, .error').remove();

            if (json['redirect']) {
                location = json['redirect'];
            }

            if (json['success']) {
                $('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');

                $('.success').fadeIn('slow');

                $('#cart-total').html(json['total']);

                $('html, body').animate({ scrollTop: 0 }, 'slow'); 
            }   
        }
    });


});

Answer 1

It's very simple

var vars = new Array();

vars = {var1: var1_value,var2: var2_value}

now replace in your code

data: $('I WANT TO PUT PRODUCT ID HERE, BUT DOESNT WORK'), with data: vars;

Answer 2

replace data: locketID with

data:{'id':locketID}  

and use

$_POST['id'] to get that data on server