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

Add/attributes filter count display toggle #9833

Merged
merged 7 commits into from
Jun 22, 2023

Conversation

roykho
Copy link
Member

@roykho roykho commented Jun 14, 2023

Fixes #9298

This PR changes the default setting for Display product count from true to false per discussion in the issue above.

Testing

User Facing Testing

  1. Log in to your WordPress dashboard.
  2. On the left-hand menu, you'll see either "Posts" or "Pages". Click on the one you wish to create.
    Click "Add New".
  3. Enter the title of your new post/page in the field at the top.
  4. Click on the "+" button in the top left corner of the editor or within your post/page draft to add a new block. Search and add the following blocks to the editor: Filter by Attributes, Filter by Stock, Filter by Rating, and Products (beta).
  5. Click on each block that you added, on the right side, check that the "Display product count" setting is available. By default the option should be disabled and no product count should be displayed on the Editor for the added filters.
  6. Visit the post/page that you just created and check that the product count is NOT displayed for the filters.
  7. For each block, toggle the "Display product count" setting (to enable it) and check if the change is reflected on the Editor (the product count is displayed).
  8. On the top-right side, click on the Save button.
  9. Visit the post/page that you just created and check that the product count is being displayed for the filters.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Performance Impact

Changelog

Update Display product count option to default to false in Filter by Attributes, Filter by Stock and Filter by Rating blocks.

@roykho roykho added block: filter by attribute Issues related to the Filter by Attribute block. block: filter by stock Issues related to the Filter by Stock block. block: filter by rating Issues related to the Filter by Rating block. labels Jun 14, 2023
@woocommercebot woocommercebot requested review from a team and gigitux and removed request for a team June 14, 2023 17:20
@github-actions
Copy link
Contributor

github-actions bot commented Jun 14, 2023

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-9833.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: 464
  • Total errors: 2213

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Jun 14, 2023

Size Change: +107 B (0%)

Total Size: 1.1 MB

