Feature refactor wc product filter block integration #1140

crftwrk · 2025-11-29T13:54:45Z

created a new branch https://github.com/bootscore/bootscore/tree/Feature-Refactor-WC-product-filter-block-integration and merged your PR into it. New PR is now #1140.

Reason for that is that there is a lot of movement in the main branch right now and its hard to keep your PR branch up-to-date. So, your commits are save. Please update your fork to the latest Bootscore main and submit changes from a new and updated branch to the new PR branch.

Demo: https://dev.bootscore.me/shop/ (Sidebar, works only on shop pages)

Issues

Active filters removes the add-to-cart btn-loader 50da242
Active filters removes the cart toast alert in loop Fix: AJAX-cart toast messages if WC product filter block has active f… #1145, revert e40551a
Check toasts in Edge
Check range in Firefox 70e3ec3
Add filters to clear button and badges
~~Disable the range forms? Changing the value there does nothing~~
Move more SCSS stuff to classes

New Filters

bootscore/block/product/filters/content

Block Widget Styles

Card layout in sidebar

<!-- wp:woocommerce/product-filters {"metadata":{"name":"Product filters card"},"className":"card hide-wp-block-classes"} -->
<div class="wp-block-woocommerce-product-filters wc-block-product-filters card hide-wp-block-classes" style="--wc-product-filters-text-color:#111;--wc-product-filters-background-color:#fff"><!-- wp:heading {"metadata":{"name":"Filters card-header h6"},"className":"card-header h6","style":{"margin":{"top":"0","bottom":"0"}}} -->
<h2 class="wp-block-heading card-header h6">Filters</h2>
<!-- /wp:heading -->

<!-- wp:group {"metadata":{"name":"card-body"},"className":"card-body","layout":{"type":"default"}} -->
<div class="wp-block-group card-body"><!-- wp:woocommerce/product-filter-active -->
<div class="wp-block-woocommerce-product-filter-active"><!-- wp:woocommerce/product-filter-removable-chips -->
<div class="wp-block-woocommerce-product-filter-removable-chips wc-block-product-filter-removable-chips"></div>
<!-- /wp:woocommerce/product-filter-removable-chips -->

<!-- wp:woocommerce/product-filter-clear-button -->
<!-- wp:buttons {"layout":{"type":"flex","verticalAlignment":"stretched"}} -->
<div class="wp-block-buttons"><!-- wp:button {"textAlign":"center","width":100,"className":"wc-block-product-filter-clear-button is-style-outline","style":{"border":{"width":"1px"},"typography":{"textDecoration":"none"},"outline":"none","fontSize":"medium","spacing":{"padding":{"left":"8px","right":"8px","top":"5px","bottom":"5px"}}}} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 wc-block-product-filter-clear-button is-style-outline"><a class="wp-block-button__link has-text-align-center wp-element-button" style="border-width:1px;padding-top:5px;padding-right:8px;padding-bottom:5px;padding-left:8px;text-decoration:none">Clear filters</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->
<!-- /wp:woocommerce/product-filter-clear-button --></div>
<!-- /wp:woocommerce/product-filter-active -->

<!-- wp:woocommerce/product-filter-price {"className":"mb-3"} -->
<div class="wp-block-woocommerce-product-filter-price mb-3"><!-- wp:heading {"level":3,"className":"h6 mb-0"} -->
<h3 class="wp-block-heading h6 mb-0">Price</h3>
<!-- /wp:heading -->

<!-- wp:woocommerce/product-filter-price-slider -->
<div class="wp-block-woocommerce-product-filter-price-slider wc-block-product-filter-price-slider"></div>
<!-- /wp:woocommerce/product-filter-price-slider --></div>
<!-- /wp:woocommerce/product-filter-price -->

<!-- wp:woocommerce/product-filter-rating {"className":"mb-3","showCounts":true} -->
<div class="wp-block-woocommerce-product-filter-rating mb-3"><!-- wp:heading {"level":3,"className":"h6"} -->
<h3 class="wp-block-heading h6">Rating</h3>
<!-- /wp:heading -->

