All Products block with filters: avoid showing loading placeholders if there are no results

[Aljullu]

Fixes #1137.

Screenshots

Before:

After:

How to test the changes in this Pull Request:

1. Create a post with the All Products block and the Filter Products by Price block.
2. Set the price filter values so no results are shown (in my store, I didn't have any product between 70 and 80 €).
3. Verify it doesn't show loading placeholders when there are no results.

Questions

Even though I marked this PR as needs review, in some way I feel it's still in progress because it would make sense to answer these two questions first:

• Should we display a message like No products found matching your criteria instead of making the space completely empty?
• Should we hide the sort select as well?

[jwold]

In situations where there are no search results I would suggest:

1. Let's hide the sort select, good idea!
2. Let's display a message, I like your suggestion:

"No products found matching your criteria"

3. Pedro mentioned adding suggestions for products that would match the results chosen. In this case I'm not sure if it's necessary. Here's my logic - If someone has a list of a bunch of products, let's say 5-100, and they can see those products on a single page in the All Products Block, then they already know what exists. As they narrow the "filter by price" fields, and drag the arrows around, they'll naturally see that the results are changing. This will, of course, work better on desktop, but I think it could still work on mobile.

The act of moving the filters around shows where there are products, and shows when there aren't products. It's a natural act, and one of the few scenarios where I'd be ok seeing no results, as long as there was a clear message that said so.

cc @pmcpinto and @garymurray

[Aljullu]

Thanks for the feedback @jwold. I updated this PR so the Sort select is hidden and a message appears when there are no products matching the current filters. I updated a screenshot on the PR description so you can see how it looks in case you have any design suggestion.

[jwold]

Thanks @Aljullu! That looks great.

[mikejolley]

I'm not fond of the text "No products found matching your criteria." for this tbh. This text applies if no products are found which could be caused by having no published/purchasable products at any time, or if we roll out this system to other grid blocks the admin may setup blocks with criteria that match no products. It's not necessarily 'your criteria' unless you are using filters.

Also not sure why we would use 'criteria' wording here instead of the more obvious "filters" or "search"?

I think there needs to be 2 messages, one of which being more generic. No filters active, but no products found:

There are currently no products to display.

(or similar)

Filters active:

No products found matching your search.

I think the later could use a reset link but I guess it's not mandatory, unless the user isn't using active filters block.. so there may be a use case for a simple reset button.

I am also a fan of blank state images/graphics, but maybe that's not suitable here :)

[jwold]

Good feedback @mikejolley! Makes sense to have two different messages.

I'm fine with using the wording you suggested, or we could tweak it a bit:

If we want to use an illustration I can clean these up (including them as SVGs just in case you want to just go live with them now)

SVG.zip

cc @garymurray as well for feedback on the illustrations.

[garymurray]

First minor thing - I think the text under top two illustrations is incorrect - it currently now says: There are currently products to display - but this is an illustration for when there are no products?

With regards to the illustrations:

• These specific illustrations - I prefer A over B in the first two
• For the general style, I think we should get input from Andrei - I could not find his handle for Github though so it might be a direct ping. My general feel is that this specific illustration feel might only suit some sites, whereas what we have here should suit the majority of sites - so maybe it needs to be a more generic illustration style.

With regards to customisation:

• Will a merchant be able to change out the icon/illustration we use their to something custom if they want, i.e. will it be part of the block settings?

[mikejolley]

These are cool @jwold thanks. Let me try implementing them in a PR, then we can iterate on design as needed.

[mikejolley]

I have this working but out of time, Ill commit this up in the morning.

[senadir]

Reported this on #1178 but I see it was here as well, having no products seems to cause the filter by price slider to have NaN, previously, it just didn’t load

Also, this PR seems to break previous instances of filter block, not sure if we’re in a state to provide depreciation blocks yet

[nerrad]

Also, this PR seems to break previous instances of filter block, not sure if we’re in a state to provide depreciation blocks yet

This was expected as it's unreleased :)

[mikejolley]

Gonna close in favour of #1178