Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Experimental] Product Filter: Price (Beta) block: Prevent invalid price range selection in Product Filter Price block #45403

Merged
merged 2 commits into from Mar 8, 2024
Merged

[Experimental] Product Filter: Price (Beta) block: Prevent invalid price range selection in Product Filter Price block #45403

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a959b0a
Prevent invalid price range selection in Product Filter Price block
thealexandrelara Mar 7, 2024
a802d17
Add changefile(s) from automation for the following project(s): wooco…
invalid-email-address Mar 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
17 changes: 14 additions & 3 deletions .../woocommerce-blocks/assets/js/blocks/product-filter/inner-blocks/price-filter/frontend.ts
View file
Open in desktop
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { store, getContext } from '@woocommerce/interactivity';
import { store, getContext, getElement } from '@woocommerce/interactivity';
import { formatPrice, getCurrency } from '@woocommerce/price-format';
import { HTMLElementEvent } from '@woocommerce/types';

Expand Down Expand Up @@ -70,17 +70,28 @@ store< PriceFilterStore >( 'woocommerce/product-filter-price', {
type === 'min'
? Math.min(
Number.isNaN( value ) ? minRange : value,
maxRange - 1
maxPrice
)
: minPrice;
const currentMaxPrice =
type === 'max'
? Math.max(
Number.isNaN( value ) ? maxRange : value,
minRange + 1
minPrice
)
: maxPrice;

// In some occasions the input element is updated with the incorrect value.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In my case, when the min and max price are equal, if I continue to move the max price to lower than the min price, the prices in the text inputs are correct, but the thumb doesn't return to the correct position.

// By using the element that triggered the event, we can ensure the correct value is used for the input.
const element = getElement();
if ( type === 'min' ) {
element.ref.value = currentMinPrice;
}

if ( type === 'max' ) {
element.ref.value = currentMaxPrice;
}
Comment on lines +84 to +93
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice solution!


context.minPrice = currentMinPrice;
context.maxPrice = currentMaxPrice;

Expand Down
4 changes: 4 additions & 0 deletions ...rce/changelog/45403-fix-45361-invalid-price-range-selection-in-product-filter-price-block
View file
Open in desktop
@@ -0,0 +1,4 @@
Significance: patch
Type: fix

Fix an issue where shoppers could select invalid price ranges in the Product Filter: Price (Beta) block