Enhance: Bring back user to 1st page when filters are changed (https://github.com/woocommerce/woocommerce-blocks/pull/9952)
* Add support for filter blocks 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. * Go to first page when filters are updated * Enhance ProductCollection block to support filter blocks 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. * Remove changes related to redirect to 1st page * Go to first page when filters are updated 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. * Optimize URL updates to prevent unnecessary page reloads 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. * Simplify trailing '?' removal in URL handling 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.
This commit is contained in:
parent
bf157c5996
commit
708ed47a85
|
@ -34,6 +34,34 @@ export function getUrlParameter( name: string ) {
|
|||
*/
|
||||
export function changeUrl( newUrl: string ) {
|
||||
if ( filteringForPhpTemplate ) {
|
||||
/**
|
||||
* We want to remove page number from URL whenever filters are changed.
|
||||
* This will move the user to the first page of results.
|
||||
*
|
||||
* There are following page number formats:
|
||||
* 1. query-{number}-page={number} (ex. query-1-page=2)
|
||||
* - ref: https://github.com/WordPress/gutenberg/blob/5693a62214b6c76d3dc5f3f69d8aad187748af79/packages/block-library/src/query-pagination-numbers/index.php#L18
|
||||
* 2. query-page={number} (ex. query-page=2)
|
||||
* - ref: same as above
|
||||
* 3. page/{number} (ex. page/2) (Default WordPress pagination format)
|
||||
*/
|
||||
newUrl = newUrl.replace(
|
||||
/(?:query-(?:\d+-)?page=(\d+))|(?:page\/(\d+))/g,
|
||||
''
|
||||
);
|
||||
|
||||
/**
|
||||
* If the URL ends with '?', we remove the trailing '?' from the URL.
|
||||
* The trailing '?' in a URL is unnecessary and can cause the page to
|
||||
* reload, which can negatively affect performance. By removing the '?',
|
||||
* we prevent this unnecessary reload. This is safe to do even if there
|
||||
* are query parameters, as they will not be affected by the removal
|
||||
* of a trailing '?'.
|
||||
*/
|
||||
if ( newUrl.endsWith( '?' ) ) {
|
||||
newUrl = newUrl.slice( 0, -1 );
|
||||
}
|
||||
|
||||
window.location.href = newUrl;
|
||||
} else {
|
||||
window.history.replaceState( {}, '', newUrl );
|
||||
|
|
Loading…
Reference in New Issue