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.

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

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

Conversation

thealexandrelara
Copy link
Contributor

Changes proposed in this Pull Request:

This PR adds checks to prevent shoppers from using invalid price range selections, such as selecting a minimum price that is higher than the max price. It also uses the getElement method from the Interactivity API to get the element that triggered the update price event and force the correct value to be set to the input.

Closes #45361.

How to test the changes in this Pull Request:

Using the WooCommerce Testing Instructions Guide, include your detailed testing instructions:

  1. Navigate to Single Product template (Appearance > Editor > Templates > Product Catalog template - or any archive template).
  2. Click on "Edit" to open the WordPress editor.
  3. In the editor, you should see a block inserter icon or an option to "Add Block". Click on it.
  4. Search for "Product Filter: Price (Beta)" in the block inserter or browse the available blocks until you find them. Add it to your content.
  5. Click on Save to save the changes.
  6. Visit the Shop page (/shop).
  7. Move the max price to somewhere in the middle of the price slider. Move the min price past the selected max price.
  8. Make sure that only valid price range is accepted and the products are filtered according to this range.

Changelog entry

  • Automatically create a changelog entry from the details below.

Significance

  • Patch
  • Minor
  • Major

Type

  • Fix - Fixes an existing bug
  • Add - Adds functionality
  • Update - Update existing functionality
  • Dev - Development related task
  • Tweak - A minor adjustment to the codebase
  • Performance - Address performance issues
  • Enhancement - Improvement to existing functionality

Message

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

Comment

@thealexandrelara thealexandrelara self-assigned this Mar 7, 2024
@woocommercebot woocommercebot requested review from a team and albarin and removed request for a team March 7, 2024 23:14
@thealexandrelara thealexandrelara added type: bug The issue is a confirmed bug. team: Kirigami & Origami block-type: filter blocks Issues related to all of the filter blocks. labels Mar 7, 2024
Copy link
Contributor

github-actions bot commented Mar 7, 2024

Hi @albarin,

Apart from reviewing the code changes, please make sure to review the testing instructions as well.

You can follow this guide to find out what good testing instructions should look like:
https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions

Copy link
Contributor

github-actions bot commented Mar 7, 2024

Test Results Summary

Commit SHA: a802d17

Test 🧪Passed ✅Failed 🚨Broken 🚧Skipped ⏭️Unknown ❔Total 📊Duration ⏱️
API Tests25900202610m 38s
E2E Tests2290012203517m 42s

To view the full API test report, click here.
To view the full E2E test report, click here.
To view all test reports, visit the WooCommerce Test Reports Dashboard.

Copy link
Member

@dinhtungdu dinhtungdu left a comment

Choose a reason for hiding this comment

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

Code looks good and tested well! Thanks for working on this PR! LGTM 🚢

Comment on lines +84 to +93
// In some occasions the input element is updated with the incorrect value.
// 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;
}
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!

)
: 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.

@thealexandrelara thealexandrelara merged commit b162c9f into trunk Mar 8, 2024
66 checks passed
@thealexandrelara thealexandrelara deleted the fix/45361-invalid-price-range-selection-in-product-filter-price-block branch March 8, 2024 19:08
@github-actions github-actions bot added this to the 8.8.0 milestone Mar 8, 2024
@github-actions github-actions bot added the needs: analysis Indicates if the PR requires a PR testing scrub session. label Mar 8, 2024
@alopezari alopezari added status: analysis complete Indicates if a PR has been analysed by Solaris and removed needs: analysis Indicates if the PR requires a PR testing scrub session. labels Mar 11, 2024
Konamiman pushed a commit that referenced this pull request Mar 13, 2024
…ice range selection in Product Filter Price block (#45403)

* Prevent invalid price range selection in Product Filter Price block

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

---------

Co-authored-by: github-actions <github-actions@github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
block-type: filter blocks Issues related to all of the filter blocks. status: analysis complete Indicates if a PR has been analysed by Solaris team: Kirigami & Origami type: bug The issue is a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Product Filter: Price (Beta) - Invalid Price Range Selection
3 participants