How to add an AJAX cart in the header in OpenCart

I’m not really a programmer, so I searched the OpenCart forums and found several ways of doing it.  However, they all involved editing the source code of OpenCart, and when I design a template I want it to be easy to install and uninstall and I don’t want to have to alter the source code of the CMS. Finally, after a lot of searching I found a post by peterban which was exactly what I was looking for.  You can read the post here:http://forum.opencart.com/viewtopic.php?f=21&t=14764

I made some slight alterations to peterban’s solution and it seems to work fine, so here’s what you do.

Basically, if you want to display a cart in your  header you can put the following in your header.tpl file:

<div id="cart_in_header">
<?php
$cart_number = $this->cart->countProducts();
if ($cart_number == 1) {echo "1 item in shopping cart";}
else {echo $cart_number." items in shopping cart";}
echo"<br />";
echo "Total: ".$this->currency->format($this->cart->getTotal());
?>
echo"<br />";
<a href="index.php?route=checkout/cart">View Cart</a> |
<a href="index.php?route=checkout/shipping">Checkout</a>
</div>

If you are not using the AJAX add-to-cart function in OpenCart then that is all you need to do. You now have a basic cart in your header that functions perfectly. However, if you want to add the AJAX function to your cart then here’s what you need to do next.  It does involve editing the source code, but you are only adding an extra function to the source, not altering anything that already exists, which I can live with.

In catalog/controller/module/cart.php add the following at the bottom, before the final }:

public function minicart() {
$this->language->load('module/cart');
$this->load->model('tool/seo_url');
if ($this->request->server['REQUEST_METHOD'] == 'POST') {
if (isset($this->request->post['option'])) {
$option = $this->request->post['option'];
} else {
$option = array();
}
$this->cart->add($this->request->post['product_id'], $this->request->post['quantity'], $option);
unset($this->session->data['shipping_methods']);
unset($this->session->data['shipping_method']);
unset($this->session->data['payment_methods']);
unset($this->session->data['payment_method']);
}
$cart_number = $this->cart->countProducts();
if ($cart_number == 1) {$output = '1 item in shopping cart <br />';
} else {$output = $cart_number.' items in shopping cart <br />';}
$output .= 'Total: '.$this->currency->format($this->cart->getTotal()).'<br />';
$output .= '<a href="index.php?route=checkout/cart">View Cart</a> |
<a href="index.php?route=checkout/shipping">Checkout</a>';
$this->response->setOutput($output, $this->config->get('config_compression'));
}

Now that you’ve done that, all that is left to do is call the function when the Add to Cart button is pressed.  You do that by adding the following javascript to your header.tpl file, just under the code for your basic cart.

<script type="text/javascript"><!--
$(document).ready(function () {
$('#add_to_cart').removeAttr('onclick');
$('#add_to_cart').click(function () {
$.ajax({
type: 'post',
url: 'index.php?route=module/cart/minicart',
dataType: 'html',
data: $('#product :input'),
success: function (html) {
$('#cart_in_header').html(html);
},
complete: function () {
var image = $('#image').offset();
var cart  = $('#cart_in_header').offset();
$('#image').before('<img src="' + $('#image').attr('src') + '" id="temp" style="position: absolute; top: ' + image.top + 'px; left: ' + image.left + 'px;" />');
params = {
top : cart.top + 'px',
left : cart.left + 'px',
opacity : 0.0,
width : $('#cart_in_header').width(),
heigth : $('#cart_in_header').height()
};
$('#temp').animate(params, 'slow', false, function () {
$('#temp').remove();
});
}
});
});
});
//--></script>

And that is you sorted.  You now have a basic AJAX shopping cart in your header that doesn’t involve any real editing of the OpenCart source code.  A couple of points:

1. This basic cart doesn’t work together with the cart module in the right or left column so you must uninstall the cart module in your admin panel.
2. You will probably need to give the cart_in_header div a width in your stylesheet in order to get that nice effect of the product shrinking as it glides towards the cart e.g. #cart_in_header {width: 150px;}.