Shopping cart auto update total

Ask the community for help and support.
Post Reply
cut-n-paste
Posts: 21
Joined: Fri Oct 07, 2022 12:20 pm
Has thanked: 2 times
Been thanked: 5 times

Shopping cart auto update total

Post by 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
Posts: 21
Joined: Fri Oct 07, 2022 12:20 pm
Has thanked: 2 times
Been thanked: 5 times

Re: Shopping cart auto update total

Post by 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
PhoenixCart Developer
PhoenixCart Developer
Posts: 1184
Joined: Sat Dec 21, 2019 8:08 am
Has thanked: 38 times
Been thanked: 102 times

Re: Shopping cart auto update total

Post by raiwa »

Being jquery, I think it should be injected in siteEnd.
Public Phoenix Change Log Cheat Set on Google Sheets
https://docs.google.com/spreadsheets/d/ ... sp=sharing

Need Help?viewtopic.php?f=10&t=27
cut-n-paste
Posts: 21
Joined: Fri Oct 07, 2022 12:20 pm
Has thanked: 2 times
Been thanked: 5 times

Re: Shopping cart auto update total

Post by cut-n-paste »

Thanks for the pointer, but that doesn't make it work.
Last edited by cut-n-paste on Sun Nov 06, 2022 9:47 pm, edited 1 time in total.
cut-n-paste
Posts: 21
Joined: Fri Oct 07, 2022 12:20 pm
Has thanked: 2 times
Been thanked: 5 times

Re: Shopping cart auto update total

Post by 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
Posts: 21
Joined: Fri Oct 07, 2022 12:20 pm
Has thanked: 2 times
Been thanked: 5 times

Re: Shopping cart auto update total

Post by 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();
    }
  });

});
Post Reply