CODEWITHSUNDEEP
javascriptjqueryhtmlajaxopencart
Gareth Gillman
Gareth Gillman

Reputation: 353

opencart update cart total ajax

I am trying to implement the cart in the header to update it's price / items when I add an item to the cart

My html:

<div id="cart">
<p class="phone">01234 567890</p>
<div class="basket">
 <p class="title"><a href="<?php echo $shopping_cart; ?>">Basket</a></p>
 <p class="items">
  <?php
  $cart_number = $this->cart->countProducts();
  if ($cart_number == 1) {
   echo "1 item";
  } else {
   echo $cart_number." items";
  }
  ?>
 </p>
 <p class="price">
  <?php echo $this->currency->format($this->cart->getTotal()); ?>
 </p>
  <script type="text/javascript">
   <!--
   $(document).ready(function () {
    $('#button-cart').bind('click', function() {
$.ajax({
     url: 'index.php?route=checkout/cart/add',
 type: 'post',
 data: $('.product-info input[type=\'text\'], .product-info input[type=\'hidden\'], .product-info input[type=\'radio\']:checked, .product-info input[type=\'checkbox\']:checked, .product-info select, .product-info textarea'),
 dataType: 'json',
 success: function(json) {
  $('.success, .warning, .attention, information, .error').remove();

  if (json['error']) {
   if (json['error']['option']) {
    for (i in json['error']['option']) {
     $('#option-' + i).after('<span class="error">' + json['error']['option'][i] + '</span>');
    }
   }
  } 

  if (json['success']) {
   $('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');
   $('.success').fadeIn('slow');
   $('.price').html(json['total']);
   $('html, body').animate({ scrollTop: 0 }, 'slow'); 
  } 
 }
    });
   });
   });
   //-->
  </script>
</div>

It's a custom theme but with most elements copied from the default theme, but for some reason it doesn't update the cart items / total

any help would be appreciated

Upvotes: 2

Views: 4260

Answers (1)

Jirka
Jirka

Reputation: 31

You have to refresh #cart div at the end

add line

$('#cart').load('index.php?route=module/cart #cart > *');

after

$('html, body').animate({ scrollTop: 0 }, 'slow');

Upvotes: 3

Related Questions