fix: Cart item availability #1160
Conversation
|
✔️ Deploy Preview for faststoreui ready! 🔨 Explore the source changes: adfd461 🔍 Inspect the deploy log: https://app.netlify.com/sites/faststoreui/deploys/6217f4fc128e13000700f03f 😎 Browse the preview: https://deploy-preview-1160--faststoreui.netlify.app |
|
✔️ Deploy Preview for faststore-docs ready! 🔨 Explore the source changes: adfd461 🔍 Inspect the deploy log: https://app.netlify.com/sites/faststore-docs/deploys/6217f4fc9dec6b000896780d 😎 Browse the preview: https://deploy-preview-1160--faststore-docs.netlify.app |
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit adfd461:
|
| @@ -7,6 +7,7 @@ export const fetchAPI = async (info: RequestInfo, init?: RequestInit) => { | |||
| return response.json() | |||
| } | |||
|
|
|||
| console.error(info, init, response) | |||
There was a problem hiding this comment.
Do you intend to publish this console error in production!?
Yeah, I'm thinking on leaving it to have better logs when running the function |
Co-authored-by: Eduardo Formiga <eduardo.formiga@gmail.com>
What's the purpose of this pull request?
This PR makes the cart module to respect the inventory limits of a certain product.
Currently, when adding an unavailable product to card, the UI let's the counter to increase indefinitely without warning the user the product has limited inventory. This PR addresses this issue by limiting the amount of products the user can add to cart. Also, if the user adds more itens, a toast message is raised warning the user
How it works?
Optimistic UI is a design pattern that improves greatly the UI responsiveness by not blocking the user/UI interaction while the server process requests. Our SDK's cart module is optimistic. This means that the user does not need to wait for the ecommerce platform to process anything before adding/removing items from cart.
To achieve an optimistic cart, the cart state is copied from the server into the client. Any change to cart state is performed locally and the UI reacts to these changes. At some point, the local cart state needs to be synced with the server one. This sync between client/server state is done by
validateCartmutation. This mutation's return is the server's state of the cart and is, thus, the source of truth for the cart's state. IfvalidateCartreturns null, this means that both client and server state matches perfectly, and thus no change needs to be performed on the client.There was a bug in
validateCartmutation when the a product had a limited inventory. When the user tried to add more items than possible, the mutation returned null, indicating to the UI the operation was valid. When the user got to the checkout phase, he saw that the number of items on/checkoutdiffers from the one present on the minicart, thus creating a mistrust with the store.To solve this bug, when the user tries to add more itens than possible, the quantity is lowered to the available products and a message is returned saying the operation was impossible. More specifically, the bug happened because the
equalsfunction was not applied between server and client states, but between sever and server states. The fix was changeequalsto compare server and client statesBelow, you can see the before/after comparison of the fix. The
/tasty-cotton-chicken-30559418/pproduct has 5 items on stock as of the make of this PR and it should be impossible to add more than the quantity available.How to test it?
Test using the product:
/tasty-cotton-chicken-30559418/pbase.storeDeploy Previewvtex-sites/base.store#366
References