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

Fix: Product Collection show products with correct stock statuses #11708

Merged
merged 5 commits into from
Nov 21, 2023

Conversation

dinhtungdu
Copy link
Member

@dinhtungdu dinhtungdu commented Nov 9, 2023

What

This PR fixes the issue that Product Collection shows out of stock products event if that status isn't selected:

  1. Set some product to be out of stock.
  2. Add Product Collection block to a page.
  3. Set the stock status filter to all options except outofstock.
  4. Still see the out of stock products in the editor preview.
  5. Save and see the same on the front end. Out of stock products still show up.

Fixes #

Why

We're handling query related to stock status a little more complex than other:

  • If the selected stock statuses contain all available statuses or no status was selected, we do nothing.
  • If the selected stock statuses contain all available statuses but not outofstock, we add out of stock term to product visibility tax query.
  • For the remaining cases, we use a meta query.

We do it for some reasons:

  • Following WC Core.
  • Performance: using tax queries is more performant than using meta queries.

Testing Instructions

Please consider any edge cases this change may have, and also other areas of the product this may impact.

  1. Set some product to be out of stock.
  2. Add Product Collection block to a page.
  3. Set the stock status filter to all options except outofstock.
  4. See the out of stock products not show up in the editor preview.
  5. Save and see the same on the front end. Out of stock products don't show up.
  • Do not include in the Testing Notes
  • Should be tested by the development team exclusively

WooCommerce Visibility

Required:

  • WooCommerce Core
  • Feature plugin
  • Experimental
  • N/A

Checklist

Required:

  • This PR has either a [type] label or a [skip-changelog] label.
  • This PR is assigned to a milestone.

Conditional:

  • This PR has a changelog description (if [skip-changelog] label is not present).
  • 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.
  • This PR has been accessibility tested.
  • This PR has had any necessary documentation added/updated.

Changelog

Fix: Product Collection show products with correct stock statuses

Copy link
Contributor

github-actions bot commented Nov 9, 2023

The release ZIP for this PR is accessible via:

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

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

Copy link
Contributor

github-actions bot commented Nov 9, 2023

Size Change: +2.15 kB (0%)

Total Size: 1.59 MB

