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

Filter data count mismatch > Create the get_attribute_and_meta_counts method #8599

Merged
merged 61 commits into from
Apr 11, 2023

Conversation

nefeline
Copy link
Contributor

@nefeline nefeline commented Mar 2, 2023

In this PR, the new get_attribute_and_meta_counts method is introduced, which is responsible for fetching the counts for the Filter by Attribute block.

🎯 #8563

These queries were tailor-made to handle all combinations of filters natively supported by WooCommerce blocks, including:

  • Filter by Attribute
  • Filter by stock status
  • Filter by rating
  • Filter by price

With that said, the following use-case scenarios were taken into consideration during the development and tests phase:

1. A single Filter by Attribute block used alongside the Products (Beta) block with condition = any (or)

Screen.Recording.2023-03-31.at.12.47.39.mov

2. A single Filter by Attribute block used alongside the Products (Beta) block with condition = all (and)

Screen.Recording.2023-03-31.at.12.53.20.mov

3. Two or more Filter by Attribute blocks used alongside the Products (Beta) block

Screen.Recording.2023-03-31.at.12.43.34.mov

4. Filter by Attribute block used alongside the Filter by stock status and Products (Beta) blocks.

Screen.Recording.2023-03-31.at.12.39.38.mov

5. Filter by Attribute block used alongside the Filter by rating and Products (Beta) blocks.

Screen.Recording.2023-03-31.at.12.36.39.mov

6. Filter by Attribute block used alongside the Filter by price and Products (Beta) blocks.

Screen.Recording.2023-03-31.at.12.32.26.mov

7. Filter by Attribute block used alongside the Filter by stock status, Filter by price, Filter by rating, and Products (Beta) blocks.

Screen.Recording.2023-03-31.at.12.22.11.mov

Discussion points

  • Should we update the counts when filtering attributes with the condition = any ( or )? Currently, the counts are updated to match the filtered product results. Alternatively, we could keep the counts unchanged.

  • Should we hide products with the count = zero when the condition is all ( and )? Currently, the filtered products with counts equal to zero are intentionally hidden. Alternatively, we could keep them on the list independently of the results.

Any preferences/thoughts?

Note regarding PHP unit tests

I'm opening a separate PR for updating & fixing those.

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.

Testing

Automated Tests

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

User Facing Testing

  • With a block theme such as twenty-twenty-three enabled, head over to Edit Site > Templates > Product Catalog > Edit
  • Add the Products (Beta) block
  • Add the Filter by attribute block
  • Save and head over to your shop page
  • Ensure the filter is properly rendered, and when filtering the products, the counts always match the displayed results
  • Test all 7 combinations of filters as described and demonstrated in the description of this PR, ensure all of them work as expected.

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Changelog

Fix: The product counts for the filter by attribute block now match the displayed products with different filter combinations, including filter by price, by rating, by stock, and by other attributes as well.

@nefeline nefeline self-assigned this Mar 2, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Mar 2, 2023

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-8599.zip

Script Dependencies Report

There is no changed script dependency between this branch and trunk.

This comment was automatically generated by the ./github/compare-assets action.

TypeScript Errors Report

  • Files with errors: 450
  • Total errors: 2210

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Mar 2, 2023

Size Change: -81 B (0%)

Total Size: 1.1 MB

