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

Fix: Attribute Filters: allow choosing between single/multiple selection #6620

Merged
merged 6 commits into from Jul 6, 2022

Conversation

dinhtungdu
Copy link
Member

Fixes #1311

This PR:

  • Adds a new attribute and block setting allowing users to control the select behavior of the Attribute filter block between multiple and single selections.
  • Allows multi-select for dropdown when query type is set to AND.
  • Hides the query setting when the select type is set to single.
  • Optionally renders that new select type data in the Save component to avoid block mismatch issues for existing Attribute Filter blocks.

Accessibility

Other Checks

  • This PR adds/removes a feature flag & I've updated this doc .
  • This PR adds/removes an experimental interfaces and I've updated this doc
  • I tagged two reviewers because this PR makes queries to the database or I think it might have some security impact.

Screenshots

Before After
image Screen Shot 2022-06-23 at 12 11 52Screen Shot 2022-06-23 at 12 11 41
image image

Testing

Automated Tests

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

User Facing Testing

  1. Edit a page containing an attribute filter block.
  2. See no Attempt block recovery button for that block.
  3. Select that attribute filter block, and see the new setting Allow selecting multiple options? set to Multiple by default.
  4. Switch that setting to Single. See the Query Type setting disappear.
  5. Switch back to Multiple. Set display style to Dropdown and query type to AND.
  6. Save the page.
  7. Visit the page on the front end, and see that we can select multiple attributes.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Performance Impact

N/A

Changelog

Add: Allow choosing between single and multiple sections.

@dinhtungdu dinhtungdu self-assigned this Jun 23, 2022
@rubikuserbot rubikuserbot requested review from a team and albarin and removed request for a team June 23, 2022 05:41
@dinhtungdu dinhtungdu added status: needs review type: enhancement The issue is a request for an enhancement. block: filter by attribute Issues related to the Filter by Attribute block. priority: low The issue/PR is low priority—not many people are affected or there’s a workaround, etc. labels Jun 23, 2022
@dinhtungdu
Copy link
Member Author

dinhtungdu commented Jun 23, 2022

Requesting one more review from @Aljullu because this PR is based on his suggestion.

@dinhtungdu dinhtungdu requested a review from Aljullu June 23, 2022 05:44
@github-actions
Copy link
Contributor

github-actions bot commented Jun 23, 2022

Size Change: +111 B (0%)

Total Size: 875 kB

