Feat/product comparison packages core

[HiagoMoreiraCubos]

What's the purpose of this pull request?

Implements the Product Comparison feature and the respective controls on Product List Page section of Headless CMS in order to facilitate the comparison of product simultaneously (such as color, size and others) through an intuitive interface.

How it works?

Initially, we developed 4 components: ProductComparison, ProductComparisonTrigger and ProductComparisonToolbar , ProductComparisonSidebar.

• ProductComparison: this component serves as a wrapper (component that will wrap ProductComparisonToolbar , ProductComparisonSidebar). It contains the ProductComparisonProvider. This provider will control all the internal state of Product Comparion (open and close the slider, control products the state products, if the toolbar appear). For the Product Comparison feature to work correctly, this wrapper must be present. To prevent ProductComparisonSidebar or ProductComparisonToolbar from being used in isolation, a treatment was made in the useProductComparison hook.

• ProductComparisonTrigger: This component is responsible for choosing the products that can be compared.

• ProductComparisonToolbar: This component is responsible for delivering visual feedback to the user, making it easier to see selected products.

• ProductComparisonSidebar: The feature main component. It is responsible for displaying the table containing the products and specifications. For the component to work correctly, the context created and exposed by ProductComparison must be consumed, as mentioned previously, all the logic and state management of ProductComparisonSidebar is contained in the context. This component is composed of: SlideOver, Table, Price, Button, Badge, Toggle, Select.

As mentioned in the description of the created components, a context was created to manage states of Product Comparison feature. There is a hook called useProductComparison, which is responsible for consuming the ProductComparisonProvider 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 ProductComparison wrapper.

Continuing the implementation within @faststore/core in the ui folder, an abstraction of ProductComparisonSidebar 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 useProductsSelected hook. To consume this hook, it is necessary to pass some properties, of which we can highlight productsIds, enable, processResponse.

• productsIds: is an Array of string, the items in the array are pre-selected product ids

• enabled: is a boolean (true/false). It will inform the query whether the ProductComparisonSidebar is open or not. The request will only be made if the slider is open, otherwise it will not be, avoiding unnecessary requests.

• processRepsonse: 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 ProductComparisonSidebar component.

Within this ProductComparison abstraction, the ProductComparison context must be consumed. As mentioned previously, the context will control all states, such as informing the context of the list of product selected. Since this abstraction will be responsible for making the request and informing the context of the data, the processReponse that is passed in useProductComparison will be the method to add the items that will be displayed in the ProductComparisonSidebar table. Therefore, the handleProductComparison method present in the ProductComparison context must be assigned. This way, the formatted data that will be returned will be informed to the context and later, the ProductComparisonSidebar will be able to consume this data and display it on the screen.

The hook useBuyButton, this hook is responsible for adding the selected items to the cart. 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 ProductComparison context, so whenever there is any type of modification in the context state (for example, a one click event inside ProductComparisonSidebar), it will be reflected in the useBuyButton hook, and the properties will be generated correctly.

Therefore, we performed:

• Construction of 4 new components: ProductComparison, ProductComparisonTrigger and ProductComparisonToolbar , ProductComparisonSidebar.

• Provider to manage the entire Product Comparison context

• Hook for consumption of the context: useProductComparison

• Exclusive query to access only the important data for the construction of Product Comparison: useProductsSelected

How to test it?

Check the "Enable Product Comparison" checkbox field on Product Gallery section of Product List Page at Headless CMS and publish changes. Then access a product list page at store.
The comparison checkbox is above the product list. Enabling it shows checkboxes to select products. Select at least two products to enable a toolbar with actions like "Clear Selection" and "Compare." Clicking "Compare" opens a SlideOver displaying the selected products, where you can filter or view only differences.

References

RFC:

B2B Faststore - B2B Faststore - Product Comparison

Printscreens

Headless CMS

Dependencies:

This PR depends from two other PRs #2594, #2627

Preview link : https://starter-72f6tioda-vtex.vercel.app/

[vercel]

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

Name	Status	Preview	Updated (UTC)
faststore-site	❌ Failed (Inspect)		Jan 24, 2025 7:47pm