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

[Product Query] Fix filter block data counter #7257

Merged
merged 36 commits into from
Nov 2, 2022
Merged

Conversation

gigitux
Copy link
Contributor

@gigitux gigitux commented Sep 29, 2022

This PR is blocked by #7251 #7186.

If you want to see only the code related to this PR, please check the commit b8bf17e

This PR is an attempt to allow the filter blocks to render the right data when a variation is used.
For example when on the page there is the On Sale Products variation:

  • the Filter Products by Price block has to render as the max price: $55.00.
  • the Filter Products by Stock block has to render as a counter for "in-stock product" 7 and hasn't to render the option "out of stock".

Technical details

The backend does a query to the database to retrieve all the product ids reading the attributes used by the specific variation. The function is:get_products_ids_by_attributes.

Technical issue

With this implementation, we can't support different Product Query blocks on the same page. Also, not sure how it works with hydration :(

Fixes #7245

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 image

The data in the first image are wrong because:

  • the most expensive on-sale product costs $55.00.
  • there isn't an on-sale product out of stock.

Testing

Automated Tests

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

User Facing Testing

  1. Add a Product Query and enable ´Show only products on sale´.
  2. Add the Filter Products by Price block and add the Filter Products by stock block.
  3. Save and on the frontend be sure that the max price is $55.00 and there isn't the option "out of stock".
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Performance Impact

Changelog

N/A

Product Query - Add support for the Filter By Price Block
Product Query - Add support for the Filter By Attributes block
Product Query - Add support for the Filter By Stock Block
…e variation #7245

fix filter blocks: the data (e.g: max price or stock-status) match the variation
@gigitux gigitux added skip-changelog PRs that you don't want to appear in the changelog. block-type: product-query Issues related to/affecting all product-query variations. labels Sep 29, 2022
@gigitux gigitux self-assigned this Sep 29, 2022
@github-actions
Copy link
Contributor

The release ZIP for this PR is accessible via:

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

@github-actions
Copy link
Contributor

github-actions bot commented Sep 29, 2022

Size Change: +580 B (0%)

Total Size: 1000 kB

