This repository has been archived by the owner on Feb 23, 2024. It is now read-only.
Product Collection: Use Interactivity API for pagination #10361
Merged
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
…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.
imanish003
changed the base branch from
trunk
to
add/data-wc-navigation-directives
…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. |
imanish003
added
the
block: product collection
imanish003
changed the title
|
Size Change: 0 B Total Size: 1.34 MB ℹ️ View Unchanged
|
imanish003
added
the
type: task
woocommercebot
requested review from
a team and
thealexandrelara
and removed request for
a team
kmanijak
approved these changes
Aug 10, 2023
thealexandrelara
approved these changes
Aug 10, 2023
There was a problem hiding this comment.
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
nielslange
added
the
type: enhancement
10 tasks
|
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. |
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.
Similar to PR #10200, This PR uses Interactivity API for the Product Collection block.
Changes:
Two new filter hooks,
render_block_woocommerce/product-collectionandrender_block_core/query-pagination, are introduced. They employ the methodsadd_navigation_id_directiveandadd_navigation_link_directivesrespectively.The
add_navigation_id_directivemethod marks the Product Collection block as an interactive region that can be updated during client-side navigation. It adds adata-wc-navigation-idattribute to the block content, based on thequeryIdattribute of the parsed block.The
add_navigation_link_directivesmethod adds interactive links to all anchors within the Query Pagination block. These interactive links receive payloads, including aprefetchvalue (true for previous and next pagination links) and ascrollvalue (always true). The anchors for previous and next pagination also receive a key attribute (pagination-previousandpagination-nextrespectively).render_callbackModification: In therender_callbackmethod, the parsed block is stored in the$parsed_blockproperty.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