[Product Collection] Add Price Range Filter #11931
Conversation
- Introduced 'priceRange' attribute in the DEFAULT_QUERY and DEFAULT_FILTERS within `constants.ts` to initialize the new price range filter. - Added new SCSS rules in `editor.scss` for styling the price range control. - Implemented `PriceRangeControl` in `inspector-controls/index.tsx` to enable users to specify a price range for product filtering. - Created `PriceTextField.tsx` and `index.tsx` under `inspector-controls/price-range-control`, providing the UI for entering minimum and maximum price values. - Extended the `ProductCollectionQuery` and `PriceRange` interfaces in `types.ts` to type-check the new price range functionality. - Updated `ProductCollection.php` to handle the price range data when constructing the product query, ensuring products are filtered based on the specified price range.
|
The release ZIP for this PR is accessible via: Script Dependencies ReportThe
This comment was automatically generated by the TypeScript Errors Report
assets/js/blocks/product-collection/edit/inspector-controls/price-range-control/index.tsx
|
|
Size Change: +406 B (0%) Total Size: 1.61 MB
ℹ️ View Unchanged
|
imanish003
added
focus: blocks
woocommercebot
requested review from
a team and
kmanijak
and removed request for
a team
There was a problem hiding this comment.
I'm playing with the Price Range and here are some issues:
🔴 Filter doesn't work correctly
Please check the video below, where products with price €54 are filter out when setting MIN value at €46 (if I set min in euro... 🤔).
https://github.com/woocommerce/woocommerce-blocks/assets/20098064/c8207f67-db8a-41de-a1b5-b3948e465735
Another video with max, filtering out product with price €108.90 is filtered out with MAX value €89
max-incorrect.mov
I suspected some currency clash, but my main currency is EURO, so all should be fine:
🟠 Lack of currency sign
As a user, I'd definitely expect the currency sign next to the inputs. That's especially important for the users using multi-currency so they know what currency they set up the limits in.
Here are some additional smaller issues/edge cases. Let me know what you think of them and if it's something you think is worth addressing or we accept that for now:
Min greater than Max
It's possible to insert min value greater than max. Product Collection behaves fine, showing "No Results" and obviously it's a merchant's responsibility to make sure it's configured properly.
So probably it's not a must-have but wanted to mention anyway:
"-" sign
It's possible to insert minus "-" sign in the numbers but the number has no effect then. I know we're resuing the input and not controlling its validation so again - mentioning for the record
Can't apply decimals
You can input decimals but once submitted, the value is rounded to full number. I think we can give merchants a possibility to set decimals, especially that it should operate on any currency and I guess there are currencies that operate on decimals much more.
assets/js/blocks/product-collection/inspector-controls/price-range-control/PriceTextField.tsx
Outdated
Show resolved
Hide resolved
assets/js/blocks/product-collection/inspector-controls/price-range-control/PriceTextField.tsx
Outdated
Show resolved
Hide resolved
assets/js/blocks/product-collection/inspector-controls/price-range-control/index.tsx
Outdated
Show resolved
Hide resolved
Agreed! I will add the currency sign. Although, AFAIK In Editor, it will always use the base currency which is set using Settings → General → Currency options. Right? |
I agree that we can add validation, but I am not 100% sure how this functionality should work. For example, while editing the MAX value:
Also, as you said, it doesn’t have any consequences because, in such cases, no products will be returned. |
Good catch! Although it doesn’t have any issues related to functionality, I will check if I can quickly fix it because I am using NumberControl, so I think this is something which should be handled by NumberControl itself. |
Good catch! I will look into it. Thanks 🙏 |
- Removed the `max-width` restriction from `.wc-block-product-price-range-control` in `editor.scss`. - Introduced currency symbol support in `PriceTextField.tsx` by importing `getCurrency` from `@woocommerce/price-format`. The currency symbol is now displayed as a suffix in the price input fields, providing a clearer context for the prices being entered. - Implemented `step="any"` attribute in `NumberControl` within `PriceTextField.tsx`. This modification allows for more precise price inputs, accommodating prices with decimal values.
I haven't been able to replicate the issue yet, but I'll give it another try while working on the other feedback you provided. In the meantime, it would be really helpful if you could attempt to reproduce the issue on a new site. |
I figured out what's the issue. In WooCommerce -> Settings -> Tax this was my (unrecommended) setup: 
I input prices exclusive of tax and display them including tax which means filtering was happening on the base price (exclusive of tax). I think that maybe the filtering should always happen based on the displayed prices (no matter if inclusive or exclusive of tax) so there are no misunderstandings by merchants similar to me who thought it was a bug 😅. What do you think? For clarity - after unifying the prices filter works great. I also confirmed on another page with unified setup. |
|
Hi @kmanijak 👋 Thank you so much for your valuable feedback on this PR! I've taken action on most of the points you raised:
However, I haven't yet addressed the following feedback:
This issue is a bit complex, so I've sought some additional input (p1701251026307649-slack-C02FL3X7KR6). Regarding the "Min greater than Max" and the "-" sign concerns, could you please review the comments I left on these links?
Once again, thank you so much for your detailed feedback. Your keen eye for detail during the PR review is greatly appreciated! 🙌🏻 |
Currency sign
I think so, that's my understanding 👍 Min greater than Max
I'm against using messages. I was thinking that another value should be adjusted to the one you input:
Minus sign
Yes, let's ignore it. It's not important problem to solve at all and actually why would someone input minus in the middle of the number? 😆 |
The changes primarily focus on the following areas: 1. **Tax Adjustment Incorporation**: The logic now includes an adjustment for tax considerations. This is facilitated by the newly added `should_adjust_price_range_for_taxes()` method, which determines if the price filters need to be adjusted based on the discrepancy between price storage and display methods concerning tax inclusion. 2. **Tax Class Handling**: A new method `adjust_price_range_for_tax_classes()` has been implemented. It adjusts the price range for each tax class, ensuring accurate and relevant calculations. This method is essential for handling various tax scenarios and classes, improving the accuracy of price range filtering. 3. **Price Adjustment Logic**: The `adjust_price_value_for_tax_class()` method has been added for detailed tax adjustments. This method adjusts price values based on tax classes and the tax display settings, using logic akin to `wc_get_price_excluding_tax` and `wc_get_price_including_tax` from WooCommerce core. 4. **Meta Query Construction**: A new method `build_meta_query_for_price_range()` constructs the meta query for filtering products within the specified price range. This method simplifies and consolidates the meta query construction process. Overall, these changes aim to make the price filtering feature more robust, especially in scenarios involving different tax setups. The update enhances the module's flexibility and accuracy in handling diverse pricing scenarios.
…ocks into 9360-product-collection-filters-price-range
imanish003
force-pushed
the
9360-product-collection-filters-price-range
branch
from
e9e2337
to
c07536c
Compare
|
This PR has been marked as If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label. |
github-actions
bot
added
the
status: stale
|
I am closing this pull request because I have created the same pull request on the WooCommerce repository. Here is the link: #11931. |
What
Adds a Price Range Filter to the Product Collection Block's Inspector Controls
priceRangeattribute has been added to the block's attribute, allowing merchants to define a price range for displaying products. This is particularly useful for creating more targeted and specific product displays based on pricing criteria.ProductCollection.phpensure that the product query accounts for the new price range filter, effectively filtering products within the specified price boundaries.Fixes woocommerce/woocommerce#42377
Why
This update significantly improves the versatility of the Product Collection block, empowering merchants to curate products more effectively based on price ranges, and thus enhancing the shopping experience for customers.
Testing Instructions
Please consider any edge cases this change may have, and also other areas of the product this may impact.
Screenshots or screencast
WooCommerce Visibility
Required:
Checklist
Required:
[type]label or a[skip-changelog]label.Conditional:
[skip-changelog]label is not present).Changelog