Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: adds SKUMatrix component (#2588)
## What's the purpose of this pull request? Implements the SKU Matrix feature and the respective controls on Product Details section of Headless CMS in order to facilitate the selection of product variations simultaneously (such as color and size) through an intuitive interface. ## How it works? Initially, we developed 3 components: `SKUMatrix`, `SKUMatrixTrigger` and `SKUMatrixSidebar`. - `SKUMatrix`: this component serves as a wrapper (component that will wrap `SKUMatrixTrigger` and `SKUMatrixSidebar`). It contains the `SKUMatrixProvider`. This provider will control all the internal state of SKU Matrix (open and close the slider, control the state of the SKUs: change the quantity of items to be added to the cart, return the list of product variations). For the SKU Matrix feature to work correctly, this wrapper must be present. To prevent `SKUMatrixSidebar` or `SKUMatrixTrigger` from being used in isolation, a treatment was made in the `useSKUMatrix` hook. - `SKUMatrixTrigger`: This component is responsible for triggering the slider opening/closing trigger. It is an abstraction of the `Button` component. Within this component, a context is consumed (`SKUMatrixProvider` contained in `SKUMatrix`), this hook returns the `setOpen` property, which is responsible for opening or closing `SKUMatrixSidebar`. - `SKUMatrixSidebar`: The feature main component. It is responsible for displaying the table containing all the variations of a product and allows the selection of multiple SKUs. For the component to work correctly, the context created and exposed by `SKUMatrix` must be consumed, as mentioned previously, all the logic and state management of `SKUMatrixSidebar` is contained in the context. This component is composed of: `SlideOver`, `Table`, `QuantitySelector`, `Price`, `Button`, `Skeleton`. As mentioned in the description of the created components, a context was created to manage states of SKU Matrix feature. There is a hook called `useSKUMatrix`, which is responsible for consuming the `SKUMatrixProvider` and returning all the properties so that the components in the chain can use it. A validation was implemented so that the components in the chain can only be used through the `SKUMatrix` wrapper. Continuing the implementation of the SKU Matrix resource, within `@faststore/core` in the ui folder, an abstraction of `SKUMatrixSidebar` was created. All the logic for capturing and formatting the data is done in this abstraction. To request the data, a new query was created. To use it, simply call the `useAllVariantProducts` hook. To consume this hook, it is necessary to pass some properties, of which we can highlight `callBack` and `enabled`. - `callBack`: is a function that will be executed only when the request is successful and will return all the data. This method will return the data fully formatted following the format pre-established in the `SKUMatrixSidebar` component. - `enabled`: is a `boolean` (true/false). It will inform the query whether the `SKUMatrixSidebar` is open or not. The request will only be made if the slider is open, otherwise it will not be, avoiding unnecessary requests. Within this `SKUMatrixSidebar` abstraction, the `SKUMatrix` context must be consumed. As mentioned previously, the context will control all states, such as informing the context of the list of product variations. Since this abstraction will be responsible for making the request and informing the context of the data, the `callBack` that is passed in `useAllVariantProducts` will be the method to add the items that will be displayed in the `SKUMatrixSidebar` table. Therefore, the `setAllVariantProducts` method present in the `SKUMatrix` context must be assigned. This way, the formatted data that will be returned will be informed to the context and later, the `SKUMatrixSidebar` will be able to consume this data and display it on the screen. Speaking a little about `useBuyButton`, this hook is responsible for adding the selected items to the cart. Previously, it did not accept a list of items, so it was necessary to modify it to meet the new functionality. Since the hook must consume some information to then inform the `buyButtonProps` (responsible for preparing the data to be inserted in the cart), it needs to observe the data of the products to be added to the cart. This data is returned from the `SKUMatrix` context, so whenever there is any type of modification in the context state (for example, a change in the quantity of a SKU within the `SKUMatrixSidebar` table), it will be reflected in the `useBuyButton` hook, and the properties will be generated correctly. Therefore, we performed: - Construction of 3 new components: `SKUMatrix`, `SKUMatrixTrigger`, `SKUMatrixSidebar` - Provider to manage the entire SKU Matrix context - Hook for consumption of the context: `useSKUMatrix` - Exclusive query to access only the important data for the construction of SKU Matrix: `useAllVariantProducts` - Change in the `useBuyButton` hook ## How to test it? Check the "Should display SKUMatrix?" checkbox field on Product Details section of Product Details Page at Headless CMS and publish changes. Then access a product details page at store. A "Select multiple" button must be appear below "Add to Cart" button, responsible to trigger the SKU Matrix Sidebar. ## References RFC: [B2B Faststore - SKU Matrix.pdf](https://github.com/user-attachments/files/17346054/B2B.Faststore.-.SKU.Matrix.pdf) ## Printscreens Headless CMS  SKU Matrix trigger button:  SKU Matrix side bar:  --------- Co-authored-by: Hiago Moreira <[email protected]> Co-authored-by: Fanny Chien <[email protected]> Co-authored-by: Hiago Moreira <[email protected]>
- Loading branch information
4 people
authored
Jan 15, 2025
1 parent
be4c6d9
commit 0d7db56