Updating the Quantity of Items in the Cart

in this article we'll take an in depth look at the javascript needed to update the quantity of items in the cart layout introduction in this article we'll take an in depth look at the javascript needed to update the cart when the customer makes changes in the cart itself there are two main flows you can implement use case step 1) step 2) change cart quantity with a single action run the s e cart update quantity() function with the 4th argument set to true change cart quantity by 1\) making a change 2\) confirming the change run the s e cart update quantity() function with the 4th argument set to false run the s e cart update() function to confirm a second choice is between whether you want to reload the page to get new values or have our javascript function live update them for you we'll take a look at the key functions involved and the different ways they can be used within your layout the s e cart update quantity() function what it does the function will queue a change to the cart in your local storage, but will not yet confirm the change unless you explicitly ask it to where it's commonly used this function is designed to work as a callback function to events triggered on the element which controls the quantity of items in the currently viewed cart e g it could be added to this element in the cart layout item liquid file quantity like so quantity arguments and usage you must pass the arguments 1 3 argument 4 is optional s e cart update quantity(value, cart id, token, update entire cart); value the quantity required of this item usually set to event target value if the event was triggered on a target input element cart id set to {{this cart data cart id}} to get the id referring to the current item in the item liquid file token set to ' {{context authenticity token}} ' update entire cart boolean defaults to false if you pass true, we'll automatically run the s e cart update() function (see below) as a further callback, confirming the cart update immediately s e cart update quantity(event target value, {{this cart data cart id}} '{{context authenticity token}}', false); your choice of which event is watched will affect the user experience e g onkeyup as opposed to onchange in conclusion, this function prepares an update to the cart quantities in the next section, we'll look at how to apply those changes the s e cart update() function what it does this function will apply the changes in the cart quantities that you have already queued using the previously discussed s e cart update quantity(); where it's commonly used you can either use this function directly to confirm cart changes when the user is ready, or indirectly if true is passed for the 4th argument of the previously discussed s e cart update quantity() function, we'll run this function immediately in this case, you won't need to directly call this function yourself normally this function will be used as a callback to an event triggered on a button on your cart wrapper liquid file e g \<button class="btn btn primary" onclick="s e cart update(false,'{{context authenticity token}}')">update cart\</button> arguments and usage you must pass the arguments 1 2 s e cart update(reload, token); reload boolean true will refresh the page after updating; false will not this can also be overridden by passing in a success cb function token set to ' {{context authenticity token}} ' check inventory after boolean false will check inventory stock levels without refreshing the page if set to true success cb function s e cart update cb default optionally pass in a callback function which will be called after the cart has finished updating your function will be passed the parameters reload , check inventory after both are booleans which can be used to modify behaviour or ignored s e cart update(false, '{{context authenticity token}}', false, function(reload, check inventory after) { //do something after cart update } ); live updating cart values when reload is set to false when passing in a false reload argument, you will need to follow additional steps to update the following the total quantity the total price the price of the line item that was just updated optional the currency symbol live updating total quantity you can use our live cart update feature to get the new total quantity of items in the cart the s e cart update() function will automatically call the s e live cart update() function for you but you'll need to wrap your displayed total in a \<span> class with the following data attribute \<span data s e live cart quantity>{{items in cart}}\</span> live updating total price in the wrapper liquid file, wrap the following element and data attribute around the liquid value for the total cart price \<span data s e live cart total>\</span> e g \<p>\<strong>total price \</strong> \<span data s e live cart total> {% include 'ecommerce/price total' format type 'formatted' %}\</span>\</p> live updating item price in the item liquid file for your cart layout, wrap the following element and data attribute around the liquid value for the item's price \<span data s e live cart item price="{{this cart data cart id}}">\</span> e g \<td>{{this price currency symbol}} \<span data s e live cart item price="{{this cart data cart id}}"> {{this cart data price}} \</span> \</td> it is necessary to add this item's cart id as the attribute's value, in order to locate the correct record within the cart this will continue to use the liquid value on initial page load, but will now replace it with the live value when needed live updating currency optional depending on your html structure, you may already be displaying the currency symbol if the javascript is overwriting it, you can add the following html to have the javascript return it when the function runs \<span data s e live cart currency>\</span> troubleshooting enter button presses if you want to allow users to press the enter button in the quantity input to trigger the event, you may need to modify your wrapper liquid file so that the cart is no longer wrapped in a \<form> element but a \<div> instead make sure to adapt your stylesheets if you do this we'd recommend against any solution which stops the default submit behaviour on the cart buttons that should press on focus and enter keypress as this will negatively impact accessibility conclusion if you want users to be able to instantly update the cart by changing values in the quantity input, you can run just the s e cart update quantity(); function with the 4th argument set to true you may wish to use the onkeyup event for even more instant feedback if you want users to have the option to confirm cart quantity updates before they are applied you'll need to first run s e cart update quantity() when each input is changed and afterwards run s e cart update() when the user is ready to confirm