How can I update my cart with Ajax? - php

Question

I would really need some help from to AJAX Guru master overthere to help me building my update cart function on my website in AJAX.
So basically, what I would like to do is, when I modify one of my product in one input_dropdown, my 'update_cart' function is automaticaly called and my prices are updated as well as my input
EDIT : I rewrite my question since I made some progress thanks to Matei
Here is my view :
<?php
$options = array(
'0' => '0',
'1' => '1',
'2' => '2',
'3' => '3',
'4' => '4',
'5' => '5',
'6' => '6',
'7' => '7',
);
if($product['quantity']==0){
$value[$product['title']] = set_value('quantity'.$product['title']);
}else{
$value[$product['title']] = $product['quantity'];
}
$data0 = 'class="quantSelect" value="'.$value[$product['title']].'" id="quant'.$product['title'].'"';
echo form_dropdown('quantity'.$product['title'], $options, $value[$product['title']],$data0);
?>
</td>
<td>
<?php echo $product['price'] ?>
</td>
<td id="<?php echo 'price'.$product['title']?>">
$<?php echo $total[$product['title']] ?>
</td>[/code]
Well, everything is in a foreach loop but I think that here, it doesn't matter.
Then I tried to set up the Matei AJAX function :
$(".quantSelect").click(function(){
$.POST("<?php echo base_url().'main/update_cart';?>",
{product_id:$('<?php echo $product['quantity']; ?>').val(),quantity:$('<?php echo 'quantity'.$product['title'] ?>').val()},
function(data){
if(data.success) {
$("<?php echo 'price'.$product['title']?>").val(data.some_returned_value); // update value of an text input or textarea (view more info about jQuery selectors)
$("#totalPriceWithTaxes").html(data.some_other_returned_value); // update value of a paragraph
}
}, 'json');
});
And at last the update cart function :
function update_cart(){
$success = false;
if(!empty($_POST['product_id']) && !empty($_POST['quantity']) && is_numeric($_POST['quantity'])) {
// I get all the information i need here in order to calcul the final price
//We calcul the final price with taxes, shipping and everything.
$data['totalPriceWithTaxes'] = $data['tax'] + $data['totalPrice'] + $data['Shipping']->shipping;
$this->session->set_userdata('totalPriceWithTaxes', $data ['totalPriceWithTaxes']);
$success = true;
$some_returned_value = 69;
$some_other_returned_value = $data['totalPriceWithTaxes']; // the final price
}
echo json_encode(array("success" => $success,
"some_returned_value" => $some_returned_value,
"some_other_returned_value" => $some_other_returned_value));
}
Here we are, so I can't see any update. If someone could help me to figure out how to set up that AJAX Function, I would deeply appreciate :)

Answer 1

I recommend you to take a look at jQuery.post() method of jQuery library.
Let's see the following example:
Javascript code:
$("#submit-button").click(function(){
$.POST("/PATH_TO/update_cart.php",
{product_id:$('#product-id').val(),quantity:$('#quntity').val()},
function(data){
if(data.success) {
$("#form-field-id").val(data.some_returned_value); // update value of an text input or textarea (view more info about jQuery selectors)
$("p#form-p-id").html(data.some_other_returned_value); // update value of a paragraph
}
}, 'json');
});
For more info about jQuery Selectors please check this
PHP code:
<?php
$success = false;
if(loged()) { // verify if the user is loged (if it's needed)
if(!empty($_POST['product_id']) && is_numeric($_POST['product_id']) && !empty($_POST['quantity']) && is_numeric($_POST['quantity'])) {
// use here your additional code
// update database
// if every condition is applied then confirm that the fields are updated
$success = true;
$some_returned_value = "data has been successfully updated";
$some_other_returned_value = 45.3; // the final price
}
}
echo json_encode(array("success" => $success,
"some_returned_value" => $some_returned_value,
"some_other_returned_value" => $some_other_returned_value));
?>
This is a simple example about how you can use jQuery POST method and PHP for updating data you want. I didn't use any of your code, but you can try to update your cart like this. jQuery is a powerfull library, so I'll recommend you to take a look at it.