This repository has been archived by the owner on Feb 23, 2024. It is now read-only.
Product Collection - New 'No Results' block with default UI #11783
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 introduces a new 'No Results' block, replacing the default core 'query-no-results' block within product collection block. The 'No Results' block provides a tailored experience for WooCommerce stores, displaying a custom message when no products are found in a query. Key changes include: - A new block type 'woocommerce/no-results' is registered with a complete configuration and content structure. - Edit and save functions are implemented for the block, allowing for custom content and styles within the block editor and on the front end. - Webpack entries are updated to include the new block in the build process. - A PHP class NoResults is added for server-side rendering, which only displays the block when the product query returns no results, enhancing performance. - The ProductCollectionUtils utility class is extended to support the new block's query needs. The new block enriches the user experience by providing clearer communication when no products match the collection criteria and allows store owners to customize the message and presentation.
imanish003
changed the title
imanish003
added
type: enhancement
|
The release ZIP for this PR is accessible via: Script Dependencies ReportThe
This comment was automatically generated by the TypeScript Errors Report
assets/js/blocks/product-collection/inner-blocks/no-results/index.tsx
|
|
Size Change: +2.08 kB (0%) Total Size: 1.59 MB
ℹ️ View Unchanged
|
woocommercebot
requested review from
a team and
roykho
and removed request for
a team
kmanijak
approved these changes
Nov 16, 2023
Changes include: - Updating the block name in `edit.tsx` within the `product-collection` directory. - Modifying the block.json file in the `no-results` inner block to reflect the new name. - Adjusting the className in `edit.tsx` for the `no-results` inner block. - Altering the webpack entries in `webpack-entries.js` to recognize the new block name. - Renaming the block in `NoResults.php` to align with this update. This renaming aims to make the block's purpose more clear and to maintain a consistent naming scheme within our product collection blocks.
This commit renames the `NoResults` class to `ProductCollectionNoResults`. The change aims to enhance clarity and specificity about the class's purpose, indicating that it specifically handles no-result scenarios within product collections. Changes made: - Renamed `NoResults.php` to `ProductCollectionNoResults.php`. - Updated the class name from `NoResults` to `ProductCollectionNoResults` in the file. - Modified the reference in `BlockTypesController.php` to use the new class name. This renaming ensures better readability and understanding of the class's role in the context of product collections. The primary change is the renaming, with no significant alterations in the class functionality.
|
Hi @kmanijak, I've implemented the change you requested. Could you please review the PR once more before I proceed with merging it into trunk? Thank you 🙌🏻 |
xristos3490
reviewed
Nov 17, 2023
There was a problem hiding this comment.
Nice work, @imanish003 👌
I have two comments based on the screenshot below:
- How about removing the dot from the heading?
- These inline paragraphs are creating a strange gap between words. Would it be possible to concat everything into a single paragraph block?
This commit simplifies the layout and message content for the 'No results found' message in the product collection block's no-results edit component. The changes include: 1. Removal of the full stop in the 'No results found' string for consistency. 2. Replacing the 'core/group' block with a 'core/paragraph' block. 3. Streamlining the message content to be more concise and integrated into fewer text blocks. 4. Direct links for 'clearing any filters' and navigating to the 'store's home' are now included in the same paragraph.
|
Great spot, @xristos3490 – thank you! 🙏🏻 |
xristos3490
approved these changes
Nov 17, 2023
Rechecked after recent changes and all looks good! PS. Great catches @xristos3490! 🙌 |
wavvves
deleted the
update/10826-product-collection-enhance-no-results-view
branch
wavvves
removed
the
type: task
12 tasks
12 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.
What
This PR introduces a custom 'No Results' block for the Product Collection block, specifically designed to replace the default core 'query-no-results' block usage. This new block provides the following default view when there are no products for selected filters.
Part of #10826
Why
Developing a new "No Results" block is essential for an improved default user interface. This initiative will lay the groundwork for enhancing the user experience for merchants. Additionally, it will facilitate the creation of extensibility options for third-party developers (3PDs). Furthermore, we plan to introduce a pattern selection feature, enabling merchants to customize the appearance of the "No Results" view. For more info, you may also check Github Discussion #10707.
Testing Instructions
Please consider any edge cases this change may have, and also other areas of the product this may impact.
Case 1: Normal
Create a new post & add Product Collection block
Verify that there is "No results" block, which UI should look like this:
Save the post & verify on Frontend that "No results" blocks work as expected:
There are two links on frontend:
Case 2: Testing
clearing any filterslinkhttp://store.local/162-2/?filter_stock_status=instock&filter_color=blue%2Cgray&query_type_color=or&min_price=29&max_price=32&random=value& URL will look something like this:http://store.local/162-2/?filter_stock_status=instock&filter_color=blue%2Cgray&query_type_color=or&min_price=29&max_price=32&random=valueclearing any filtersonly removes query variables that are related to filters & doesn't remove this random query variable we added.Case 3: Adding styles to "No results" block
Case 4: Adding/removing blocks
Here is a quick demo:
Screen.Recording.2023-11-15.at.4.30.14.pm.mov
Screenshots or screencast
WooCommerce Visibility
Required:
Checklist
Required:
[type]label or a[skip-changelog]label.Conditional:
[skip-changelog]label is not present).Changelog