Update of item quantity on shopping cart via ajax call

[Marc Ackermann]

Hi,

has someone already made come coding to update the quantity of an item on the shopping cart via ajax call (jQuery) when the user makes a change on his cart? I would prefer this instead of a page submit.

If so, it would be nice if you would post the javascript code snippet.

[Chris Kent]

Hi Marc,

Some time ago - over 2 years, I did start a proof of concept to do just this. There is a lot more that updating a single order item quantity, but most of this would be handled with core Slatwall code.

This partial code should be on old development pc/laptop. I never completed it and would would probably start form scratch if I needed to do the same right now on a site based on the standard Slatwall templates supplied.

As I said above, there is a lot more than just updating an order item quantity via an AJAX call. Think of it as three parts.

One: 

Update order item quantity - Attach a JS event focusout() method to all existing cart item quantities on the cart page passing orderItemID and new quantity to a custom cart controller method. First stage of this method would get the oriderItem entity and set the quantity to the new required quantity.

Two: 

Update cart to reflect new quantity - In the new custom cart controller method created above, after setting the new quantity perform an update cart. This part is very important to do. It will reprice and update the entire cart, all cart items and apply the new selling price for each item taking into account an the new order item quantity you set. Simple example for this to be done - you may change a quantity that will allow/disallow price modifiers (promotions, quantity breaks, price groups) to one or more order items prices, order fulfilment prices and then the order totals. 
Don't worry this is a single line to code to trigger the Slatwall cart update method.

Probably best to let the AJAX request terminate now, this will force the ORM updates to persist all the changes performed above.

Third: 

After the AJAX request above has completed, perform a second AJAX request to get the cart - this will return a JSON string with all new values calculated above.
Now in JS you will have to change all relevant page elements with the updated cart values these will mainly be where unit, discounts, extended prices have changed.- including the cart section of page, order summary section for totals that have changed.

---

The actual CF code is very simple - mainly using what is provided within Slatwall. The more time consuming part will be updating page elements based on new cart values.

In my view - probably not worth the effort to build into static templates for this level of feature. 

I do know clients think they need this type of feature because they have seen something similar somewhere else, probably a competitors website. I have talked a couple out of this type of thing in the past. If you want this type of dynamic interaction it is far better to build the front end UI from the ground up using a framework like AngularJS, Vue, React or similar. 

Happy to help and talk through your solutions with you if you do decide to go down this route. I may even be able to find my old code, but it is far from complete in terms of features or robustness. It was a simple POC.

Regards,
Chris.

. 

[Marc Ackermann]

Hi Chris,

thanks for your answer.

Yes these are the steps that I have in mind.

I was wondering if there's a method baked in slatwall to make it with just one ajax call. Like sending the new item quantity and the method would return the status and an object with all new calculated prices after slatwall has done all its own necessary ORM updates. I've seen it like this in a different shopping application.

But makeing a second ajax request is of course no problem.

Would be helpful if you find your old code so I would'n have to start from scratch.

Best regards,

Marc

[Sumit Verma]

Marc,

Have you looked at our API doc? You can call add to cart as normal ajax call and Slatwall will return updated cart info in response as json data. 

https://publicapi.slatwallcommerce.com/#115fc9af-e1f8-4d0c-9455-6884bdff7513

Thanks,

Sumit

Sumit Verma
Partner / Vice President | ten24, LLC
office: 877.886.5806 x 103 | mobile: 617.290.8214
www.ten24web.com | www.linkedin.com/in/sverma | twitter: blogonria

--
You received this message because you are subscribed to the Google Groups "Slatwall Commerce" group.
To unsubscribe from this group and stop receiving emails from it, send an email to slatwallecomme...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/slatwallecommerce/21703cd2-4aea-463d-8f8a-a837fda6eee9n%40googlegroups.com.

[Chris Kent]

Hi Summit, 

This would work to adjust the order item quantity by the net value changed on the cart page - for example

- Original qty = 5 and this is changed to 7, then use this API call passing the skuID and of 2

- Original qty = 7 and this is changed to 8, then use this API call passing the skuID and of 1

But I think the addOrderItem has validation to ensure the qty if required and supplied has a minimum value of 1 so you would not be able to reduce the cart qty. This is why I suggested a custom cart method to adjust the order item qty up or down and then perform an update cart.

Once the qty and cart have been updated Marc will be able to retrieve the cart JSON details with https://publicapi.slatwallcommerce.com/#d22630d5-9f0d-4f3e-ab5b-f1c9746ce7ec 

Chris.

[Sumit Verma]

There is also updateOrderItemQuantity method, if you just want to update the qty:

https://publicapi.slatwallcommerce.com/#358328f9-08b5-444d-bc5f-3512c2de138f

Sumit Verma
Partner / Vice President | ten24, LLC
office: 877.886.5806 x 103 | mobile: 617.290.8214
www.ten24web.com | www.linkedin.com/in/sverma | twitter: blogonria

To view this discussion on the web visit https://groups.google.com/d/msgid/slatwallecommerce/0846712e-bafb-4f85-b2fe-94fcf7749642n%40googlegroups.com.

[Marc Ackermann]

Hi Chris,

is there a chance that you will find the old code of your POC?

I will start to work on this feature in the next days and it would probably help alot.

Best regards,

Marc

[Chris Kent]

Hi Marc,

Better than that, soon after my previous reply, another client asked for AJAX updates on the cart page. They have a highly modified cart page to include shipping selection, discounts, loyalty program and buy-back protection so there was a lot more work for this particular client.

They asked for the update cart button to be hidden and then displayed/enabled on change of any cart item quantities. Update button then fires an AJAX call to perform the update cart and then receive the updated cart details back in the response. 

I anticipate that they will request this to be changed to fire the request on blur/exit from any quantity field, time will tell.

The following code extract should help you to get going.

var data = {

  'slatAction': 'public:cart.update',

  'orderItems[1].orderItemID': orderItemID1,

  'orderItems[1].quantity': quantity1,

  'orderItems[2].orderItemID': orderItemID2

  'orderItems[2].quantity': quantity2,

  'responseType': 'JSON',

  'returnJsonObjects': 'cart'

};

jQuery.ajax({

  type: 'post',

  url: '#$.slatwall.getApplicationValue("baseURL")#/',

  data: data,

  dataType: "json",

  context: document.body,

  headers: { 'X-Hibachi-AJAX': true },

  error: function( err ) {

    console.log('There was an error processing request: ' + err);

  },

  success:function(responsdata) {

    console.log(responsdata);

    // updateCart(responsdata);

  },

    statusCode:{

      404:function(){

        //$('.error').html("Page not found!");

        console.log( "file not found" );

      }

    }

  }).done(function() {

    // console.log( "success done" );

  }).fail(function() {

    // console.log( "error" );

  }).always(function() {

    // console.log( "complete" );

});

Set up your order items IDs and quantities for each row in your cart form.

Check your console and review the responsdata sent back. You should see the updated cart and extra details including success and failure actions. You can then use the values in the returned cart to update the order summary.

You can use similar code to perform other actions, e.g. removing cart items.

Regards,
Chris.

[Chris Kent]

Or, as Sumit pointed out, there is an update order item quantity API call.

This would be better if you decide to do AJAX calls when individual order item quantities are changed. Just send the changed orderItemID and new quantity and get the updated cart back in the response.

https://publicapi.slatwallcommerce.com/#358328f9-08b5-444d-bc5f-3512c2de138f 

Regards, 
Chris.

[Marc Ackermann]

Many thanks.

This will certainly help me get started.

Best regards,

Marc