Filename Size Change
build/blocks-checkout.js 33.9 kB +4 B (0%)
build/blocks-components.js 32.4 kB +1 B (0%)
build/checkout-rtl.css 8.39 kB +29 B (0%)
build/checkout.css 8.37 kB +26 B (0%)
build/product-collection.js 13.9 kB +3 B (0%)
build/wc-blocks-vendors.js 61.8 kB +418 B (+1%)
build/product-collection-no-results.js 1.66 kB +1.66 kB (new file) 🆕
ℹ️ View Unchanged
Filename Size
build/3810-frontend.js 18.3 kB
build/4124-frontend.js 23.9 kB
build/8280-frontend.js 8.47 kB
build/active-filters-frontend.js 6.71 kB
build/active-filters-rtl.css 1.68 kB
build/active-filters-wrapper-frontend.js 6.91 kB
build/active-filters-wrapper-rtl.css 1.53 kB
build/active-filters-wrapper.css 1.53 kB
build/active-filters.css 1.68 kB
build/active-filters.js 6.06 kB
build/add-to-cart-form-rtl.css 444 B
build/add-to-cart-form.css 444 B
build/all-products-frontend.js 9.67 kB
build/all-products-rtl.css 4.54 kB
build/all-products.css 4.54 kB
build/all-products.js 39.7 kB
build/all-reviews-rtl.css 1.75 kB
build/all-reviews.css 1.75 kB
build/all-reviews.js 7.8 kB
build/attribute-filter-frontend.js 19.9 kB
build/attribute-filter-rtl.css 4.03 kB
build/attribute-filter-wrapper-frontend.js 21.1 kB
build/attribute-filter-wrapper-rtl.css 3.89 kB
build/attribute-filter-wrapper.css 3.88 kB
build/attribute-filter.css 4.01 kB
build/attribute-filter.js 11.3 kB
build/breadcrumbs-rtl.css 234 B
build/breadcrumbs.css 234 B
build/breadcrumbs.js 2.13 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.4 kB
build/cart-blocks/cart-accepted-payment-methods-style.js 153 B
build/cart-blocks/cart-cross-sells-frontend.js 267 B
build/cart-blocks/cart-cross-sells-products-frontend.js 5.56 kB
build/cart-blocks/cart-cross-sells-products-style.js 153 B
build/cart-blocks/cart-cross-sells-style.js 269 B
build/cart-blocks/cart-express-payment-frontend.js 5.38 kB
build/cart-blocks/cart-express-payment-style.js 155 B
build/cart-blocks/cart-items-frontend.js 281 B
build/cart-blocks/cart-items-style.js 240 B
build/cart-blocks/cart-line-items-frontend.js 9.24 kB
build/cart-blocks/cart-line-items-style.js 153 B
build/cart-blocks/cart-order-summary-frontend.js 20.6 kB
build/cart-blocks/cart-order-summary-style.js 339 B
build/cart-blocks/cart-totals-frontend.js 296 B
build/cart-blocks/cart-totals-style.js 253 B
build/cart-blocks/empty-cart-frontend.js 376 B
build/cart-blocks/empty-cart-style.js 375 B
build/cart-blocks/filled-cart-frontend.js 614 B
build/cart-blocks/filled-cart-style.js 332 B
build/cart-blocks/order-summary-coupon-form-frontend.js 21 kB
build/cart-blocks/order-summary-coupon-form-style.js 155 B
build/cart-blocks/order-summary-discount-frontend.js 21 kB
build/cart-blocks/order-summary-discount-style.js 155 B
build/cart-blocks/order-summary-fee-frontend.js 288 B
build/cart-blocks/order-summary-fee-style.js 153 B
build/cart-blocks/order-summary-heading-frontend.js 347 B
build/cart-blocks/order-summary-heading-style.js 351 B
build/cart-blocks/order-summary-shipping-frontend.js 20.6 kB
build/cart-blocks/order-summary-shipping-style.js 154 B
build/cart-blocks/order-summary-subtotal-frontend.js 291 B
build/cart-blocks/order-summary-subtotal-style.js 154 B
build/cart-blocks/order-summary-taxes-frontend.js 454 B
build/cart-blocks/order-summary-taxes-style.js 202 B
build/cart-blocks/proceed-to-checkout-frontend.js 7.64 kB
build/cart-blocks/proceed-to-checkout-style.js 1.09 kB
build/cart-frontend.js 29 kB
build/cart-rtl.css 9.27 kB
build/cart.css 9.25 kB
build/cart.js 39.7 kB
build/catalog-sorting-rtl.css 259 B
build/catalog-sorting.css 259 B
build/catalog-sorting.js 1.7 kB
build/checkout-blocks/actions-frontend.js 8.14 kB
build/checkout-blocks/actions-style.js 1.02 kB
build/checkout-blocks/billing-address-frontend.js 9.86 kB
build/checkout-blocks/billing-address-style.js 574 B
build/checkout-blocks/contact-information-frontend.js 1.67 kB
build/checkout-blocks/contact-information-style.js 653 B
build/checkout-blocks/express-payment-frontend.js 5.81 kB
build/checkout-blocks/fields-frontend.js 375 B
build/checkout-blocks/fields-style.js 342 B
build/checkout-blocks/order-note-frontend.js 681 B
build/checkout-blocks/order-summary-cart-items-frontend.js 6.49 kB
build/checkout-blocks/order-summary-cart-items-style.js 153 B
build/checkout-blocks/order-summary-coupon-form-frontend.js 21 kB
build/checkout-blocks/order-summary-coupon-form-style.js 155 B
build/checkout-blocks/order-summary-discount-frontend.js 21.1 kB
build/checkout-blocks/order-summary-discount-style.js 154 B
build/checkout-blocks/order-summary-fee-frontend.js 291 B
build/checkout-blocks/order-summary-fee-style.js 155 B
build/checkout-blocks/order-summary-frontend.js 20.6 kB
build/checkout-blocks/order-summary-shipping-frontend.js 20.6 kB
build/checkout-blocks/order-summary-shipping-style.js 154 B
build/checkout-blocks/order-summary-style.js 341 B
build/checkout-blocks/order-summary-subtotal-frontend.js 289 B
build/checkout-blocks/order-summary-subtotal-style.js 155 B
build/checkout-blocks/order-summary-taxes-frontend.js 455 B
build/checkout-blocks/order-summary-taxes-style.js 201 B
build/checkout-blocks/payment-frontend.js 14.5 kB
build/checkout-blocks/payment-style.js 500 B
build/checkout-blocks/pickup-options-frontend.js 11.2 kB
build/checkout-blocks/pickup-options-style.js 481 B
build/checkout-blocks/shipping-address-frontend.js 9.79 kB
build/checkout-blocks/shipping-address-style.js 517 B
build/checkout-blocks/shipping-method-frontend.js 1.97 kB
build/checkout-blocks/shipping-method-style.js 1.44 kB
build/checkout-blocks/shipping-methods-frontend.js 19 kB
build/checkout-blocks/shipping-methods-style.js 456 B
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/terms-style.js 1.03 kB
build/checkout-blocks/totals-frontend.js 338 B
build/checkout-blocks/totals-style.js 301 B
build/checkout-frontend.js 30.7 kB
build/checkout.js 42.5 kB
build/classic-shortcode-rtl.css 242 B
build/classic-shortcode.css 241 B
build/classic-shortcode.js 4.66 kB
build/collection-filters.js 2.69 kB
build/collection-price-filter-frontend.js 591 B
build/collection-price-filter-rtl.css 1.07 kB
build/collection-price-filter.css 1.07 kB
build/collection-price-filter.js 2.15 kB
build/collection-stock-filter-frontend.js 396 B
build/collection-stock-filter-rtl.css 4.03 kB
build/collection-stock-filter.css 4.03 kB
build/collection-stock-filter.js 4.18 kB
build/customer-account-rtl.css 410 B
build/customer-account.css 409 B
build/customer-account.js 3.19 kB
build/featured-category-rtl.css 974 B
build/featured-category.css 973 B
build/featured-category.js 13.6 kB
build/featured-product-rtl.css 1.02 kB
build/featured-product.css 1.02 kB
build/featured-product.js 13.9 kB
build/filter-wrapper-frontend.js 14.6 kB
build/filter-wrapper-rtl.css 378 B
build/filter-wrapper.css 378 B
build/filter-wrapper.js 2.38 kB
build/handpicked-products.js 7.34 kB
build/legacy-template-rtl.css 240 B
build/legacy-template.css 240 B
build/legacy-template.js 7.85 kB
build/mini-cart-component-frontend.js 30.8 kB
build/mini-cart-contents-block/cart-button-frontend.js 1.86 kB
build/mini-cart-contents-block/cart-button-style.js 1.23 kB
build/mini-cart-contents-block/checkout-button-frontend.js 1.95 kB
build/mini-cart-contents-block/checkout-button-style.js 1.44 kB
build/mini-cart-contents-block/empty-cart-frontend.js 383 B
build/mini-cart-contents-block/empty-cart-style.js 387 B
build/mini-cart-contents-block/filled-cart-frontend.js 284 B
build/mini-cart-contents-block/filled-cart-style.js 287 B
build/mini-cart-contents-block/footer-frontend.js 3.87 kB
build/mini-cart-contents-block/footer-style.js 1.96 kB
build/mini-cart-contents-block/items-frontend.js 246 B
build/mini-cart-contents-block/items-style.js 250 B
build/mini-cart-contents-block/products-table-frontend.js 8.59 kB
build/mini-cart-contents-block/shopping-button-frontend.js 501 B
build/mini-cart-contents-block/shopping-button-style.js 361 B
build/mini-cart-contents-block/title-frontend.js 2.04 kB
build/mini-cart-contents-block/title-items-counter-frontend.js 1.74 kB
build/mini-cart-contents-block/title-items-counter-style.js 1.2 kB
build/mini-cart-contents-block/title-label-frontend.js 1.68 kB
build/mini-cart-contents-block/title-label-style.js 1.14 kB
build/mini-cart-contents-block/title-style.js 1.38 kB
build/mini-cart-contents-rtl.css 3.23 kB
build/mini-cart-contents.css 3.22 kB
build/mini-cart-contents.js 16 kB
build/mini-cart-frontend.js 2.35 kB
build/mini-cart-rtl.css 2.44 kB
build/mini-cart.css 2.44 kB
build/mini-cart.js 6.09 kB
build/order-confirmation-additional-information-rtl.css 367 B
build/order-confirmation-additional-information.css 367 B
build/order-confirmation-additional-information.js 1.58 kB
build/order-confirmation-billing-address-rtl.css 398 B
build/order-confirmation-billing-address.css 397 B
build/order-confirmation-billing-address.js 1.56 kB
build/order-confirmation-billing-wrapper.js 1.51 kB
build/order-confirmation-downloads-rtl.css 477 B
build/order-confirmation-downloads-wrapper.js 1.58 kB
build/order-confirmation-downloads.css 478 B
build/order-confirmation-downloads.js 1.91 kB
build/order-confirmation-shipping-address-rtl.css 399 B
build/order-confirmation-shipping-address.css 398 B
build/order-confirmation-shipping-address.js 1.56 kB
build/order-confirmation-shipping-wrapper.js 1.52 kB
build/order-confirmation-status-rtl.css 280 B
build/order-confirmation-status.css 280 B
build/order-confirmation-status.js 1.55 kB
build/order-confirmation-summary-rtl.css 460 B
build/order-confirmation-summary.css 460 B
build/order-confirmation-summary.js 1.76 kB
build/order-confirmation-totals-rtl.css 594 B
build/order-confirmation-totals-wrapper.js 1.8 kB
build/order-confirmation-totals.css 593 B
build/order-confirmation-totals.js 2.18 kB
build/packages-style-rtl.css 5.19 kB
build/packages-style.css 5.19 kB
build/page-content-wrapper.js 1.96 kB
build/price-filter-frontend.js 7.94 kB
build/price-filter-rtl.css 2.68 kB
build/price-filter-wrapper-frontend.js 8.11 kB
build/price-filter-wrapper-rtl.css 2.53 kB
build/price-filter-wrapper.css 2.53 kB
build/price-filter.css 2.67 kB
build/price-filter.js 7.53 kB
build/price-format.js 913 B
build/product-add-to-cart-frontend.js 8.12 kB
build/product-add-to-cart-rtl.css 1.37 kB
build/product-add-to-cart.css 1.38 kB
build/product-add-to-cart.js 8.36 kB
build/product-average-rating-frontend.js 1.88 kB
build/product-average-rating.js 1.4 kB
build/product-best-sellers.js 7.08 kB
build/product-button-frontend.js 4.94 kB
build/product-button-interactivity-frontend.js 8.47 kB
build/product-button-rtl.css 1.14 kB
build/product-button.css 1.14 kB
build/product-button.js 4.66 kB
build/product-categories-rtl.css 654 B
build/product-categories.css 654 B
build/product-categories.js 2.6 kB
build/product-category.js 8.01 kB
build/product-details-rtl.css 397 B
build/product-details.css 394 B
build/product-gallery-frontend.js 872 B
build/product-gallery-large-image-frontend.js 648 B
build/product-gallery-large-image-next-previous.js 4.27 kB
build/product-gallery-large-image.js 2.47 kB
build/product-gallery-pager.js 3.48 kB
build/product-gallery-rtl.css 1.26 kB
build/product-gallery-thumbnails.js 3.94 kB
build/product-gallery.css 1.26 kB
build/product-gallery.js 9.6 kB
build/product-image-frontend.js 2.89 kB
build/product-image-gallery-rtl.css 307 B
build/product-image-gallery.css 306 B
build/product-image-rtl.css 996 B
build/product-image.css 994 B
build/product-image.js 2.57 kB
build/product-new.js 7.95 kB
build/product-on-sale.js 7.33 kB
build/product-price-frontend.js 2.82 kB
build/product-price-rtl.css 644 B
build/product-price.css 643 B
build/product-price.js 2.34 kB
build/product-query-rtl.css 350 B
build/product-query.css 349 B
build/product-query.js 11.7 kB
build/product-rating-counter-frontend.js 2.19 kB
build/product-rating-counter.js 1.7 kB
build/product-rating-frontend.js 2.53 kB
build/product-rating-rtl.css 247 B
build/product-rating-stars-frontend.js 2.43 kB
build/product-rating-stars-rtl.css 899 B
build/product-rating-stars.css 900 B
build/product-rating-stars.js 1.95 kB
build/product-rating.css 246 B
build/product-rating.js 2.04 kB
build/product-results-count-rtl.css 230 B
build/product-results-count.css 230 B
build/product-results-count.js 1.66 kB
build/product-reviews-rtl.css 458 B
build/product-reviews.css 458 B
build/product-sale-badge-frontend.js 2.01 kB
build/product-sale-badge-rtl.css 437 B
build/product-sale-badge.css 437 B
build/product-sale-badge.js 1.52 kB
build/product-search-rtl.css 419 B
build/product-search.css 417 B
build/product-search.js 2.62 kB
build/product-sku-frontend.js 2.02 kB
build/product-sku-rtl.css 240 B
build/product-sku.css 239 B
build/product-sku.js 1.53 kB
build/product-stock-indicator-frontend.js 2.2 kB
build/product-stock-indicator-rtl.css 232 B
build/product-stock-indicator.css 232 B
build/product-stock-indicator.js 1.71 kB
build/product-summary-frontend.js 2.36 kB
build/product-summary-rtl.css 549 B
build/product-summary.css 549 B
build/product-summary.js 1.88 kB
build/product-tag.js 7.53 kB
build/product-template-rtl.css 536 B
build/product-template.css 535 B
build/product-template.js 2.81 kB
build/product-title-frontend.js 2.31 kB
build/product-title-rtl.css 693 B
build/product-title.css 694 B
build/product-title.js 2.05 kB
build/product-top-rated.js 7.61 kB
build/products-by-attribute.js 8.05 kB
build/rating-filter-frontend.js 18.8 kB
build/rating-filter-rtl.css 4.09 kB
build/rating-filter-wrapper-frontend.js 19.7 kB
build/rating-filter-wrapper-rtl.css 3.95 kB
build/rating-filter-wrapper.css 3.95 kB
build/rating-filter.css 4.08 kB
build/rating-filter.js 5.8 kB
build/reviews-by-category-rtl.css 1.75 kB
build/reviews-by-category.css 1.75 kB
build/reviews-by-category.js 11.4 kB
build/reviews-by-product-rtl.css 1.75 kB
build/reviews-by-product.css 1.75 kB
build/reviews-by-product.js 12.7 kB
build/reviews-frontend.js 6.44 kB
build/single-product-rtl.css 378 B
build/single-product.css 378 B
build/single-product.js 11.1 kB
build/stock-filter-frontend.js 19 kB
build/stock-filter-rtl.css 3.88 kB
build/stock-filter-wrapper-frontend.js 20 kB
build/stock-filter-wrapper-rtl.css 3.75 kB
build/stock-filter-wrapper.css 3.74 kB
build/stock-filter.css 3.87 kB
build/stock-filter.js 6.44 kB
build/store-notices.js 1.68 kB
build/wc-blocks-classic-template-revert-button-style-rtl.css 240 B
build/wc-blocks-classic-template-revert-button-style.css 239 B
build/wc-blocks-classic-template-revert-button.js 1.19 kB
build/wc-blocks-data.js 19.7 kB
build/wc-blocks-editor-style-rtl.css 7.06 kB
build/wc-blocks-editor-style.css 7.06 kB
build/wc-blocks-google-analytics.js 1.13 kB
build/wc-blocks-jetpack-woocommerce-analytics.js 750 B
build/wc-blocks-middleware.js 735 B
build/wc-blocks-registry.js 2.75 kB
build/wc-blocks-rtl.css 2.48 kB
build/wc-blocks-shared-context.js 860 B
build/wc-blocks-shared-hocs.js 1.41 kB
build/wc-blocks.css 2.48 kB
build/wc-blocks.js 9.15 kB
build/wc-interactivity-dropdown.js 453 B
build/wc-interactivity.js 10.7 kB
build/wc-payment-method-bacs.js 405 B
build/wc-payment-method-cheque.js 402 B
build/wc-payment-method-cod.js 508 B
build/wc-payment-method-paypal.js 439 B
build/wc-settings.js 2.42 kB
build/wc-shipping-method-pickup-location.js 29.4 kB

