Shopping cart auto update total

[cut-n-paste]

I was able to get the shopping cart total to automatically update when tabbing, clicking or entering on each line. This means you don't need the update button, which is unintuitive in my opinion. I did this with the following JQuery script, which seems like it should work as is in Phoenix, but does not:

Code: Select all

<script type="text/javascript">
  $('input[name="cart_quantity[]"]').change(function() {
    var f = $('form[name="cart_quantity"]');
    $.ajax({url : $(f).attr('action'), type: 'POST', data: $(f).serialize()});
  });
</script>

I have added this by hooking

Code: Select all

injectBodyEnd

[cut-n-paste]

I did some debugging by logging to console. I see the script is executed and the URL, action and data look correct to me, but I am not sure if the data gets posted.

[raiwa]

Being jquery, I think it should be injected in siteEnd.

[cut-n-paste]

Thanks for the pointer, but that doesn't make it work.

[cut-n-paste]

So according to Chrome developer tools under Network, I can see the preview and response do get the correct total as I change the input fields, however the actual page is not updated? Same in Firefox, the response is not what the page shows?

This is what gets posted:

Code: Select all

formid=e38674fed95844332bac043d541dd24693aaf32783ba7f112fc5c492d9354935&cart_quantity%5B%5D=12&products_id%5B%5D=33

[cut-n-paste]

For anybody else who wants to do this, the following JQuery works, you can then hide the update button in the product listing template for the shopping cart page.

Code: Select all

$('input[name="cart_quantity[]"]').change(function() {

  var cartForm = $('form[name="cart_quantity"]');

  $.ajax({
    url : $(cartForm).attr('action'),
    type : 'POST',
    data : $(cartForm).serialize(),
    dataType : 'text',
    success : function(response) {
      var newDoc = document.open("text/html", "replace");
      newDoc.write(response);
      newDoc.close();
    }
  });

});