<!-- wp:woocommerce/product-filter-checkbox-list -->
<div class="wp-block-woocommerce-product-filter-checkbox-list wc-block-product-filter-checkbox-list"></div>
<!-- /wp:woocommerce/product-filter-checkbox-list --></div>
<!-- /wp:woocommerce/product-filter-rating -->

<!-- wp:woocommerce/product-filter-attribute {"showCounts":true,"className":"mb-3"} -->
<div class="wp-block-woocommerce-product-filter-attribute mb-3"><!-- wp:heading {"level":3,"className":"h6","style":{"spacing":{"margin":{"bottom":"0.625rem","top":"0"}}}} -->
<h3 class="wp-block-heading h6" style="margin-top:0;margin-bottom:0.625rem">Color</h3>
<!-- /wp:heading -->

<!-- wp:woocommerce/product-filter-checkbox-list -->
<div class="wp-block-woocommerce-product-filter-checkbox-list wc-block-product-filter-checkbox-list"></div>
<!-- /wp:woocommerce/product-filter-checkbox-list --></div>
<!-- /wp:woocommerce/product-filter-attribute -->

<!-- wp:woocommerce/product-filter-taxonomy {"showCounts":true,"className":"mb-3"} -->
<div class="wp-block-woocommerce-product-filter-taxonomy mb-3"><!-- wp:heading {"level":3,"className":"h6"} -->
<h3 class="wp-block-heading h6">Category</h3>
<!-- /wp:heading -->

<!-- wp:woocommerce/product-filter-checkbox-list -->
<div class="wp-block-woocommerce-product-filter-checkbox-list wc-block-product-filter-checkbox-list"></div>
<!-- /wp:woocommerce/product-filter-checkbox-list --></div>
<!-- /wp:woocommerce/product-filter-taxonomy -->

<!-- wp:woocommerce/product-filter-status {"showCounts":true} -->
<div class="wp-block-woocommerce-product-filter-status"><!-- wp:heading {"level":3,"className":"h6"} -->
<h3 class="wp-block-heading h6">Status</h3>
<!-- /wp:heading -->

<!-- wp:woocommerce/product-filter-checkbox-list -->
<div class="wp-block-woocommerce-product-filter-checkbox-list wc-block-product-filter-checkbox-list"></div>
<!-- /wp:woocommerce/product-filter-checkbox-list --></div>
<!-- /wp:woocommerce/product-filter-status --></div>
<!-- /wp:group --></div>
<!-- /wp:woocommerce/product-filters -->

…ct class replacements

Removed mobile dialog display properties and adjusted styles for product filters.

Refactor price slider styles and ensure proper use of !important.

…duct-filter-block Feature: Refactor WC product filter block integration and fix incorrect class replacements

Merge `main` into #1140

crftwrk · 2025-12-10T10:48:55Z

@murilocarvalhodev

I pushed a commit that re-adds the button loader if filter block has active filters.

But AJAX cart toast alerts are still not shown if block has active filters (Quantity button alerts works fine). Any idea?

…ilters

crftwrk · 2025-12-10T11:39:14Z

@murilocarvalhodev

Maybe i found a solution. You can quickly check it here https://dev.bootscore.me/shop/

Add Album and Beanie twice to the cart - Button loader should appear and cart toast messages should give a feedback if product is added successfully to the cart or failed.
Change quantity - toast messages should give a feedback if quantity has been successful changed
Add some filters in the block (choose Clothing and Accessoires to get the same products)
Check if button loader and toast messages appear correctly by adding/changing quantity to the cart with active filters

Let me know what you think...

…sages-if-WC-product-filter-block-has-active-filters Fix: AJAX-cart toast messages if WC product filter block has active f…

murilocarvalhodev · 2025-12-11T19:26:44Z

@murilocarvalhodev

Maybe i found a solution. You can quickly check it here https://dev.bootscore.me/shop/

Add Album and Beanie twice to the cart - Button loader should appear and cart toast messages should give a feedback if product is added successfully to the cart or failed.

Change quantity - toast messages should give a feedback if quantity has been successful changed

Add some filters in the block (choose Clothing and Accessoires to get the same products)

Check if button loader and toast messages appear correctly by adding/changing quantity to the cart with active filters

Let me know what you think...

I was analyzing your AJAX-cart update. I think there might still be some missing details. I discovered this by accident because my mouse is double-clicking.

