Updating the data in real time/ without refreshing the page.

Okay so,I am pretty a newbie in OpenCart. Recently started working on the code inside the Opencart file system. My objective is to display the cart div on the header to display on some other part like common right or footer. So after taking a look on header.php and header.tpl I made some changes. On the footer.php I wrote-

$data['cart'] = $this->load->controller('common/cart');
And on the footer.tpl I simply echoed out $cart.

But the result is not what I was looking for. Take a look at some of the screenshots-

http://postimg.org/image/7v77iswgz/

http://postimg.org/image/thi05wgfj/

So my question is that, what must I do to make the updation of total price without refreshing the page. It would be great if you can additionally provide any link from where I can learn to customize the opencart with codes.


I have a rough idea that the changes are to be made in the 'common.js' file in 'var data' method but am unable to ind a solution. Please help