feat: new component SKU Matrix

[tiago-freire]

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

Printscreens

Headless CMS

SKU Matrix trigger button:

SKU Matrix side bar:

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
faststore-site	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 11, 2024 6:04pm

[codesandbox-ci]

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.

[tiago-freire]

Splitted in #2503, #2504 and #2505