Filename Size Change
build/attribute-filter-frontend.js 22.5 kB -26 B (0%)
build/attribute-filter-wrapper-frontend.js 7.08 kB -28 B (0%)
build/attribute-filter.js 13.2 kB -27 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.98 kB
build/active-filters-wrapper-frontend.js 5.97 kB
build/active-filters.js 7.49 kB
build/all-products-frontend.js 11.8 kB
build/all-products.js 38.5 kB
build/all-reviews.js 7.66 kB
build/blocks-checkout.js 35.1 kB
build/breadcrumbs.js 2.05 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.38 kB
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/cart-cross-sells-products-frontend.js 9.81 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.17 kB
build/cart-blocks/cart-express-payment-frontend.js 720 B
build/cart-blocks/cart-items-frontend.js 301 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.4 kB
build/cart-blocks/cart-line-items-frontend.js 1.06 kB
build/cart-blocks/cart-order-summary-frontend.js 1.27 kB
build/cart-blocks/cart-totals-frontend.js 307 B
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/filled-cart-frontend.js 655 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.63 kB
build/cart-blocks/order-summary-discount-frontend.js 2.12 kB
build/cart-blocks/order-summary-fee-frontend.js 273 B
build/cart-blocks/order-summary-heading-frontend.js 456 B
build/cart-blocks/order-summary-shipping-frontend.js 11.8 kB
build/cart-blocks/order-summary-subtotal-frontend.js 273 B
build/cart-blocks/order-summary-taxes-frontend.js 431 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.33 kB
build/cart-frontend.js 29.3 kB
build/cart.js 48.7 kB
build/catalog-sorting.js 1.7 kB
build/checkout-blocks/actions-frontend.js 1.85 kB
build/checkout-blocks/billing-address-frontend.js 4.19 kB
build/checkout-blocks/contact-information-frontend.js 2.05 kB
build/checkout-blocks/express-payment-frontend.js 1.14 kB
build/checkout-blocks/fields-frontend.js 331 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.71 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.79 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.29 kB
build/checkout-blocks/order-summary-fee-frontend.js 275 B
build/checkout-blocks/order-summary-frontend.js 1.27 kB
build/checkout-blocks/order-summary-shipping-frontend.js 11.8 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/checkout-blocks/order-summary-taxes-frontend.js 431 B
build/checkout-blocks/payment-frontend.js 8.27 kB
build/checkout-blocks/pickup-options-frontend.js 4.14 kB
build/checkout-blocks/shipping-address-frontend.js 4.14 kB
build/checkout-blocks/shipping-method-frontend.js 2.64 kB
build/checkout-blocks/shipping-methods-frontend.js 5.83 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 310 B
build/checkout-frontend.js 30.9 kB
build/checkout.js 46.3 kB
build/customer-account.js 3.17 kB
build/featured-category.js 13.9 kB
build/featured-product.js 14.2 kB
build/filter-wrapper-frontend.js 14 kB
build/filter-wrapper.js 2.4 kB
build/general-style-rtl.css 1.31 kB
build/general-style.css 1.31 kB
build/handpicked-products.js 7.92 kB
build/legacy-template.js 5.63 kB
build/mini-cart-component-frontend.js 28.3 kB
build/mini-cart-contents-block/cart-button-frontend.js 819 B
build/mini-cart-contents-block/checkout-button-frontend.js 822 B
build/mini-cart-contents-block/empty-cart-frontend.js 361 B
build/mini-cart-contents-block/filled-cart-frontend.js 268 B
build/mini-cart-contents-block/footer-frontend.js 3.18 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 589 B
build/mini-cart-contents-block/shopping-button-frontend.js 705 B
build/mini-cart-contents-block/title-frontend.js 368 B
build/mini-cart-contents.js 17.4 kB
build/mini-cart-frontend.js 2.02 kB
build/mini-cart.js 4.49 kB
build/price-filter-frontend.js 13.9 kB
build/price-filter-wrapper-frontend.js 7.04 kB
build/price-filter.js 8.46 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-image--product-price--product-rating--product-sale-bad--49d3ecb2.js 253 B
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js 151 B
build/product-add-to-cart-frontend.js 6.42 kB
build/product-add-to-cart.js 8.81 kB
build/product-best-sellers.js 8.26 kB
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--5bce0384.js 464 B
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--product-title.js 262 B
build/product-button-frontend.js 1.91 kB
build/product-button.js 4.17 kB
build/product-categories.js 2.37 kB
build/product-category.js 9.25 kB
build/product-image-frontend.js 1.83 kB
build/product-image.js 4.29 kB
build/product-new.js 8.26 kB
build/product-on-sale.js 8.58 kB
build/product-price-frontend.js 2.11 kB
build/product-price.js 1.67 kB
build/product-query.js 11.3 kB
build/product-rating-frontend.js 1.33 kB
build/product-rating.js 920 B
build/product-results-count.js 1.66 kB
build/product-sale-badge-frontend.js 975 B
build/product-sale-badge.js 797 B
build/product-search.js 2.63 kB
build/product-sku-frontend.js 1 kB
build/product-sku.js 576 B
build/product-stock-indicator-frontend.js 1.01 kB
build/product-stock-indicator.js 647 B
build/product-summary-frontend.js 1.29 kB
build/product-summary.js 923 B
build/product-tag.js 8.75 kB
build/product-title-frontend.js 1.37 kB
build/product-title.js 3.73 kB
build/product-top-rated.js 8.49 kB
build/products-by-attribute.js 9.59 kB
build/rating-filter-frontend.js 20.8 kB
build/rating-filter-wrapper-frontend.js 5.58 kB
build/rating-filter.js 6.99 kB
build/reviews-by-category.js 11.9 kB
build/reviews-by-product.js 13 kB
build/reviews-frontend.js 7.1 kB
build/single-product.js 11 kB
build/stock-filter-frontend.js 21.1 kB
build/stock-filter-wrapper-frontend.js 5.83 kB
build/stock-filter.js 7.71 kB
build/store-notices.js 1.69 kB
build/vendors--attribute-filter-wrapper--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary--82e4ed06-frontend.js 6.82 kB
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 7.7 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-frontend.js 5.26 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js 19.4 kB
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 7.25 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/order-summary-shipping--checkout-block--24d3fc0c-frontend.js 8.25 kB
build/vendors--checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 5.44 kB
build/vendors--checkout-blocks/shipping-method-frontend.js 12 kB
build/wc-blocks-data.js 21.8 kB
build/wc-blocks-editor-style-rtl.css 5.83 kB
build/wc-blocks-editor-style.css 5.83 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 933 B
build/wc-blocks-registry.js 3.15 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.73 kB
build/wc-blocks-style-rtl.css 27.5 kB
build/wc-blocks-style.css 27.5 kB
build/wc-blocks-vendors-style-rtl.css 1.96 kB
build/wc-blocks-vendors-style.css 1.96 kB
build/wc-blocks-vendors.js 63.8 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.6 kB
build/wc-shipping-method-pickup-location.js 29.9 kB
build/woo-directives-runtime.js 2.73 kB
build/woo-directives-vendors.js 7.91 kB