compressed-size-action

@dinhtungdu dinhtungdu changed the title update the get visibility query method Fix: Product Collection: product visibility query and stock status Nov 9, 2023
@dinhtungdu dinhtungdu changed the title Fix: Product Collection: product visibility query and stock status Fix: Product Collection show products with correct stock status Nov 9, 2023
@dinhtungdu dinhtungdu self-assigned this Nov 9, 2023
@dinhtungdu dinhtungdu added type: bug The issue/PR concerns a confirmed bug. block-type: product-query Issues related to/affecting all product-query variations. labels Nov 9, 2023
@dinhtungdu dinhtungdu changed the title Fix: Product Collection show products with correct stock status Fix: Product Collection show products with correct stock statuses Nov 9, 2023
@dinhtungdu dinhtungdu marked this pull request as ready for review November 9, 2023 08:15
@woocommercebot woocommercebot requested a review from a team November 9, 2023 08:16
Copy link
Contributor

@imanish003 imanish003 left a comment

Choose a reason for hiding this comment

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

I tested the PR and found that it functions correctly on the post but not as expected in the Product Catalog template. To replicate the issue:

  1. Add a product collection block to the Product Catalog template.
  2. In settings, Check the following checkbox (as shown in screenshot). Despite this, out of stock items remain visible in the Editor, although they are correctly hidden on the Frontend.

