-
Notifications
You must be signed in to change notification settings - Fork 219
Product Collection: Use Interactivity API for pagination #10361
Product Collection: Use Interactivity API for pagination #10361
Conversation
…hancements This commit brings significant improvements to the ProductCollection block. 1. A new property `parsed_block` is added to the class to hold the block with its attributes before it gets rendered. This allows for more complex manipulations of the block and its attributes. 2. Interactivity has been added to the product collection block. The block is marked as an interactive region so it can be updated during client-side navigation. The `add_navigation_id_directive` method is responsible for adding this functionality. This ensures better UX as users navigate through the products. 3. Navigation links inside the Query Pagination block are also made interactive. The `add_navigation_link_directives` function is responsible for this. All anchor tags in the pagination are given the `data-wc-navigation-link` attribute with relevant navigation payload. This includes prefetching and scroll behavior. The pagination links are given unique keys for 'previous' and 'next' navigation. 4. The `render_block` filter hook has been used to add these functionalities to the product collection and query pagination blocks during render.
…ct-collection-interactivity-api
The release ZIP for this PR is accessible via:
Script Dependencies ReportThe
This comment was automatically generated by the TypeScript Errors Report
🎉 🎉 This PR does not introduce new TS errors. |
Size Change: 0 B Total Size: 1.34 MB ℹ️ View Unchanged
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That's an amazing UX improvement! 👍
I checked single and multiple Product Collection blocks on:
- post
- Product Catalog template
All works great!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ohh this is awesome, much better user experience without having to reload the entire page every time we click to visit the next page.
✅ When navigating to a different page, it updates the URL with the clicked page
✅ When navigating to a different page, it changes only the content for the Product Collection block
✅ When navigating to a different page, the page is not fully reloaded
✅ When navigating to a product and return to the page with the Product Collection, the pagination is correctly updated and shows the correct products
✅ When multiple Product Collection blocks are added to the page and we navigate to a different page, it updates the URL with the clicked page for that specific Product Collection block
✅ When multiple Product Collection blocks are added to the page and we navigate to a different page, it changes only the content for that specific Product Collection block
This is a related PR in Gutenberg that introduces client-side pagination to the Query block: It has examples of:
It hasn't been reviewed yet by design or accessibility experts, so it may still change. |
Similar to PR #10200, This PR uses Interactivity API for the Product Collection block.
Changes:
Two new filter hooks,
render_block_woocommerce/product-collection
andrender_block_core/query-pagination
, are introduced. They employ the methodsadd_navigation_id_directive
andadd_navigation_link_directives
respectively.The
add_navigation_id_directive
method marks the Product Collection block as an interactive region that can be updated during client-side navigation. It adds adata-wc-navigation-id
attribute to the block content, based on thequeryId
attribute of the parsed block.The
add_navigation_link_directives
method adds interactive links to all anchors within the Query Pagination block. These interactive links receive payloads, including aprefetch
value (true for previous and next pagination links) and ascroll
value (always true). The anchors for previous and next pagination also receive a key attribute (pagination-previous
andpagination-next
respectively).render_callback
Modification: In therender_callback
method, the parsed block is stored in the$parsed_block
property.Fixes #10328
Testing
Testing with single Product Collection block in post
Here is a quick demo:
Screen.Recording.2023-07-26.at.2.59.18.PM.mov
Test with 2 or more Product Collection blocks in post
Repeat above step with two or more Product Collection blocks in same post. This ensures that blocks are isolated from each other while changing the pages.
WooCommerce Visibility
Changelog