Product Filters Redesign > Overlay template part: Integrate the Overlay with the Product Filters block

[thealexandrelara]

Description

The "Product Filters" block contains a setting that allows the merchants to display the Overlay template part only when the user is on Mobile, or "Always". Upon clicking on the "trigger" button the Filters Overlay template part will be displayed.

Expected Behavior:

• Given the "Overlay" setting is set to "Mobile" for the Product Filters block, when the user is visiting the page on a mobile device and clicks on the "trigger" button, the Filters Overlay template part must appear.
• Given the "Overlay" setting is set to "Always" for the Product Filters block, when the user visits a page on any device and clicks the trigger button, the Filters Overlay template part must appear.
• Given the "Overlay" setting is set to "Never" for the Product Filters block, when the user visits a page on any device and clicks the trigger button, the Filters Overlay template part should NOT appear.

Reference images

Overlay template part

[dinhtungdu]

Unassigning myself from this for now as this issue should be worked on after https://github.com/woocommerce/woocommerce/issues/47039 which @roykho is taking.

[dinhtungdu]

I'm closing this as we're changing the design direction on the overlay.