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

Fix query results of ProductQuery block by removing the default stock status query attribute #7748

Closed
wants to merge 1 commit into from

Conversation

dinhtungdu
Copy link
Member

This PR fixes the query results issue of the Product Query block which is caused by the default stock status query attribute.

Currently, we set the stock status attribute of the Product Query block to all available statuses: instock, outofstock, and onbackorder. This cause two issues:

  • The default query includes an unnecessary meta query.
  • The existence of a stock meta query (for instock, outofstock, and onbackorder) affects the query results as described in Product Query: query results are different from shortcodes/PHP query loops #7746. While I agree that the query result shouldn't be different as we're querying for all stock statuses, we should make the Product Query block return the same query results as the corresponding PHP query loop.

Fixes #7746

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

Testing

Automated Tests

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

User Facing Testing

  1. Use the sample product data provided by WooCommerce.
  2. On a new page, add the Product Query block and [recent_products] shortcode block.
  3. Change the layout of the Product Query to 4 products per row x 2 rows.
  4. Save the page and view it in a new tab.
  5. See the products inside the Product Query block (the front end and the editor) and the Recent Products shortcode are the same.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Performance Impact

The performance of the default Product Query block should be improved because it doesn't use meta_query for the default state.

@dinhtungdu dinhtungdu self-assigned this Nov 25, 2022
@rubikuserbot rubikuserbot requested review from a team and nefeline and removed request for a team November 25, 2022 09:04
@dinhtungdu dinhtungdu added status: needs review type: bug The issue/PR concerns a confirmed bug. 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 Nov 25, 2022
@dinhtungdu dinhtungdu requested review from gigitux and sunyatasattva and removed request for nefeline November 25, 2022 09:05
@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-7748.zip

@github-actions
Copy link
Contributor

Size Change: +1 B (0%)

Total Size: 971 kB

