When using standard opencart functionality, users typically have to manually click the update button after adding a product to their cart in order to update the quantity. To see an example of this behavior, visit . However, I would like the cart information to be updated immediately when I change the quantity. I've attempted to achieve this with the following code:
- In catalog/view/theme/default/template/checkout/cart.tpl, I made the following updates:
(I had some trouble pasting the code correctly on the above line. I removed some < characters for clarity)
To implement the update:
<button type="button" data-toggle="tooltip" title="<?php echo $button_update; ?>" class="btn btn-primary" onchange="cart.update('<?php echo $product['key']; ?>', '<?php echo $product['quantity']; ?>');"><i class="fa fa-refresh"></i></button>>
- In catalog/view/javascript/common.js
The script contains a function as follows:
var cart = {
//skipped lines for other functions
'update': function(key, quantity) {
$.ajax({
url: 'index.php?route=checkout/cart/edit',
type: 'post',
data: 'key=' + key + '&quantity=' + (typeof(quantity) != 'undefined' ? quantity : 1),
dataType: 'json',
beforeSend: function() {
$('#cart > button').button('loading');
},
complete: function() {
$('#cart > button').button('reset');
},
success: function(json) {
// Setting a timeout is necessary for updating the total
setTimeout(function () {
$('#cart > button').html('<img src="image/catalog/content/cart/quote-icon.png" alt="quote"><span class="badge badge-giftu rounded-x">' + json['totallines'] + '</span>');
}, 100);
if (getURLVar('route') == 'checkout/cart' || getURLVar('route') == 'checkout/checkout') {
$('#cart > ul').load('index.php?route=common/cart/info ul li');
} else {
$('#cart > ul').load('index.php?route=common/cart/info ul li');
}
}
});
},
}
Testing showed that triggering cart.remove under the on.change function worked, but cart.update did not. If anyone knows what may be causing the issue with the ajax update, please advise.