image

I believe I've identified the cause of this issue. Here's my detailed assessment:

The problem seems to manifest exclusively in the Editor, and not in the Frontend. This discrepancy arises due to the use of the query_loop_block_query_vars filter in our frontend query construction, as seen here. The invocation of this filter is conditional, as outlined here, and it only executes when the 'Inherit query from template' option is turned off. Consequently, our custom query logic is not applied.

In contrast, within the Editor, the rest_product_query filter, referenced here, does not depend on such conditions. It runs regardless of whether the 'inherit query from template' is active or not.

This issue went unnoticed previously because the 'inherit query from template' feature, when enabled, triggers a reset of attribute values to their defaults, as implemented here. Therefore, default values were used in our custom query, making the conditional execution of rest_product_query redundant.

As for a solution, I propose we introduce a condition within the rest_product_query filter that bypasses our custom query logic when 'Inherit query from template' is enabled. I had hoped to use the inherit attribute we set here as a part of this condition, but it's currently not accessible in the arguments of the rest_product_query filter ($args, $request). More debugging is required to understand why.

Regarding the merge of this PR, it seems feasible since the frontend functionality is performing as expected. What do you think? CC: @kmanijak

Copy link
Contributor

@kmanijak kmanijak left a comment

Choose a reason for hiding this comment

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