Filename Size Change
build/active-filters.js 7.48 kB +2 B (0%)
build/all-products.js 40.3 kB -9 B (0%)
build/all-reviews.js 7.86 kB +1 B (0%)
build/attribute-filter-wrapper-frontend.js 4.29 kB -3 B (0%)
build/attribute-filter.js 13.3 kB +63 B (0%)
build/cart.js 45.2 kB +2 B (0%)
build/checkout.js 46.6 kB -2 B (0%)
build/featured-category.js 15.1 kB -3 B (0%)
build/featured-product.js 15.3 kB -1 B (0%)
build/filter-wrapper-frontend.js 14.3 kB -4 B (0%)
build/handpicked-products.js 8.05 kB +3 B (0%)
build/legacy-template.js 6.8 kB -3 B (0%)
build/mini-cart-contents.js 18.1 kB +1 B (0%)
build/mini-cart.js 5.92 kB +2 B (0%)
build/price-filter.js 8.56 kB +3 B (0%)
build/product-add-to-cart.js 8.84 kB +1 B (0%)
build/product-best-sellers.js 8.36 kB +1 B (0%)
build/product-button.js 3.97 kB -1 B (0%)
build/product-categories.js 2.7 kB -2 B (0%)
build/product-category.js 9.37 kB +1 B (0%)
build/product-collection.js 12.3 kB +4 B (0%)
build/product-image.js 4.14 kB -2 B (0%)
build/product-new.js 8.65 kB +3 B (0%)
build/product-on-sale.js 8.65 kB +1 B (0%)
build/product-price.js 1.68 kB -1 B (0%)
build/product-query.js 11.9 kB -1 B (0%)
build/product-summary.js 1 kB -3 B (0%)
build/product-tag.js 9.01 kB +2 B (0%)
build/product-title.js 3.66 kB -5 B (0%)
build/products-by-attribute.js 9.75 kB -2 B (0%)
build/rating-filter-frontend.js 21.4 kB -3 B (0%)
build/rating-filter-wrapper-frontend.js 6.2 kB -2 B (0%)
build/rating-filter.js 6.93 kB +30 B (0%)
build/reviews-by-category.js 12.1 kB -1 B (0%)
build/single-product.js 11.1 kB +2 B (0%)
build/stock-filter-wrapper-frontend.js 2.98 kB -3 B (0%)
build/stock-filter.js 7.66 kB +44 B (+1%)
build/wc-blocks-vendors.js 65.1 kB -4 B (0%)
build/wc-blocks.js 3.7 kB -4 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 8.64 kB
build/active-filters-wrapper-frontend.js 7.61 kB
build/all-products-frontend.js 12 kB
build/attribute-filter-wrapper--stock-filter-wrapper-frontend.js 4.04 kB
build/blocks-checkout.js 35.1 kB
build/breadcrumbs.js 2.13 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.39 kB
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/cart-cross-sells-products--product-price-frontend.js 2.92 kB
build/cart-blocks/cart-cross-sells-products-frontend.js 3.77 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.17 kB
build/cart-blocks/cart-express-payment-frontend.js 719 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.57 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 309 B
build/cart-blocks/empty-cart-frontend.js 346 B
build/cart-blocks/filled-cart-frontend.js 656 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 334 B
build/cart-blocks/order-summary-shipping-frontend.js 17.1 kB
build/cart-blocks/order-summary-subtotal-frontend.js 273 B
build/cart-blocks/order-summary-taxes-frontend.js 433 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.44 kB
build/cart-frontend.js 30 kB
build/catalog-sorting.js 1.7 kB
build/checkout-blocks/actions-frontend.js 1.88 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.7 kB
build/checkout-blocks/billing-address-frontend.js 1.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.13 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.75 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 276 B
build/checkout-blocks/order-summary-frontend.js 1.27 kB
build/checkout-blocks/order-summary-shipping-frontend.js 17 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 274 B
build/checkout-blocks/order-summary-taxes-frontend.js 434 B
build/checkout-blocks/payment-frontend.js 8.28 kB
build/checkout-blocks/pickup-options-frontend.js 4.84 kB
build/checkout-blocks/shipping-address-frontend.js 1.17 kB
build/checkout-blocks/shipping-method-frontend.js 2.63 kB
build/checkout-blocks/shipping-methods-frontend.js 6.4 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 362 B
build/checkout-frontend.js 31.9 kB
build/customer-account.js 3.18 kB
build/filter-wrapper.js 2.4 kB
build/general-style-rtl.css 1.31 kB
build/general-style.css 1.31 kB
build/mini-cart-component-frontend.js 30.6 kB
build/mini-cart-contents-block/cart-button-frontend.js 1.72 kB
build/mini-cart-contents-block/checkout-button-frontend.js 1.81 kB
build/mini-cart-contents-block/empty-cart-frontend.js 361 B
build/mini-cart-contents-block/filled-cart-frontend.js 267 B
build/mini-cart-contents-block/footer-frontend.js 3.81 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 594 B
build/mini-cart-contents-block/shopping-button-frontend.js 527 B
build/mini-cart-contents-block/title-frontend.js 1.89 kB
build/mini-cart-contents-block/title-items-counter-frontend.js 1.59 kB
build/mini-cart-contents-block/title-label-frontend.js 1.52 kB
build/mini-cart-frontend.js 2.84 kB
build/price-filter-wrapper-frontend.js 6.75 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 250 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.51 kB
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--5bce0384.js 955 B
build/product-button-frontend.js 2.65 kB
build/product-image-frontend.js 2.61 kB
build/product-price-frontend.js 204 B
build/product-rating-frontend.js 2.33 kB
build/product-rating.js 1.03 kB
build/product-results-count.js 1.66 kB
build/product-sale-badge-frontend.js 1.78 kB
build/product-sale-badge.js 666 B
build/product-search.js 2.63 kB
build/product-sku-frontend.js 1.83 kB
build/product-sku.js 535 B
build/product-stock-indicator-frontend.js 2.02 kB
build/product-stock-indicator.js 731 B
build/product-summary-frontend.js 2.24 kB
build/product-template.js 3.34 kB
build/product-title-frontend.js 2.21 kB
build/product-top-rated.js 8.91 kB
build/reviews-by-product.js 13.3 kB
build/reviews-frontend.js 7.17 kB
build/store-notices.js 1.68 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--48e1e4bb-frontend.js 6.82 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-shipping--checkout-blocks/billing-addr--d9f38f9d-frontend.js 4.21 kB
build/vendors--attribute-filter-wrapper--stock-filter-wrapper-frontend.js 5.11 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-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.58 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js 19.4 kB
build/vendors--checkout-blocks/pickup-options--checkout-blocks/shipping-methods-frontend.js 8.25 kB
build/vendors--checkout-blocks/shipping-method-frontend.js 12.5 kB
build/vendors--price-filter-wrapper-frontend.js 2.2 kB
build/vendors--product-add-to-cart-frontend.js 7.26 kB
build/vendors--rating-filter-wrapper-frontend.js 5.1 kB
build/wc-blocks-data.js 22.3 kB
build/wc-blocks-editor-style-rtl.css 6.21 kB
build/wc-blocks-editor-style.css 6.21 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 934 B
build/wc-blocks-registry.js 3.15 kB
build/wc-blocks-shared-context.js 1.1 kB
build/wc-blocks-shared-hocs.js 1.75 kB
build/wc-blocks-style-rtl.css 28 kB
build/wc-blocks-style.css 28 kB
build/wc-blocks-vendors-style-rtl.css 1.96 kB
build/wc-blocks-vendors-style.css 1.96 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 30.4 kB
build/woo-directives-runtime.js 2.73 kB
build/woo-directives-vendors.js 7.91 kB

compressed-size-action

@roykho roykho requested review from gigitux and removed request for gigitux June 19, 2023 13:31
@gigitux
Copy link
Contributor

gigitux commented Jun 21, 2023

Thanks for working on this!
I followed your testing instructions, and the setting didn't change after the page refresh.

Also, I noticed that it is necessary to add the deprecation even if we just change the value of an attribute because we still save the block attributes in the post_content on the save callback (source code).

I'm unaware of a specific reason why we are doing it, so I think this is an excellent chance to refactor this (maybe in a follow-up PR). What do you think?

@roykho
Copy link
Member Author

roykho commented Jun 21, 2023

Hi @gigitux I've refactored to remove the attributes being saved to HTML. Please let me know if this is correct and if I need to make any additional changes.

Copy link
Contributor

@gigitux gigitux left a comment

Choose a reason for hiding this comment

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

LGTM! Thanks for working on the feedback 🙇 I noticed that the Product Rating Preview isn't correct in a specific condition: If the store doesn't have any ratings, the block displays a preview with "fake data" and it shows the product counter even if it is set to off:

image

Should we open an issue and fix it?

Furthermore, could you open another issue about the Active Filters block that store the attributes in the HTML?

@roykho roykho mentioned this pull request Jul 3, 2023
1 task
@opr opr added the type: enhancement The issue is a request for an enhancement. label Jul 4, 2023
@gigitux gigitux mentioned this pull request Jul 4, 2023
4 tasks
@nielslange nielslange mentioned this pull request Jul 6, 2023
5 tasks
@Aljullu Aljullu mentioned this pull request Jul 6, 2023
4 tasks
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. block: filter by rating Issues related to the Filter by Rating block. block: filter by stock Issues related to the Filter by Stock block. type: enhancement The issue is a request for an enhancement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Product Filters > Add new setting for enabling/disabling filter counts
3 participants