Filename Size Change
build/product-query.js 3.22 kB +1 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.74 kB
build/active-filters-wrapper-frontend.js 6.02 kB
build/active-filters.js 7.33 kB
build/all-products-frontend.js 11.3 kB
build/all-products.js 33.1 kB
build/all-reviews.js 7.79 kB
build/attribute-filter-frontend.js 22.6 kB
build/attribute-filter-wrapper-frontend.js 7.14 kB
build/attribute-filter.js 12.3 kB
build/blocks-checkout.js 27.1 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--product-add-to-cart-frontend.js 5.48 kB
build/cart-blocks/cart-cross-sells-products-frontend.js 4.74 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.04 kB
build/cart-blocks/cart-express-payment-frontend.js 779 B
build/cart-blocks/cart-items-frontend.js 298 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.29 kB
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 319 B
build/cart-blocks/empty-cart-frontend.js 346 B
build/cart-blocks/filled-cart-frontend.js 781 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.72 kB
build/cart-blocks/order-summary-discount-frontend.js 2.16 kB
build/cart-blocks/order-summary-fee-frontend.js 273 B
build/cart-blocks/order-summary-heading-frontend.js 455 B
build/cart-blocks/order-summary-shipping-frontend.js 5.99 kB
build/cart-blocks/order-summary-subtotal-frontend.js 274 B
build/cart-blocks/order-summary-taxes-frontend.js 435 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.19 kB
build/cart-frontend.js 46.2 kB
build/cart.js 46.1 kB
build/checkout-blocks/actions-frontend.js 1.77 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 3.89 kB
build/checkout-blocks/billing-address-frontend.js 955 B
build/checkout-blocks/contact-information-frontend.js 1.8 kB
build/checkout-blocks/express-payment-frontend.js 1.13 kB
build/checkout-blocks/fields-frontend.js 344 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 1.89 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.28 kB
build/checkout-blocks/order-summary-fee-frontend.js 276 B
build/checkout-blocks/order-summary-frontend.js 1.11 kB
build/checkout-blocks/order-summary-shipping-frontend.js 6.04 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/checkout-blocks/order-summary-taxes-frontend.js 436 B
build/checkout-blocks/payment-frontend.js 8.31 kB
build/checkout-blocks/shipping-address-frontend.js 1.07 kB
build/checkout-blocks/shipping-methods-frontend.js 5.01 kB
build/checkout-blocks/terms-frontend.js 1.64 kB
build/checkout-blocks/totals-frontend.js 324 B
build/checkout-frontend.js 48.3 kB
build/checkout.js 40.1 kB
build/featured-category.js 13.2 kB
build/featured-product.js 13.4 kB
build/filter-wrapper-frontend.js 13.8 kB
build/filter-wrapper.js 2.4 kB
build/general-style-rtl.css 1.29 kB
build/general-style.css 1.29 kB
build/handpicked-products.js 7.29 kB
build/legacy-template.js 2.85 kB
build/mini-cart-component-frontend.js 20 kB
build/mini-cart-contents-block/empty-cart-frontend.js 366 B
build/mini-cart-contents-block/filled-cart-frontend.js 230 B
build/mini-cart-contents-block/footer-frontend.js 2.95 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 590 B
build/mini-cart-contents-block/shopping-button-frontend.js 289 B
build/mini-cart-contents-block/title-frontend.js 368 B
build/mini-cart-contents.js 17.1 kB
build/mini-cart-frontend.js 1.76 kB
build/mini-cart.js 4.29 kB
build/price-filter-frontend.js 13.6 kB
build/price-filter-wrapper-frontend.js 7.02 kB
build/price-filter.js 8.38 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 227 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.46 kB
build/product-add-to-cart.js 8.37 kB
build/product-best-sellers.js 7.62 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 432 B
build/product-button--product-image--product-rating--product-sale-badge--product-title.js 301 B
build/product-button-frontend.js 2.13 kB
build/product-button.js 3.82 kB
build/product-categories.js 2.36 kB
build/product-category-list-frontend.js 1.13 kB
build/product-category-list.js 502 B
build/product-category.js 8.62 kB
build/product-image-frontend.js 2.16 kB
build/product-image.js 3.93 kB
build/product-new.js 7.62 kB
build/product-on-sale.js 7.95 kB
build/product-price-frontend.js 2.15 kB
build/product-price.js 1.53 kB
build/product-rating-frontend.js 1.44 kB
build/product-rating.js 787 B
build/product-sale-badge-frontend.js 1.38 kB
build/product-sale-badge.js 816 B
build/product-search.js 2.62 kB
build/product-sku-frontend.js 629 B
build/product-sku.js 377 B
build/product-stock-indicator-frontend.js 1.26 kB
build/product-stock-indicator.js 646 B
build/product-summary-frontend.js 1.52 kB
build/product-summary.js 921 B
build/product-tag-list-frontend.js 1.12 kB
build/product-tag-list.js 498 B
build/product-tag.js 8 kB
build/product-title-frontend.js 1.57 kB
build/product-title.js 3.3 kB
build/product-top-rated.js 7.87 kB
build/products-by-attribute.js 8.54 kB
build/rating-filter-frontend.js 7.16 kB
build/rating-filter-wrapper-frontend.js 5.41 kB
build/rating-filter.js 5.79 kB
build/reviews-by-category.js 11.2 kB
build/reviews-by-product.js 12.3 kB
build/reviews-frontend.js 7.02 kB
build/single-product-frontend.js 17.5 kB
build/single-product.js 10 kB
build/stock-filter-frontend.js 7.8 kB
build/stock-filter-wrapper-frontend.js 6.04 kB
build/stock-filter.js 6.7 kB
build/vendors--attribute-filter-wrapper--mini-cart-contents-block/footer--product-add-to-cart-frontend.js 6.86 kB
build/vendors--attribute-filter-wrapper-frontend.js 8.2 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-cross-sells-products--product-add-to-cart-frontend.js 7.54 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.85 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping--checkout-block--dda5866c-frontend.js 8.85 kB
build/wc-blocks-data.js 18.7 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 934 B
build/wc-blocks-registry.js 2.92 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 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.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

compressed-size-action

@github-actions
Copy link
Contributor

TypeScript Errors Report

Files with errors: 428
Total errors: 2063

🎉 🎉 This PR does not introduce new TS errors.

@sunyatasattva
Copy link
Contributor

Thank you for the investigation, @dinhtungdu! Indeed, the more we look, the more interesting cases we discover.

However, I have to say, I disagree with this approach. I think it is a bit unclear to the user. Moreover, the products shown in the shortcode and the Product Query block are not the same if you have the “Hide out of stock” products setting enabled:

Screenshot 2022-11-25 at 14 56 21

On top of that, we should consider that stock statuses are customizeable by the user.

I don't know which query is wrong and what should be the correct way of displaying products. But I think we should figure that out and fix the query, not patch the editor UI with something potentially confusing. Is a fix PHP-side possible? Why does the existance of the meta query impact the results?

@dinhtungdu
Copy link
Member Author

I think it is a bit unclear to the user.

Is it unclear that users have to add the Stock status filter when they need to change the stock setting (versus users have the filter added and all statuses pre-selected)? If yes, how the sale status setting is different, how should we decide an advanced filter should be pre-selected or not?

On top of that, we should consider that stock statuses are customizeable by the user.

Can you explain this point in more details? I'm not sure I fully get it. This PR doesn't affect the ability to customize the stock statuses, users can still customize it when they need it.

Moreover, the products shown in the shortcode and the Product Query block are not the same if you have the “Hide out of stock” products setting enabled:
Is a fix PHP-side possible? Why does the existance of the meta query impact the results?

