Fix: Add support to apply filters via URL for All Products block #6642
Conversation
|
Size Change: +541 B (0%) Total Size: 876 kB
ℹ️ View Unchanged
|
The price slider doesn't reset after removing price filter from the Active Filters block if the initial price filter is set from URL
rubikuserbot
requested review from
a team and
albarin
and removed request for
a team
dinhtungdu
added
status: needs review
type: enhancement
|
Requesting additional reviews because this is a quite big PR. |
@albarin Thanks for your review and testing! Do you think we should let stores enable/disable the URL updating function when filtering the All Products Block? |
dinhtungdu
changed the title
|
@albarin Thanks for your review and testing! Do you think we should let stores enable/disable the URL updating function when filtering the All Products Block? |
@albarin You're right! I also don't think it will bother users. Because if users add filter blocks to pages, they already want to filter products. |
There was a problem hiding this comment.
Nice to see this improvement! Everything seems to be working fine except the back/forward button in the All Products block with filters:
Kooha-07-06-2022-13-27-08.mp4
In the screencast above, you will notice that I have to press twice for the query URL to be cleared, and even when doing so, the filter is not cleared. Is that something that would be easy to fix?
The codebase of filter blocks are similar and I think we should refactor and extract the common logic to share between them during the cooldown periods.
Good idea! Could you create an issue for this?
|
@Aljullu In 0c2e198, I use Clearing/updating the filter on history changes is possible but we need to create a router for that purpose. By the way, using |
Looking closer at filter blocks, the logic of common actions is quite different for each filter block. In 2a94b77, I extract the logic that updates the URL or reloads the page. At the moment, it's the only logic that is worth extracting IMO. So I don't think we need to create an issue anymore. |
There was a problem hiding this comment.
Clearing/updating the filter on history changes is possible but we need to create a router for that purpose. By the way, using
pushStatewill create a new entry on every change to the query state. So I think the optima direction here is using thereplaceStatemethod. What do you think?
Makes sense and it's testing alright. 👍
Looking closer at filter blocks, the logic of common actions is quite different for each filter block. In 2a94b77, I extract the logic that updates the URL or reloads the page. At the moment, it's the only logic that is worth extracting IMO. So I don't think we need to create an issue anymore.
Sounds good.
|
|
|
@Marc-pi Thanks for your comments! I agree that we should ensure the plugin optimized for SEO. I have some questions related to your comments and love to hear your options:
WC has been applying filters through URL for a long time with filter widgets. I'm wondering how stores are dealing with the filter URL. From my research, we can use the canonical tag to avoid duplicated content issue according to this page. What do you think?
(Thanks @Aljullu for the reference!) The URL doesn't exist in DOM, the URL is changed by JS when users interact with the filter blocks. So we don't provide them to search engines. Do search engines still be able to index those URLs? |
|
"WC has been applying filters through URL for a long time with filter widgets." Level 1 - There dirty method is to add noindex on the page each time an attribute / filter is checked Please note also that we need to take care about the filter anchors. Please do not use a pure a:ref value but encapsulate it in a button with onclick event / location href value, for instance, so crawlers do not follow the url. From my knowledge Filtereverything can manage the level 3, but there should exists for sure some other plugins see https://filtereverything.pro/resources/seo-rules/ |
Fixes #6441
With this PR, when filtering for the All Products block:
This PR also:
To reviewers:
Accessibility
prefers-reduced-motionOther Checks
Screenshots
Screen.Recording.2022-06-30.at.14.38.41.mov
Testing
Automated Tests
User Facing Testing
For each filter block, ensure:
WooCommerce Visibility
Performance Impact
Changelog