Apologies for long wait, I must've missed the notification 🙌

I tested the PR and found that it functions correctly on the post but not as expected in the Product Catalog template. To replicate the issue:

Add a product collection block to the Product Catalog template.
In settings, Check the following checkbox (as shown in screenshot). Despite this, out of stock items remain visible in the Editor, although they are correctly hidden on the Frontend.

I couldn't reproduce this problem. In both cases - with this option enabled and disabled - I could see the right outcome in Editor and frontend (

Regarding the merge of this PR, it seems feasible since the frontend functionality is performing as expected. What do you think? CC: @kmanijak

I'd say we merge it - it's a nice improvement both ways! 🚀

@github-actions github-actions bot added this to the 11.6.0 milestone Nov 16, 2023
@imanish003
Copy link
Contributor

imanish003 commented Nov 17, 2023

@kmanijak

I couldn't reproduce this problem. In both cases - with this option enabled and disabled - I could see the right outcome in Editor and frontend

I am still able to reproduce this issue. Here are the steps that I followed:

  1. Insert a Product Collection block into the Product Catalog template.

    • Ensure the presence of some out-of-stock products. If possible, rename an out-of-stock product to "1st product" to show it as 1st product in grid.
  2. Check the checkbox(Make sure it isn't checked when block was inserted in 1st step):
    image

  3. Refresh the Product Catalog template in the Editor.

    1. Observe that the "1st product" remains visible, contrary to expectations, since the "Hide out of stock items from the catalog" option was activated.

@dinhtungdu Are you able to reproduce this issue? 🙂

@dinhtungdu
Copy link
Member Author

@imanish003 The Product Collection block only checks for the Out of stock visibility setting when being added to the editor, after that, it will take the stock settings from its inspector setting only. So if the Product Collection block stock status setting contains Out of stock, the block will show out of stock products regardless of the Out of stock visibility setting.

@imanish003
Copy link
Contributor

@dinhtungdu

Good catch! The code here is designed to determine the stock status based on the global setting for hiding out-of-stock items in Editor. This function is triggered under two specific conditions:

  • When the block is added.
  • When the user selects the “Reset all” option in the filter dropdown, as depicted in this image:

A potential solution might be to assess whether “Inherit query from template” is enabled. If it is, we could always set the “stock status” attribute to the value returned by getDefaultStockStatuses.

@dinhtungdu
Copy link
Member Author

@imanish003 I don't see it's a problem here. I think it's good to respect the block stock status settings after it's been added and we shouldn't take the global setting into account after that.

  • For blocks that inherit query from template, we won't have any issue as we just use the global query.
  • For blocks that uses their own queries, I don't think they need to follow global stock setting as they have their own settings.

@imanish003
Copy link
Contributor

imanish003 commented Nov 20, 2023

@dinhtungdu

• For blocks that inherit query from template, we won't have any issue as we just use the global query.

Based on my understanding, this applies to the Frontend but not to the Editor. Consequently, the Frontend operates smoothly, aligning with expectations, but the Editor encounters issues in the scenario I described #11708 (comment).

Does this approach seem logical? 🙂

@dinhtungdu
Copy link
Member Author

  • As for addressing the Editor's issue, we can tackle it in a subsequent PR. In that PR, we should ensure the Editor uses the Global value whenever the "Inherit query from template" option is selected.

That sounds good to me! Thanks so much for your explanation!

@wavvves
Copy link
Contributor

wavvves commented Nov 20, 2023

PHP Unit tests are failing, going to push this onto 11.7.0 milestone

@wavvves wavvves modified the milestones: 11.6.0, 11.7.0 Nov 20, 2023
@dinhtungdu
Copy link
Member Author

Test is fixed. Merging.

@dinhtungdu dinhtungdu merged commit 1da1fef into trunk Nov 21, 2023
32 checks passed
@dinhtungdu dinhtungdu deleted the fix/product-collection-out-of-stock-query branch November 21, 2023 04:29
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. type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants