-
Notifications
You must be signed in to change notification settings - Fork 608
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
STRF-5640 - Load cart quantity in FE #1379
Conversation
Autotagging @bigcommerce/storefront-team @davidchin |
} | ||
|
||
// Get updated cart quantity from the Cart API | ||
const cartQtyPromise = new Promise(resolve => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@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. |
Don't we also want |
Now depends on bigcommerce/stencil-utils#90 and I've targeted this PR at 3.1.0 |
@mattolson ♻️ once more :) |
This can't be merged yet; found some weird behavior on HTTP/shared SSL storefronts. |
Depends on bigcommerce/stencil-utils#93 |
For your consideration #1405 (comment) |
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.
Oh I see, so it is opt-in. Well, that kind of solves my problem, so maybe this is just a non-issue. |
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 iflocalStorage
is unavailable in the environment or otherwise fails (e.g. if the 5MB storage limit is already reached for the domain).Tickets / Documentation