STRF-5640 - Load cart quantity in FE

[bookernath]

What?

This is the first step in improving storefront performance by moving most/all Cart interactions to the frontend.

This change moves all functionality related to calculating the cart quantity in the header to FE API calls, after the initial HTML loads.

In future PRs, we'll be able to actually turn off the loading of Cart details in the HTML in Cornerstone, which will improve performance, especially for large carts. However, this PR does not disable Cart data, it simply introduces the FE behavior.

The "last known" cart quantity is cached in localStorage so it loads quickly when the page loads and then it's quietly updated if new information is received from the API. There is a graceful fallback if localStorage is unavailable in the environment or otherwise fails (e.g. if the 5MB storage limit is already reached for the domain).

Tickets / Documentation

• STRF-5640

[bigbot]

Autotagging @bigcommerce/storefront-team @davidchin

[mattolson]

I just noticed that the getCartQuantity function in stencil-utils does not handle api errors properly.

https://github.com/bigcommerce/stencil-utils/blob/master/src/api/cart.js#L26 should be modified to check for an error and then call callback(err). When successful, it should call callback(null, quantity). The standard for JS callback functions is that the first param the error and the second param is the result.

Once that is done, this PR should be modified to handle the error and call the reject function in the Promise.

[bookernath]

bigcommerce/stencil-utils#88

[bookernath]

@mattolson ♻️

Please note that this requires stencil-utils 3.0.0 (containing bigcommerce/stencil-utils#88) to be released to NPM before we can merge this.

[mattolson]

Don't we also want cart: false here? https://github.com/bigcommerce/cornerstone/blob/master/config.json#L326

[bookernath]

Now depends on bigcommerce/stencil-utils#90 and I've targeted this PR at 3.1.0

[bookernath]

@mattolson ♻️ once more :)

[bookernath]

This can't be merged yet; found some weird behavior on HTTP/shared SSL storefronts.

[bookernath]

Depends on bigcommerce/stencil-utils#93

[carsonreinke]

For your consideration #1405 (comment)

[carsonreinke]

@bookernath

@carsonreinke can you give an example of what you mean?

GTM is our biggest use case. Delaying pushing data for the data layer changes what trigger executes the tag. The tag cannot fire on page load, DOM load, or window loaded. A custom event would need to be added to trigger once the API call came back.

Just to make sure I'm articulating this clearly, we don't plan to do anything with the existing {{cart}} resource - we intend to keep supporting it and all the existing themes and stores that might be using it.

However, towards the goal of making the storefront faster, we plan to move the interactions to the frontend and disable the cart object by default in Cornerstone which will result in a faster response time for the page, especially for stores with certain configurations like a lot of discount rules, or shoppers who have a lot of items in their cart.

Anyone who still wants to use the Cart resource can keep it enabled.

Oh I see, so it is opt-in. Well, that kind of solves my problem, so maybe this is just a non-issue.