Filename Size Change
build/active-filters-frontend.js 7.72 kB +1 B (0%)
build/active-filters-wrapper-frontend.js 6 kB +1 B (0%)
build/all-products-frontend.js 26.5 kB -4 B (0%)
build/attribute-filter-frontend.js 22.6 kB +56 B (0%)
build/attribute-filter-wrapper-frontend.js 7.12 kB +55 B (+1%)
build/attribute-filter.js 12.3 kB +57 B (0%)
build/cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 5.63 kB +1 B (0%)
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.1 kB -2 B (0%)
build/cart-blocks/cart-express-payment-frontend.js 785 B +1 B (0%)
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.31 kB -1 B (0%)
build/cart-blocks/filled-cart-frontend.js 783 B +1 B (0%)
build/cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping-frontend.js 6.61 kB +1 B (0%)
build/cart-frontend.js 54.5 kB -2 B (0%)
build/checkout-blocks/billing-address-frontend.js 952 B -1 B (0%)
build/checkout-blocks/shipping-address-frontend.js 1.06 kB -1 B (0%)
build/checkout-blocks/shipping-methods-frontend.js 4.89 kB +1 B (0%)
build/checkout-frontend.js 56.7 kB +6 B (0%)
build/filter-wrapper-frontend.js 13.8 kB -7 B (0%)
build/mini-cart-component-frontend.js 20.1 kB +2 B (0%)
build/price-filter-frontend.js 13.6 kB +64 B (0%)
build/price-filter-wrapper-frontend.js 7.01 kB +64 B (+1%)
build/price-filter.js 8.37 kB +60 B (+1%)
build/product-button-frontend.js 1.89 kB -1 B (0%)
build/product-category-list-frontend.js 884 B -2 B (0%)
build/product-tag-list-frontend.js 877 B -2 B (0%)
build/rating-filter-frontend.js 7.12 kB +31 B (0%)
build/rating-filter-wrapper-frontend.js 5.38 kB +28 B (+1%)
build/rating-filter.js 6.19 kB +32 B (+1%)
build/single-product-frontend.js 32.3 kB -6 B (0%)
build/stock-filter-frontend.js 7.78 kB +52 B (+1%)
build/stock-filter-wrapper-frontend.js 6.03 kB +43 B (+1%)
build/stock-filter.js 6.7 kB +54 B (+1%)
build/vendors--attribute-filter-wrapper-frontend.js 8.22 kB -2 B (0%)
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 7.53 kB -1 B (0%)
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--5b8feb0b-frontend.js 4.85 kB +1 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters.js 7.3 kB
build/all-products.js 33.7 kB
build/all-reviews.js 7.79 kB
build/blocks-checkout.js 17.5 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 4.68 kB
build/cart-blocks/cart-items-frontend.js 299 B
build/cart-blocks/cart-line-items-frontend.js 1.07 kB
build/cart-blocks/cart-order-summary-frontend.js 1.11 kB
build/cart-blocks/cart-totals-frontend.js 320 B
build/cart-blocks/empty-cart-frontend.js 346 B
build/cart-blocks/order-summary-coupon-form-frontend.js 2.73 kB
build/cart-blocks/order-summary-discount-frontend.js 2.16 kB
build/cart-blocks/order-summary-fee-frontend.js 272 B
build/cart-blocks/order-summary-heading-frontend.js 456 B
build/cart-blocks/order-summary-shipping-frontend.js 428 B
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.19 kB
build/cart.js 47.5 kB
build/checkout-blocks/actions-frontend.js 1.79 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.98 kB
build/checkout-blocks/contact-information-frontend.js 3.02 kB
build/checkout-blocks/express-payment-frontend.js 1.13 kB
build/checkout-blocks/fields-frontend.js 343 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.67 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 2.88 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.28 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 273 B
build/checkout-blocks/order-summary-taxes-frontend.js 433 B
build/checkout-blocks/payment-frontend.js 7.86 kB
build/checkout-blocks/terms-frontend.js 1.64 kB
build/checkout-blocks/totals-frontend.js 323 B
build/checkout.js 41.2 kB
build/featured-category.js 13.2 kB
build/featured-product.js 13.5 kB
build/filter-wrapper.js 2.88 kB
build/general-style-rtl.css 1.29 kB
build/general-style.css 1.29 kB
build/handpicked-products.js 7.33 kB
build/legacy-template.js 2.83 kB
build/mini-cart-contents-block/empty-cart-frontend.js 367 B
build/mini-cart-contents-block/filled-cart-frontend.js 230 B
build/mini-cart-contents-block/footer-frontend.js 2.97 kB
build/mini-cart-contents-block/items-frontend.js 236 B
build/mini-cart-contents-block/products-table-frontend.js 590 B
build/mini-cart-contents-block/shopping-button-frontend.js 287 B
build/mini-cart-contents-block/title-frontend.js 367 B
build/mini-cart-contents.js 17.2 kB
build/mini-cart-frontend.js 1.82 kB
build/mini-cart.js 4.28 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 228 B
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js 151 B
build/product-add-to-cart-frontend.js 1.25 kB
build/product-add-to-cart.js 8.57 kB
build/product-best-sellers.js 7.7 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 431 B
build/product-button--product-image--product-rating--product-sale-badge--product-title.js 301 B
build/product-button.js 3.87 kB
build/product-categories.js 2.36 kB
build/product-category-list.js 502 B
build/product-category.js 8.69 kB
build/product-image-frontend.js 1.92 kB
build/product-image.js 3.99 kB
build/product-new.js 7.69 kB
build/product-on-sale.js 8.02 kB
build/product-price-frontend.js 1.92 kB
build/product-price.js 1.53 kB
build/product-query.js 2.89 kB
build/product-rating-frontend.js 1.2 kB
build/product-rating.js 788 B
build/product-sale-badge-frontend.js 1.15 kB
build/product-sale-badge.js 817 B
build/product-search.js 2.61 kB
build/product-sku-frontend.js 378 B
build/product-sku.js 377 B
build/product-stock-indicator-frontend.js 1 kB
build/product-stock-indicator.js 624 B
build/product-summary-frontend.js 1.29 kB
build/product-summary.js 920 B
build/product-tag-list.js 497 B
build/product-tag.js 8.05 kB
build/product-title-frontend.js 1.34 kB
build/product-title.js 3.36 kB
build/product-top-rated.js 7.93 kB
build/products-by-attribute.js 8.61 kB
build/reviews-by-category.js 11.3 kB
build/reviews-by-product.js 12.4 kB
build/reviews-frontend.js 7.01 kB
build/single-product.js 10.1 kB
build/vendors--attribute-filter-wrapper--mini-cart-contents-block/footer-frontend.js 6.86 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--671ca56f-frontend.js 5.26 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js 19.1 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.14 kB
build/wc-blocks-data.js 18.3 kB
build/wc-blocks-editor-style-rtl.css 5.24 kB
build/wc-blocks-editor-style.css 5.24 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 932 B
build/wc-blocks-registry.js 2.93 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.72 kB
build/wc-blocks-style-rtl.css 24.2 kB
build/wc-blocks-style.css 24.2 kB
build/wc-blocks-vendors-style-rtl.css 1.95 kB
build/wc-blocks-vendors-style.css 1.95 kB
build/wc-blocks-vendors.js 62.4 kB
build/wc-blocks.js 2.62 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

