Page 1 of 1
Shopping cart auto update total
Posted: Sun Nov 06, 2022 11:54 am
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
Re: Shopping cart auto update total
Posted: Sun Nov 06, 2022 2:52 pm
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.
Re: Shopping cart auto update total
Posted: Sun Nov 06, 2022 5:32 pm
by raiwa
Being jquery, I think it should be injected in siteEnd.
Re: Shopping cart auto update total
Posted: Sun Nov 06, 2022 8:08 pm
by cut-n-paste
Thanks for the pointer, but that doesn't make it work.
Re: Shopping cart auto update total
Posted: Sun Nov 06, 2022 8:36 pm
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
Re: Shopping cart auto update total
Posted: Mon Nov 14, 2022 9:47 am
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();
}
});
});