I managed to put a cart inside <li> and it almost works. I can add, remove products, total is being calculated and message "your cart is empty is shown". Only one thing is missing. Header doesn't update when adding or removing products. Here's the code I modified:
I put this in Mega Menu (because I want my cart to be inline with categories)
/catalog/view/theme/default/template/common/header.tpl
Code: Select all
<li id="cartis"><a><?php echo $text_cart; ?><?php echo $text_items; ?></a>
<div>
<ul>
<div class="content"></div>
</ul>
</div>
</li>
/catalog/view/javascript/common.js
Code: Select all
/* Ajax Cart */
$('#cartis > a').bind('mouseenter', function() {
$.ajax({
url: 'index.php?route=checkout/cart/update',
dataType: 'json',
success: function(json) {
if (json['output']) {
$('#cartis .content').html(json['output']);
}
}
});
});
function removeCart(key) {
$.ajax({
url: 'index.php?route=checkout/cart/update',
type: 'post',
data: 'remove=' + key,
dataType: 'json',
success: function(json) {
$('.success, .warning, .attention, .information').remove();
if (json['output']) {
$('#cart_total').html(json['total']);
$('#cartis .content').html(json['output']);
}
}
});
}
function removeVoucher(key) {
$.ajax({
url: 'index.php?route=checkout/cart/update',
type: 'post',
data: 'voucher=' + key,
dataType: 'json',
success: function(json) {
$('.success, .warning, .attention, .information').remove();
if (json['output']) {
$('#cart_total').html(json['total']);
$('#cartis .content').html(json['output']);
}
}
});
}