The code doesn't seem to prevent multiple clicks (I don't know if this comes from WooCommerce) and ends up generating multiple additions and malfunctioning toasts.

multi.clicks.mp4

Another issue is that even clicking once (I also tested with my laptop's mousepad), sometimes the toasts don't appear. Perhaps it's the timing of the script's execution. Could you please confirm this? However, I tested it in anonymous mode.

possible.inconsistency.mp4

Merge `main` into #1140

…https://github.com/bootscore/bootscore into Feature-Refactor-WC-product-filter-block-integration

crftwrk · 2025-12-12T10:32:57Z

You're right, reverted in e40551a.

The toasts will become a challenge...

murilocarvalhodev and others added 9 commits November 26, 2025 11:13

Feature: Refactor WC product filter block integration and fix incorre…

6521b1f

…ct class replacements

Refactor product filters SCSS styles

0279419

Removed mobile dialog display properties and adjusted styles for product filters.

Refactor class replacements in product filters block

585d997

Prevent chips text overflow and align to the left

3919ddd

Update styles for WooCommerce product filter price slider

c643484

Refactor price slider styles and ensure proper use of !important.

Update disable-unsupported-blocks.php

d21c355

Update disable-unsupported-blocks.php

dc3640a

Update disable-unsupported-blocks.php

861d7f8

Merge pull request #1132 from murilocarvalhodev/Add-support-to-WC-pro…

479c344

…duct-filter-block Feature: Refactor WC product filter block integration and fix incorrect class replacements

crftwrk marked this pull request as draft November 29, 2025 13:54

crftwrk added documentation Improvements or additions to documentation feature WooCommerce labels Nov 29, 2025

crftwrk added this to v6.4.0 Nov 29, 2025

crftwrk moved this to Todo in v6.4.0 Nov 29, 2025

crftwrk and others added 3 commits November 29, 2025 14:59

Update disable-unsupported-blocks.php

ea968ce

Merge pull request #1142 from bootscore/main

88b46a3

Merge `main` into #1140

Fix: Readd missing add-to-cart button spinner if filter is active

50da242

Fix: AJAX-cart toast messages if WC product filter block has active f…

54becee

…ilters

crftwrk and others added 2 commits December 11, 2025 10:36

Merge pull request #1145 from bootscore/Fix-AJAX-cart-toast-alert-mes…

a3084bc

…sages-if-WC-product-filter-block-has-active-filters Fix: AJAX-cart toast messages if WC product filter block has active f…

Add range support for Firefox

70e3ec3

crftwrk and others added 5 commits December 12, 2025 10:51

Update _bootscore-woocommerce.scss

480bb6f

Merge pull request #1149 from bootscore/main

b00cd5c

Merge `main` into #1140

Update _bootscore-woocommerce.scss

ec3eb86

Merge branch 'Feature-Refactor-WC-product-filter-block-integration' of …

25335c8

…https://github.com/bootscore/bootscore into Feature-Refactor-WC-product-filter-block-integration

Revert AJAX-cart toasts if has active filters

e40551a

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Feature refactor wc product filter block integration #1140

Feature refactor wc product filter block integration #1140

Uh oh!

crftwrk commented Nov 29, 2025 •

edited

Loading

Uh oh!

crftwrk commented Dec 10, 2025 •

edited

Loading

Uh oh!

crftwrk commented Dec 10, 2025 •

edited

Loading

Uh oh!

murilocarvalhodev commented Dec 11, 2025 •

edited

Loading

Uh oh!

crftwrk commented Dec 12, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Feature refactor wc product filter block integration #1140

Are you sure you want to change the base?

Feature refactor wc product filter block integration #1140

Uh oh!

Conversation

crftwrk commented Nov 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Issues

New Filters

Block Widget Styles

Uh oh!

crftwrk commented Dec 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

crftwrk commented Dec 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

murilocarvalhodev commented Dec 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

crftwrk commented Dec 12, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

crftwrk commented Nov 29, 2025 •

edited

Loading

crftwrk commented Dec 10, 2025 •

edited

Loading

crftwrk commented Dec 10, 2025 •

edited

Loading

murilocarvalhodev commented Dec 11, 2025 •

edited

Loading