compressed-size-action

@nefeline
Copy link
Contributor Author

nefeline commented Apr 7, 2023

Thanks for all the fixes. Everything tested nicely per description. Since the unit tests will be done in a separate PR, I will go ahead and approve this for now.

Excellent! Thanks for the suggestions regarding caching and spotting the glitch when more than one product meta was selected: it's great to have this out of the way sooner than later.

#8984 was created to address the PHP Unit tests: Both PRs will be merged once the tests are approved and I also get a second review on this one.

@wavvves wavvves self-requested a review April 10, 2023 12:28
@nefeline nefeline added type: bug The issue/PR concerns a confirmed bug. block: filter by attribute Issues related to the Filter by Attribute block. labels Apr 10, 2023
@opr
Copy link
Contributor

opr commented Apr 10, 2023

Bumping to 10.1.0 milestone after p1681128984753939/1681128388.500929-slack-C02UBB1EPEF

@opr opr modified the milestones: 10.0.0, 10.1.0 Apr 10, 2023
Copy link
Contributor

@thealexandrelara thealexandrelara left a comment

Choose a reason for hiding this comment

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

Thank you for working on this, I tested with different combinations of filters and it is working as expected. Great job! 🚀

@thealexandrelara thealexandrelara force-pushed the add/get-attribute-and-meta-counts-method branch from 02e77fe to 42e7b9c Compare April 11, 2023 01:19
@kmanijak
Copy link
Contributor

kmanijak commented Apr 25, 2023

I know it's been merged, but while testing the 10.1.0 I was wondering if changing counters are expected:

Should we update the counts when filtering attributes with the condition = any ( or )? Currently, the counts are updated to match the filtered product results. Alternatively, we could keep the counts unchanged.

In my opinion, it would be better to keep the counts unchanged because as a user I feel like I'm getting lost in what the number actually represents. Quite easily we can make the same filter show multiple numbers:

  • default number,
  • zero if there are no products after filtering another attribute,
  • something in between when there's a combination of at least two attributes.

@roykho
Copy link
Member

roykho commented Apr 25, 2023

Hi @kmanijak - here is actually the more detailed public discussion on this topic https://github.com/woocommerce/woocommerce-blocks/discussions/9023

@fabianmarz
Copy link

I'm still struggling updating to the recent WC version since this change broke the collection-data API endpoint mentioned here woocommerce/woocommerce#42157.

Could someone please give me some guidance how I can get a subset of products based on a category and use the filters?

Thanks!

@creative-andrew
Copy link
Contributor

creative-andrew commented Jan 29, 2024

@nefeline @roykho do we have any news on this? This PR introduced a breaking change that invalidates the following:

In addition to the above attributes, all product list attributes are supported. This allows you to get data for a certain subset of products. See the products API list products section for the full list.

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. type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
7 participants