Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Filter Products by Attribute: Fix the page reload which happens when clicking the filter button on PHP templates #6287

Merged
merged 8 commits into from
Apr 22, 2022

Conversation

tjcafferkey
Copy link
Contributor

@tjcafferkey tjcafferkey commented Apr 20, 2022

This PR fixes the page reload which is triggered immediately when you uncheck an attribute filter when the "Filter button" option is enabled.

Fixes #6283
Fixes #6282

Testing

Automated Tests

  • Changes in this PR are covered by Automated Tests.
    • Unit tests
    • E2E tests

Manual Testing

How to test the changes in this Pull Request:

  1. On a block theme, go to Edit Site > Product Catalog template.
  2. Add Active Filters and Filter Products by Attribute block to the template.
  3. Choose an attribute to filter, and make sure the filter button is toggled.
  4. Go to the shop page.
  5. Select an attribute, a reload should not happen until you click the filter button.
  6. Once the filter has been applied. Uncheck it, a reload should not happen until you click the filter button.
  7. Try this again with the filter button untoggled, although these reloads should now happen as soon as you check the attribute you're filtering by
  8. Check there are no regressions on All Products block.

User Facing Testing

These are steps for user testing (where "user" is someone interacting with this change that is not editing any code).

  • Same as above, or
  • See steps below.

Performance Impact

Changelog

Filter Products by Attribute: Fix the page reload which happens when clicking the filter button on Woo templates using the Classic Template block

@tjcafferkey tjcafferkey added type: bug The issue/PR concerns a confirmed bug. block: filter by attribute Issues related to the Filter by Attribute block. focus: FSE Work related to prepare WooCommerce for FSE. labels Apr 20, 2022
@tjcafferkey tjcafferkey requested a review from dinhtungdu April 20, 2022 14:51
@tjcafferkey tjcafferkey self-assigned this Apr 20, 2022
@rubikuserbot rubikuserbot requested a review from a team April 20, 2022 14:52
@github-actions
Copy link
Contributor

github-actions bot commented Apr 20, 2022

Size Change: +137 B (0%)

Total Size: 868 kB

