New Block: Filter Products by Price

[jwold]

Issues in this epic:

• Filter Products by Price: List view Filter Products by Price: List view #784
• Filter Products by Price: Slider component Filter Products by Price: Slider component #783
• Filter Products by Price: Query handling/core integration Filter Products by Price: Query handling/core integration #785
• Filter Products by Price: Block creation Filter Products by Price: Block creation #786

User Story
As a merchant
I want a block that allows filtering my store's products by price
So I can allow users narrow down products based on that criteria

Acceptance Criteria

• If no products published (with prices), block displays notification linking to create products
• If the merchant has products with prices, he can see the block with the slider in the editor
• The merchant can see the price range of all the products in his store: min: 0$ and max: most expensive product in the store
• The merchant is not able to interact with the slide in the Editor
• The slider only shows prices with round numbers. It needs to automatically round up to the next whole number
• The slider will change color as it’s dragged around. The corresponding input field will also automatically adjust its number at the same time
• The user can change the price range by dragging a handle or changing the price in the input field. Clicking in the middle of the slider won't change the price range
• The user can collapse/expand the filter in the frontend
• On mobile devices the filter should be collapsed by default
• The slider uses a logarithmic non-linear scale (optional)
• When the user sees the slider in the frontend, the min value should be 0 and the max value should be the price of most expensive product in the store
• The merchant can show/hide the input fields (block setting)
• If the merchant hides the input fields, the user can see the price in the same area but only change them by dragging the handle
• The merchant can choose between displaying the filters as slider or list (block setting)
• The block presents the slider as the default option
• How to edit the price ranges that are displayed in a list (TBD)
• The merchant can show or hide the filter button (block setting)
• The filter button is hidden by default
• If the filter button is hidden, in the front end the product list is updated when the user stops dragging the slider handle
• The Block settings is expanded by default
• Advanced setting is collapsed by default
• The merchant can only see this block in the block library while editing the Product Archive Page
• The block needs to be displayed in the Product Archive Page by default, to help with initial discovery

Additional links

• P2: p6riRB-4DT-p2
• Prototype
• Mobile prototype with collapse/expand filter

[issue-label-bot]

Issue-Label Bot is automatically applying the label type: feature request to this issue, with a confidence of 0.97. Please mark this comment with 👍 or 👎 to give our bot feedback!

Links: app homepage, dashboard and code for this bot.

[jwold]

@pmcpinto, a few suggestions:

A. If no products published (with prices), block displays notification linking to create products

Perhaps change to: "If no products published (with prices), block displays notification in the editor linking to create products"

B. The slider will change color as it’s dragged around. The corresponding input field will also automatically adjust its number at the same time

For clarity I might say: "The slider and the slider handle will change colors as the handle is dragged round. The corresponding input field will also automatically adjust its number at the same time"

C. When the user sees the slider in the frontend, the min value should be 0 and the max value should be the price of most expensive product in the store

Should we also show this in the editor?

D. If the merchant hides the input fields, the user can see the price in the same area but only change them by dragging the handle

Good catch! I didn't even think about this one. I might change it to: "If the merchant hides the input fields, the user can see the price in the same area but only change them by dragging the handle. Refer to existing design of this widget"

[jwold]

@pmcpinto and @mikejolley is a 13 size estimate a sign that we should reduce scope a bit on a feature? If so, we could consider backlogging something, such as the "list" view setting.

[mikejolley]

@jwold yes this should be split up. It's fine to move things to new issues with their own estimates and then group them under this one master issue. We can discuss monday.

[pmcpinto]

@jwold

Should we also show this in the editor?

Considering that in the frontend we're going to show the slider with the min value as 0 maybe it will be less confusing for the merchant if he sees the same in the editor. Makes sense?

[jwold]

Considering that in the frontend we're going to show the slider with the min value as 0 maybe it will be less confusing for the merchant if he sees the same in the editor. Makes sense?

Agreed. Makes sense.

[mikejolley]

@jwold Can you elaborate on these few:

The block needs to be displayed in the Product Archive Page by default, to help with initial discovery

The user can collapse/expand the filter in the frontend

The slider uses a logarithmic non-linear scale (optional)

Thanks