Reset Product Collection Pagination When Filtering

[ObliviousHarmony]

Submission Review Guidelines:

• I have followed the WooCommerce Contributing Guidelines and the WordPress Coding Standards.
• I have checked to ensure there aren't other open Pull Requests for the same update/change.
• I have reviewed my code for security best practices.
• Following the above guidelines will result in quick merges and clear and detailed feedback when appropriate.

Changes proposed in this Pull Request:

While it's true that the Product Collection block uses client-side refreshes, it is still vulnerable to the 404 thrown when a page does not exist. When the filters are changed while the block is looking at a page that no longer exists it will do a full page reload to a 404 page. This pull request adds a page reset so that it will return to the first page whenever the filters are changed.

Closes #45644.

How to test the changes in this Pull Request:

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

1. Add a Product Collection block and various filters to the page. Make sure you have more than one page of products by default.
2. Navigate to a different page and adjust the filters.
3. When you change the filter it should navigate back to the first page.

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

Comment

[github-actions]

Hi @imanish003,

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

[github-actions]

Test Results Summary

Commit SHA: 85f3dcd

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	259	0	0	2	0	261	0m 38s
E2E Tests	0	0	0	363	0	363	0m 0s

---

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.

[imanish003]

Hey @ObliviousHarmony 👋🏻

I'm a bit puzzled about the check for paged in the href. Shouldn't we apply the same logic as in woocommerce/woocommerce-blocks#9952 that was used for the older filter blocks?

For instance, on the 3rd page, the URL format is /155-2/?query-0-page=3, not containing a paged key. I've run some tests, and it seems the changes aren't functioning as anticipated due to the absence of a paged key in the URL. Could I be overlooking something here?

[ObliviousHarmony]

Very interesting @imanish003!

This seems to be a consequence of the Permalink setting I had configured.

• Plain Permalinks: The paged query parameter is used on pages such as post_type=product and product_cat=clothing.
• Pretty Permalinks: The URL contains a /page/{page} path for pages such as post_type=product and product_cat=clothing.

In both cases pages with collection blocks use the the query-{id}-page query parameter. I've gone ahead and made changes to the pull request to accommodate these different methods of pagination.

[imanish003]

This seems to be a consequence of the Permalink setting I had configured.

• Plain Permalinks: The paged query parameter is used on pages such as post_type=product and product_cat=clothing.
• Pretty Permalinks: The URL contains a /page/{page} path for pages such as post_type=product and product_cat=clothing.

In both cases pages with collection blocks use the the query-{id}-page query parameter. I've gone ahead and made changes to the pull request to accommodate these different methods of pagination.

TIL, I wasn't aware that Plain Permalink use paged query parameter. Looks like we will need add same logic here too. Can you please add a logic there as well. Because I verified that it's resuting into 404 page with old filters 🙂

[ObliviousHarmony]

Alright @imanish003, I updated the logic for the legacy filters too 😄

[imanish003]

Alright @imanish003, I updated the logic for the legacy filters too 😄

Thank you so much! I truly appreciate your effort. 🙏🏻 I've tested the changes, and everything is working perfectly. 🚀