compressed-size-action

@github-actions
Copy link
Contributor

github-actions bot commented Oct 7, 2022

This PR has been marked as stale because it has not seen any activity within the past 60 days. Our team uses this tool to help surface pull requests that have slipped through review.

If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label - otherwise it will automatically be closed after 10 days.

@github-actions github-actions bot added the status: stale Stale issues and PRs have had no updates for 60 days. label Oct 7, 2022
Copy link
Contributor

@sunyatasattva sunyatasattva left a comment

Choose a reason for hiding this comment

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

I left a comment in the commit you linked. Otherwise, code looks good, but I didn't test functionality yet.

@github-actions
Copy link
Contributor

This PR has been marked as stale because it has not seen any activity within the past 7 days. Our team uses this tool to help surface pull requests that have slipped through review.

If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label.

@github-actions github-actions bot added the status: stale Stale issues and PRs have had no updates for 60 days. label Oct 21, 2022
@gigitux gigitux removed the status: stale Stale issues and PRs have had no updates for 60 days. label Oct 21, 2022
@sunyatasattva
Copy link
Contributor

@gigitux Please let me know when the feedback on this is also addressed.

@gigitux gigitux force-pushed the fix/filter_display_data branch from 064d814 to c4a46c3 Compare October 27, 2022 10:09
@github-actions
Copy link
Contributor

github-actions bot commented Oct 27, 2022

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.

@gigitux
Copy link
Contributor Author

gigitux commented Oct 27, 2022

@gigitux Please let me know when the feedback on this is also addressed.

I moved the comment for disabling phpcs rules on top c4a46c3. Also I change the name of the parameters e95122d

I still have some doubts about refactoring the entire function. Let me know what you think! 🙏

Copy link
Contributor

@sunyatasattva sunyatasattva left a comment

Choose a reason for hiding this comment

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

Thanks for addressing the feedback. I am ok with you leaving the function as is: I have my own opinion, but it boils down to personal preference at this point, I'm ok with this.

@github-actions github-actions bot added this to the 8.9.0 milestone Oct 27, 2022
@gigitux gigitux merged commit 84e1bbd into trunk Nov 2, 2022
@gigitux gigitux deleted the fix/filter_display_data branch November 2, 2022 09:03
senadir pushed a commit to senadir/woocommerce-blocks that referenced this pull request Nov 12, 2022
* Product Query: Fix pagination issue

* Product Query - Add support for the Filter By Price Block woocommerce#6790

Product Query - Add support for the Filter By Price Block

* fix query relation

* fix on sale query

* Product Query - Add support for the Filter By Attributes block woocommerce#6790

Product Query - Add support for the Filter By Attributes block

* fix bugged pagination and on-sale filter after refactor

* address feedback

* Product Query - Add support for the Filter By Stock Block woocommerce#6790

Product Query - Add support for the Filter By Stock Block

* Fix filter blocks: the data (e.g: max price or stock-status) match the variation woocommerce#7245

fix filter blocks: the data (e.g: max price or stock-status) match the variation

* disable phcs rules on top of the file

* replace parameter name

* fix eslint error
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block-type: product-query Issues related to/affecting all product-query variations. skip-changelog PRs that you don't want to appear in the changelog.
Projects
None yet
2 participants