This repository has been archived by the owner on Feb 23, 2024. It is now read-only.
Enhance: Bring back user to 1st page when filters are changed #9952
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This commit updates the `ProductCollection` block implementation to add support for filter blocks, including the Price filter, Attributes filter, Rating filter, and In stock filter. The changes include: 1. Adding a new property `$attributes_filter_query_args` to store the query arguments related to the filter by attributes block. 2. Adding a new method `add_support_for_filter_blocks()` to enable support for filter blocks. This method sets the necessary asset data to enable filtering and refreshes the page when a filter is applied. 3. Adding new methods to handle specific filter queries, including `get_filter_by_price_query()`, `get_filter_by_attributes_query()`, `get_filter_by_stock_status_query()`, and `get_filter_by_rating_query()`. These methods generate the respective queries based on the applied filters. 4. Refactoring the `get_final_query_args()` method to include the newly added filter queries using the `get_queries_by_applied_filters()` method. These changes enhance the functionality of the `ProductCollection` block by allowing users to filter products based on price, attributes, rating, and stock status.
This commit enhances the ProductCollection block to support various filter blocks such as Price filter block, Attributes filter block, Rating filter block, and In stock filter block. The `build_query` method has been refactored into two separate methods: `build_frontend_query` and `get_final_frontend_query` to make the code more modular and readable. The `add_support_for_filter_blocks` method has been modified to support the generation of product IDs for filter blocks. The method `update_rest_query` has been renamed to `update_rest_query_in_editor` for better clarity and understanding of its function. Similarly, `get_final_query_args` has been refactored to include the `$is_exclude_applied_filters` parameter which helps in generating product IDs for the filter blocks. Moreover, the filter hook `pre_render_block` has been added to support the filtering of blocks before they are rendered. This update will enhance the user experience by providing more filtering options in the ProductCollection block.
…l-with-filter-blocks
…l-with-filter-blocks
…l-with-filter-blocks
This commit refactors the changeUrl function in the `filters.ts` file. The purpose of this refactor is to remove the page number from the URL whenever filters are changed. This ensures that the user is always taken to the first page of results. The commit includes the following changes: - Added comments explaining the different page number formats in the URL. - Updated the `newUrl` parameter by removing the page number using regular expressions. - The page is then reloaded with the updated URL using `window.location.href`. These changes improve the URL handling in the `changeUrl` function and enhance the user experience when interacting with filters.
|
The release ZIP for this PR is accessible via: Script Dependencies ReportThere is no changed script dependency between this branch and trunk. This comment was automatically generated by the TypeScript Errors Report
🎉 🎉 This PR does not introduce new TS errors. |
imanish003
changed the base branch from
trunk
to
fix/9876-product-collection-should-work-well-with-filter-blocks
imanish003
added
type: enhancement
woocommercebot
requested review from
a team and
nefeline
and removed request for
a team
|
Size Change: +877 B (0%) Total Size: 1.17 MB
ℹ️ View Unchanged
|
4 tasks
Base automatically changed from
fix/9876-product-collection-should-work-well-with-filter-blocks
to
trunk
June 22, 2023 09:57
…l-with-filter-blocks-2
…l-with-filter-blocks-2
Aljullu
reviewed
Jun 22, 2023
|
@Aljullu, I can reproduce the issue. Thank you for identifying this edge case. I will work on fixing it and push the necessary changes 🤝 |
This commit optimizes the `changeUrl` utility function to prevent unnecessary page reloads. Changes: 1. It checks if there are no query parameters in the URL and the URL ends with a '?'. 2. If these conditions are met, it removes the trailing '?' from the URL. The reason for this change is that a '?' in the URL typically indicates that query parameters will follow. If there are no query parameters, the '?' is unnecessary and can cause the page to reload, which can negatively affect performance. Therefore, by removing the '?', we prevent this unnecessary page reload.
Aljullu
approved these changes
Jun 27, 2023
There was a problem hiding this comment.
This is working great, @imanish003! I just left one small comment about a possible small optimization, but besides that, LGTM.
assets/js/utils/filters.ts
Outdated
Comment on lines
61
to
62
| const numberOfQueryParams = [ ...urlObject.searchParams.keys() ].length; | ||
| if ( numberOfQueryParams === 0 && newUrl.endsWith( '?' ) ) { |
There was a problem hiding this comment.
I think it's safe to skip the query params check (numberOfQueryParams === 0), no? I mean, if the URL ends with ?, it's always safe to remove the last question mark, no matter if there are query params or not, no? 🤔
There was a problem hiding this comment.
I think so. I was just trying to be extra careful to ensure I do not break any existing functionality.
But good point, the trailing "?" can indeed be removed safely without checking for query parameters. I will simplify the code accordingly. Thanks for the suggestion! 🙌🏻
…l-with-filter-blocks-2
This commit simplifies the removal of trailing '?' characters from URLs. The previous implementation checked if there were any query parameters before removing a trailing '?'. However, upon review, it was determined that this check was unnecessary, as a trailing '?' could be removed safely even if query parameters were present, without any negative impact. This change simplifies the code and prevents unnecessary computation checking for the existence of query parameters.
Aljullu
reviewed
Jul 4, 2023
There was a problem hiding this comment.
Thanks for the update, @imanish003. I just found one last minor issue: in some occassions I end up with two && in the URL.
Steps to reproduce:
- Add the Filter by Price and Filter by Attribute blocks alongside the Product Collection block.
- In the frontend, add a price filter so pagination is still available. The URL will look something like
/?min_price=15. - Using pagination, switch to page two. The URL will look something like
/?query-0-page=2&min_price=15. - Now, add an attribute filter. The URL will look something like
/?min_price=15&&filter_color=blue&query_type_color=or. Notice the double&&beforefilter_color.
Can you reproduce as well?
|
Hi @Aljullu, This issue isn't reproducing for me 🤔 Here is a quick demo of what I tried: Screen.Recording.2023-07-05.at.12.18.37.PM.movIf you are still able to reproduce the issue then maybe I can add a logic like this to clean up query params: What do you think? 🙂 |
Aljullu
approved these changes
Jul 5, 2023
imanish003
deleted the
fix/9876-product-collection-should-work-well-with-filter-blocks-2
branch
2 tasks
11 tasks
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
URL page number removal on filter change: When filters are changed, the page number in the URL is removed. This is to ensure that when a filter is applied, the user is taken back to the first page of results. The code accommodates three different formats of page numbers in the URL and removes them accordingly.
Part of #9876
Testing
WooCommerce Visibility
Changelog