feat: Price range filter on PLP

[tlgimenes]

What's the purpose of this pull request?

This PR adds PriceRange filter functionality to our starters. For that to work, changes to UI, SDK and API were needed

How it works?

FastStore API

For FastStore API I had to do two main changes:

1. Replace -to- with : and forwards price to Search API
2. Split type StoreFacet into a Boolean and Range representation.
3. Return min/max range of possible prices and return the selected price

To understand why I had to do 3 more clearly, think about the Boolean facets. For boolean facets, search API returns if a given facet is selected or not depending on the forwarded selectedFacets. This simplifies rendering on the UI because for rendering the filters, all the UI needs to do is iterate over the Search API response, selecting the checkboxes that have selected=true as value.
I made the same for the range filter, since Search API does not return the selected value for range filters.

FastStore UI

FastStore UI suffered these two changes:

1. Slider component accept initial state outside of min/max domain
2. Slider onEnd callback function to enable triggering effects after user interaction

1 was necessary for displaying a pre-selected range on PLPs. Also, onEnd callback function was necessary to enable applying filters after the user slides to a new range.

FastStore SDK

Changes to FastStore SDK were a bit more dramatic then on both API and UI. Most of changes were derived from useSearchState.ts file. This file implemented a hook that returned many functions for changing search state, like setTerm, setSort, toggleFacets etc. The issue with this implementation is that these functions did not alter a React state, but changed the browser's URL. This means that, if you wanted to perform two consecutive changes to the search state, these changes were not batched and many wild bugs emerged. To address this issue, a new setState function was added to the context and all the rest were removed and re-exported as helper functions. This makes it so we can change multiple parts of the searchState elsewhere and perform one single setState for triggering the navigation to the final url.

How to test it?

Make sure you are able to side the filters bellow and everything gets set correctly

• https://github.com/vtex-sites/nextjs.store/pull/121
• feat: Price range filter on PLP  vtex-sites/gatsby.store#112

[vercel]

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

Name	Status	Preview	Updated
faststore	✅ Ready (Inspect)	Visit Preview	Jun 19, 2022 at 6:29PM (UTC)

[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.

Latest deployment of this branch, based on commit 1790e31:

Sandbox	Source
Store UI Typescript	Configuration

[emersonlaurentino]

this has the same behavior as onBlur, why not call it that then?

[tlgimenes]

not really, on end fires when the user stops clicking the element. onBlur fires when the object it blurred, i.e. the user clicks, interacts and them leaves.