Filename Size Change
build/active-filters-frontend.js 7.26 kB -2 B (0%)
build/all-products-frontend.js 18.1 kB -9 B (0%)
build/attribute-filter-frontend.js 25 kB +15 B (0%)
build/attribute-filter.js 14.4 kB +124 B (+1%)
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.27 kB +1 B (0%)
build/checkout-frontend.js 47.9 kB -1 B (0%)
build/mini-cart-component-frontend.js 16.6 kB -2 B (0%)
build/mini-cart-contents-block/footer--mini-cart-contents-block/products-table-frontend.js 4.69 kB -1 B (0%)
build/price-filter-frontend.js 13 kB -2 B (0%)
build/product-image-frontend.js 1.84 kB +1 B (0%)
build/product-price-frontend.js 1.94 kB -1 B (0%)
build/product-summary-frontend.js 1.33 kB -2 B (0%)
build/product-tag-list-frontend.js 915 B +1 B (0%)
build/product-title-frontend.js 1.29 kB -2 B (0%)
build/single-product-frontend.js 21.4 kB -10 B (0%)
build/stock-filter-frontend.js 7.35 kB +1 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters.js 7.92 kB
build/all-products.js 33.5 kB
build/all-reviews.js 7.79 kB
build/blocks-checkout.js 17.4 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.16 kB
build/cart-blocks/cart-express-payment-frontend.js 5.06 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 321 B
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/filled-cart-frontend.js 782 B
build/cart-blocks/order-summary-coupon-form-frontend.js 2.62 kB
build/cart-blocks/order-summary-discount-frontend.js 2.12 kB
build/cart-blocks/order-summary-fee-frontend.js 274 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.35 kB
build/cart-blocks/order-summary-shipping-frontend.js 427 B
build/cart-blocks/order-summary-subtotal-frontend.js 274 B
build/cart-blocks/order-summary-taxes-frontend.js 432 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.15 kB
build/cart-frontend.js 45.6 kB
build/cart.js 44.2 kB
build/checkout-blocks/actions-frontend.js 1.41 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.12 kB
build/checkout-blocks/billing-address-frontend.js 888 B
build/checkout-blocks/contact-information-frontend.js 2.83 kB
build/checkout-blocks/express-payment-frontend.js 5.36 kB
build/checkout-blocks/fields-frontend.js 345 B
build/checkout-blocks/order-note-frontend.js 1.08 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.66 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 2.78 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.25 kB
build/checkout-blocks/order-summary-fee-frontend.js 275 B
build/checkout-blocks/order-summary-frontend.js 1.11 kB
build/checkout-blocks/order-summary-shipping-frontend.js 603 B
build/checkout-blocks/order-summary-subtotal-frontend.js 274 B
build/checkout-blocks/order-summary-taxes-frontend.js 432 B
build/checkout-blocks/payment-frontend.js 7.67 kB
build/checkout-blocks/shipping-address-frontend.js 991 B
build/checkout-blocks/shipping-methods-frontend.js 4.73 kB
build/checkout-blocks/terms-frontend.js 1.22 kB
build/checkout-blocks/totals-frontend.js 326 B
build/checkout.js 45.5 kB
build/featured-category.js 13.2 kB
build/featured-product.js 13.5 kB
build/handpicked-products.js 7.4 kB
build/legacy-template.js 2.45 kB
build/mini-cart-contents-block/empty-cart-frontend.js 364 B
build/mini-cart-contents-block/filled-cart-frontend.js 229 B
build/mini-cart-contents-block/footer-frontend.js 5.75 kB
build/mini-cart-contents-block/items-frontend.js 226 B
build/mini-cart-contents-block/products-table-frontend.js 290 B
build/mini-cart-contents-block/shopping-button-frontend.js 288 B
build/mini-cart-contents-block/title-frontend.js 367 B
build/mini-cart-contents.js 22.9 kB
build/mini-cart-frontend.js 1.72 kB
build/mini-cart.js 6.62 kB
build/price-filter.js 9 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 222 B
build/product-add-to-cart--product-button--product-image--product-title.js 2.66 kB
build/product-add-to-cart--product-button.js 564 B
build/product-add-to-cart-frontend.js 6.95 kB
build/product-add-to-cart.js 6.63 kB
build/product-best-sellers.js 7.49 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 500 B
build/product-button-frontend.js 1.84 kB
build/product-button.js 1.09 kB
build/product-categories.js 2.78 kB
build/product-category-list-frontend.js 920 B
build/product-category-list.js 502 B
build/product-category.js 8.59 kB
build/product-image.js 1.07 kB
build/product-new.js 7.77 kB
build/product-on-sale.js 8.09 kB
build/product-price.js 1.5 kB
build/product-rating-frontend.js 1.15 kB
build/product-rating.js 731 B
build/product-sale-badge-frontend.js 1.09 kB
build/product-sale-badge.js 679 B
build/product-search.js 2.18 kB
build/product-sku-frontend.js 381 B
build/product-sku.js 381 B
build/product-stock-indicator-frontend.js 1.03 kB
build/product-stock-indicator.js 621 B
build/product-summary.js 916 B
build/product-tag-list.js 497 B
build/product-tag.js 8.13 kB
build/product-title.js 909 B
build/product-top-rated.js 8.01 kB
build/products-by-attribute.js 8.7 kB
build/reviews-by-category.js 11.3 kB
build/reviews-by-product.js 12.4 kB
build/reviews-frontend.js 7.02 kB
build/single-product.js 10.1 kB
build/stock-filter.js 7.26 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.74 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 5.08 kB
build/wc-blocks-editor-style.css 5.08 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.1 kB
build/wc-blocks-style.css 22.1 kB
build/wc-blocks-vendors-style-rtl.css 1.28 kB
build/wc-blocks-vendors-style.css 1.28 kB
build/wc-blocks-vendors.js 59 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
Contributor

@Aljullu Aljullu left a comment

Choose a reason for hiding this comment

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

Looks great! I tested it with the All Products block and PHP templates and everything seems to be working fine.

Not introduced in this PR, but one suggestion: when the selection mode is Single and display style List, could we replace the checkboxes with radio inputs? I think it's better for accessibility and also a better UI. (No need to do it as part of this PR, it can be done as a follow-up)

assets/js/blocks/attribute-filter/frontend.ts Show resolved Hide resolved
@dinhtungdu
Copy link
Member Author

Not introduced in this PR, but one suggestion: when the selection mode is Single and display style List, could we replace the checkboxes with radio inputs? I think it's better for accessibility and also a better UI.

@Aljullu I thought about this too and experimented with the <RadioControl>. I decided to not use the radio for the single-choice list because users can't uncheck the selected attribute within the attribute filter block. Even we can uncheck the radio button using JS, it doesn't feel 'natural' to me to uncheck a radio input (I may be biased). What do you think?

@dinhtungdu dinhtungdu changed the title Fix: Attribute Filters: allow chosing between single/multiple selection Fix: Attribute Filters: allow choosing between single/multiple selection Jun 27, 2022
@nielslange nielslange modified the milestones: 8.0.0, 8.1.0 Jul 4, 2022
@Aljullu
Copy link
Contributor

Aljullu commented Jul 6, 2022

@Aljullu I thought about this too and experimented with the <RadioControl>. I decided to not use the radio for the single-choice list because users can't uncheck the selected attribute within the attribute filter block. Even we can uncheck the radio button using JS, it doesn't feel 'natural' to me to uncheck a radio input (I may be biased). What do you think?

Ah, good point. I didn't think about this. LGTM

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. priority: low The issue/PR is low priority—not many people are affected or there’s a workaround, etc. type: enhancement The issue is a request for an enhancement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Attribute Filters: allow chosing between single/multiple selection
3 participants