Filename Size Change
build/active-filters-frontend.js 5.93 kB +8 B (0%)
build/active-filters.js 6.6 kB +6 B (0%)
build/all-products-frontend.js 18.1 kB -3 B (0%)
build/all-products.js 33.4 kB -1 B (0%)
build/all-reviews.js 7.78 kB +2 B (0%)
build/attribute-filter-frontend.js 17.7 kB +56 B (0%)
build/attribute-filter.js 13.5 kB +58 B (0%)
build/cart-blocks/cart-express-payment-frontend.js 5.24 kB +2 B (0%)
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.27 kB +1 B (0%)
build/cart-blocks/order-summary-discount-frontend.js 2.31 kB -1 B (0%)
build/cart.js 44.3 kB +1 B (0%)
build/checkout-blocks/actions-frontend.js 1.41 kB -1 B (0%)
build/checkout-blocks/express-payment-frontend.js 5.54 kB -1 B (0%)
build/checkout-blocks/payment-frontend.js 7.84 kB -1 B (0%)
build/checkout-blocks/shipping-methods-frontend.js 4.71 kB -1 B (0%)
build/checkout-frontend.js 47.7 kB -1 B (0%)
build/checkout.js 45.6 kB +4 B (0%)
build/featured-category.js 12.1 kB +5 B (0%)
build/featured-product.js 10.6 kB +3 B (0%)
build/handpicked-products.js 7.11 kB +1 B (0%)
build/mini-cart-component-frontend.js 16.6 kB +2 B (0%)
build/mini-cart-contents.js 22.7 kB +2 B (0%)
build/price-filter.js 8.49 kB -2 B (0%)
build/product-add-to-cart-frontend.js 6.96 kB +1 B (0%)
build/product-add-to-cart.js 6.64 kB -1 B (0%)
build/product-button-frontend.js 1.84 kB +1 B (0%)
build/product-stock-indicator-frontend.js 1.03 kB +1 B (0%)
build/reviews-by-product.js 12.2 kB -1 B (0%)
build/reviews-frontend.js 7 kB +2 B (0%)
build/single-product-frontend.js 21.5 kB -4 B (0%)
build/wc-blocks-vendors.js 71.4 kB -1 B (0%)
ℹ️ View Unchanged
Filename Size
build/blocks-checkout.js 17.4 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.16 kB
build/cart-blocks/cart-items-frontend.js 299 B
build/cart-blocks/cart-line-items-frontend.js 432 B
build/cart-blocks/cart-order-summary-frontend.js 1.11 kB
build/cart-blocks/cart-totals-frontend.js 322 B
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/filled-cart-frontend.js 783 B
build/cart-blocks/order-summary-coupon-form-frontend.js 2.81 kB
build/cart-blocks/order-summary-fee-frontend.js 273 B
build/cart-blocks/order-summary-heading-frontend.js 454 B
build/cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping-frontend.js 6.34 kB
build/cart-blocks/order-summary-shipping-frontend.js 429 B
build/cart-blocks/order-summary-subtotal-frontend.js 274 B
build/cart-blocks/order-summary-taxes-frontend.js 433 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.15 kB
build/cart-frontend.js 45.5 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.12 kB
build/checkout-blocks/billing-address-frontend.js 892 B
build/checkout-blocks/contact-information-frontend.js 2.83 kB
build/checkout-blocks/fields-frontend.js 345 B
build/checkout-blocks/order-note-frontend.js 1.07 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.67 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 2.96 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.43 kB
build/checkout-blocks/order-summary-fee-frontend.js 275 B
build/checkout-blocks/order-summary-frontend.js 1.1 kB
build/checkout-blocks/order-summary-shipping-frontend.js 603 B
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/checkout-blocks/order-summary-taxes-frontend.js 432 B
build/checkout-blocks/shipping-address-frontend.js 996 B
build/checkout-blocks/terms-frontend.js 1.22 kB
build/checkout-blocks/totals-frontend.js 326 B
build/legacy-template.js 2.19 kB
build/mini-cart-contents-block/empty-cart-frontend.js 326 B
build/mini-cart-contents-block/filled-cart-frontend.js 230 B
build/mini-cart-contents-block/footer--mini-cart-contents-block/products-table-frontend.js 4.69 kB
build/mini-cart-contents-block/footer-frontend.js 5.64 kB
build/mini-cart-contents-block/items-frontend.js 225 B
build/mini-cart-contents-block/products-table-frontend.js 288 B
build/mini-cart-contents-block/shopping-button-frontend.js 287 B
build/mini-cart-contents-block/title-frontend.js 366 B
build/mini-cart-frontend.js 1.72 kB
build/mini-cart.js 6.1 kB
build/price-filter-frontend.js 12.5 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-category-list--product-image--product-price--product-r--a0326d00.js 223 B
build/product-add-to-cart--product-button--product-image--product-title.js 2.65 kB
build/product-add-to-cart--product-button.js 565 B
build/product-best-sellers.js 7.38 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 500 B
build/product-button.js 1.08 kB
build/product-categories.js 2.78 kB
build/product-category-list-frontend.js 925 B
build/product-category-list.js 502 B
build/product-category.js 8.49 kB
build/product-image-frontend.js 1.84 kB
build/product-image.js 1.07 kB
build/product-new.js 7.68 kB
build/product-on-sale.js 7.99 kB
build/product-price-frontend.js 1.94 kB
build/product-price.js 1.5 kB
build/product-rating-frontend.js 1.15 kB
build/product-rating.js 730 B
build/product-sale-badge-frontend.js 1.09 kB
build/product-sale-badge.js 680 B
build/product-search.js 2.18 kB
build/product-sku-frontend.js 380 B
build/product-sku.js 382 B
build/product-stock-indicator.js 621 B
build/product-summary-frontend.js 1.33 kB
build/product-summary.js 918 B
build/product-tag-list-frontend.js 919 B
build/product-tag-list.js 496 B
build/product-tag.js 7.81 kB
build/product-title-frontend.js 1.3 kB
build/product-title.js 910 B
build/product-top-rated.js 7.91 kB
build/products-by-attribute.js 8.39 kB
build/reviews-by-category.js 11.2 kB
build/single-product.js 10 kB
build/stock-filter-frontend.js 6.87 kB
build/stock-filter.js 6.92 kB
build/vendors--cart-blocks/cart-line-items--cart-blocks/cart-order-summary--cart-blocks/order-summary-shi--c02aad66-frontend.js 5.26 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.14 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--5b8feb0b-frontend.js 4.75 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js 20.5 kB
build/vendors--mini-cart-contents-block/footer-frontend.js 6.86 kB
build/vendors--product-add-to-cart-frontend.js 7.53 kB
build/wc-blocks-data.js 9.87 kB
build/wc-blocks-editor-style-rtl.css 4.92 kB
build/wc-blocks-editor-style.css 4.92 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 930 B
build/wc-blocks-registry.js 2.7 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.14 kB
build/wc-blocks-style-rtl.css 22 kB
build/wc-blocks-style.css 22 kB
build/wc-blocks-vendors-style-rtl.css 1.28 kB
build/wc-blocks-vendors-style.css 1.28 kB
build/wc-blocks.js 2.63 kB
build/wc-payment-method-bacs.js 816 B
build/wc-payment-method-cheque.js 811 B
build/wc-payment-method-cod.js 909 B
build/wc-payment-method-paypal.js 837 B
build/wc-settings.js 2.61 kB

compressed-size-action

Copy link
Member

@dinhtungdu dinhtungdu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@tjcafferkey Thanks for the PR! I can confirm that the page doesn't reload anymore after selecting the attribute within the block with the filter button. But look like the issue with Active Filters is still there. In the screenshot below, only selected attributes from the Filter by Color block appear in the Active Filters block, Color filter doesn't have a filter button while the Size filter does:

image

@tjcafferkey
Copy link
Contributor Author

@dinhtungdu good catch, I've just pushed a commit to fix that!

@tjcafferkey tjcafferkey requested a review from dinhtungdu April 21, 2022 10:03
Copy link
Member

@dinhtungdu dinhtungdu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@tjcafferkey with 97a684c, the first issue comes back, please check my screencast for more detail. I tested with the Filter button enabled.

Screen.Recording.2022-04-21.at.17.51.55.mov

@tjcafferkey tjcafferkey requested a review from dinhtungdu April 21, 2022 11:59
Copy link
Member

@dinhtungdu dinhtungdu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I got a weird behavior with the filter button enabled block:

  1. Enable the filter button for Filter Products by Attribute block.
  2. On the front end, select one or two attributes, and click the filter button.
  3. See the page reload: the filtered product result is correct, and the selected attributes appear in the Active Filters block => which are expected behaviors.
  4. The Filter Products by Attribute now only shows selected attributes, with product count set to 0.
  5. In my case, I have another Filter block by another attribute (filter button disabled), that block disappears after the page load.
Screen.Recording.2022-04-21.at.22.58.39.mov

@tjcafferkey tjcafferkey requested a review from dinhtungdu April 22, 2022 06:15
Copy link
Member

@dinhtungdu dinhtungdu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks so much for your updates! Finally, it's working now! :shipit:

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: filter by attribute Issues related to the Filter by Attribute block. focus: FSE Work related to prepare WooCommerce for FSE. type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
2 participants