Great catch! I missed testing the out of stock setting. Investigating...

@dinhtungdu
Copy link
Member Author

dinhtungdu commented Nov 28, 2022

Why does the existance of the meta query impact the results?

My initial investigation: when Hide out of stock items from the catalog is enabled, WooCommerce uses a tax_query to hide the out-of-stock products, while WC Blocks uses a meta_query. WooCommerce creates outofstock term which belongs to the product_visibility taxonomy.

➡ Because of this, I think we should investigate if there is any way to parse queries using WC functions.

Database screenshot image

@sunyatasattva
Copy link
Contributor

Is it unclear that users have to add the Stock status filter when they need to change the stock setting (versus users have the filter added and all statuses pre-selected)? If yes, how the sale status setting is different, how should we decide an advanced filter should be pre-selected or not?

In my opinion, it is a bit different. The Sale filter is a boolean to show only products on sale when enabled. It is disabled by default, and, as such, the expected results are displayed in the preview.

With the Stock Status, it is not exactly all statuses pre-selected, as it also depends by the global “Hide out of stock from catalog” option. If that's selected, then the stock status input will reflect that and remind the users that they decided to globally hide all the out of stock products. So they will manually need to add that status to the input to make sure those out of stock products are shown.

What do you think?

Can you explain this point in more details? I'm not sure I fully get it. This PR doesn't affect the ability to customize the stock statuses, users can still customize it when they need it.

Sorry, I should have been more clear. This was in reference to the description of the PR:

Currently, we set the stock status attribute of the Product Query block to all available statuses: instock, outofstock, and onbackorder.

As stock statuses are customizable, the input is set to display all of them by default. I didn't mean that it affects in some way the ability to customize, just that we need to consider other unpredictable use cases for when they have different custom stock statuses enabled.

My initial investigation: when Hide out of stock items from the catalog is enabled, WooCommerce uses a tax_query to hide the out-of-stock products, while WC Blocks uses a meta_query. WooCommerce creates outofstock term which belongs to the product_visibility taxonomy.

➡ Because of this, I think we should investigate if there is any way to parse queries using WC functions.

How much less performant are meta_queries as compared to tax_queries?

I agree that we should try and use as many WC functions as we can.

@dinhtungdu
Copy link
Member Author

What do you think?

It makes more sense to me now. But from the performance perspective, I still have a concern. Adding stock status by default means that we always use a meta query, even when merchants just want to display all statuses, comparing to only use meta query when merchants need to display a subset of status 🤔 .

How much less performant are meta_queries as compared to tax_queries?

My immediate answer is, I don't know. I actually didn't think about performance when I said we should use WC functions. The reason to use the WC functions is to achieve the same queries as WC use, which produces consistent results and reduces maintenance effort.

@sunyatasattva
Copy link
Contributor

I think it could be helpful to do a performance comparison with a large set of Products, and then take an informed decision on whether this is truly a problem or not. I think it would also be very educational in general, as I have these PHP Lint recommendations on not using meta_queries but I'm not actually sure what the performance impact is.

What do you think?

If you feel I'm being too obnoxious, I'm also ok just merging this as it is. But I think it'd be helpful in the long run to use this as an opportunity to understand and make better decisions in the future.

@dinhtungdu
Copy link
Member Author

What do you think?

I agree 💯 . Marking this PR as on hold for now. As I'm the porter this week, I will look at this again later, maybe next week.

@dinhtungdu dinhtungdu added the status: on hold The issue is currently not prioritized or is awaiting something (for example, a fix upsteam). label Dec 7, 2022
@sunyatasattva
Copy link
Contributor

Just FYI, from a design standpoint, I talked to @vivialice and asked her to take a look into what could be the best for users. As the for the performance impact, the point above still stands and I'm happy to explore that!

@dinhtungdu
Copy link
Member Author

dinhtungdu commented Dec 13, 2022

@sunyatasattva FYI, this is the PR implemented product_visibility taxonomy. That PR explains the reason for the switch from meta query to tax query.

Moreover, in woocommerce/woocommerce#12558, WC added rating terms to the product_visibility taxonomy.

At this point, I don't think it's worth doing performance comparisons between tax and meta queries, as we're likely to end up with the same conclusion. And I think we should figure out how to make our queries align with WC core's ones.

@dinhtungdu
Copy link
Member Author

Close in favors of #7951

@dinhtungdu dinhtungdu closed this Dec 19, 2022
@nielslange nielslange deleted the fix/7746 branch April 19, 2023 23:48
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. status: on hold The issue is currently not prioritized or is awaiting something (for example, a fix upsteam). type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Product Query: query results are different from shortcodes/PHP query loops
2 participants