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

Prevent Featured Product block from breaking when product is out of stock + hidden from catalog #6166

Merged
merged 3 commits into from
Mar 31, 2022

Conversation

albarin
Copy link
Contributor

@albarin albarin commented Mar 30, 2022

When a product is out of stock and hidden from the catalog, it is not returned from the /wc/store/v1/products endpoint (which is used on the Featured Product block to display the list of available products).
This causes the block to break when editing a Feature Product block configured with an out of stock product since it tries to find the selected product on the array returned from the endpoint and on the variations, but it's not there.

This PR prevents accessing to the parentProduct array when it's empty (which was causing the JS error) and also uses the stock_status query param on the /products endpoint to explicitly request all products regardless on their statuses.

Fixes #5344

Testing

Manual Testing

  1. Add a Featured Product block to a page and save
  2. Head to the product and set the product to Out of Stock
  3. Under WooCommerce > Settings > Products > Inventory, check the box that says "Hide out of stock items from the catalog"
  4. Return to the page with your Featured Product block, select it, and select "Edit" to choose a new product to feature
  5. Make sure the block can still be edited to choose a new product and the Out of Stock product is also available.

Changelog

Fix Featured Product: prevent the block from breaking for out of stock products hidden from catalog

@albarin albarin added type: bug The issue/PR concerns a confirmed bug. focus: blocks Specific work involving or impacting how blocks behave. block: featured product Issues related to the Featured Product block. labels Mar 30, 2022
@rubikuserbot rubikuserbot requested review from a team and tomasztunik and removed request for a team March 30, 2022 14:56
By default, the `/wc/store/v1/products` endpoint does not return products with
`outofstock` stock status. We want the users to be able to select any product
regardless of its stock status, we need to explicitly request them using the
`stock_status` query param.
@albarin albarin force-pushed the fix/5344-feature-product-bug branch from 1af1e24 to 3dbb452 Compare March 30, 2022 14:58
@albarin albarin marked this pull request as ready for review March 30, 2022 14:59
@github-actions
Copy link
Contributor

github-actions bot commented Mar 30, 2022

Size Change: +478 B (0%)

Total Size: 862 kB

Filename Size Change
build/all-products.js 33.9 kB +39 B (0%)
build/cart.js 43.6 kB +26 B (0%)
build/checkout.js 44.7 kB +24 B (0%)
build/featured-category.js 8.66 kB +33 B (0%)
build/featured-product.js 9.78 kB +45 B (0%)
build/handpicked-products.js 7.12 kB +29 B (0%)
build/product-best-sellers.js 7.4 kB +28 B (0%)
build/product-category.js 8.5 kB +25 B (0%)
build/product-new.js 7.69 kB +23 B (0%)
build/product-on-sale.js 8 kB +23 B (0%)
build/product-tag.js 7.83 kB +23 B (0%)
build/product-top-rated.js 7.92 kB +22 B (0%)
build/products-by-attribute.js 8.4 kB +22 B (0%)
build/reviews-by-category.js 11.5 kB +31 B (0%)
build/reviews-by-product.js 12.6 kB +44 B (0%)
build/single-product.js 10 kB +41 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 5.92 kB
build/active-filters.js 6.96 kB
build/all-products-frontend.js 18.2 kB
build/all-reviews.js 8.02 kB
build/attribute-filter-frontend.js 16.9 kB
build/attribute-filter.js 13.1 kB
build/blocks-checkout.js 17.4 kB
build/cart-blocks/accepted-payment-methods-frontend.js 1.17 kB
build/cart-blocks/checkout-button-frontend.js 1.15 kB
build/cart-blocks/empty-cart-frontend.js 346 B
build/cart-blocks/express-payment-frontend.js 5.19 kB
build/cart-blocks/filled-cart-frontend.js 757 B
build/cart-blocks/items-frontend.js 300 B
build/cart-blocks/line-items-frontend.js 5.5 kB
build/cart-blocks/order-summary-frontend.js 8.87 kB
build/cart-blocks/totals-frontend.js 320 B
build/cart-frontend.js 45 kB
build/checkout-blocks/actions-frontend.js 1.41 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.12 kB
build/checkout-blocks/billing-address-frontend.js 891 B
build/checkout-blocks/contact-information-frontend.js 2.83 kB
build/checkout-blocks/express-payment-frontend.js 5.49 kB
build/checkout-blocks/fields-frontend.js 344 B
build/checkout-blocks/order-note-frontend.js 1.07 kB
build/checkout-blocks/order-summary-frontend.js 11.3 kB
build/checkout-blocks/payment-frontend.js 7.77 kB
build/checkout-blocks/shipping-address-frontend.js 998 B
build/checkout-blocks/shipping-methods-frontend.js 4.74 kB
build/checkout-blocks/terms-frontend.js 1.22 kB
build/checkout-blocks/totals-frontend.js 325 B
build/checkout-frontend.js 47.2 kB
build/legacy-template.js 2.19 kB
build/mini-cart-component-frontend.js 16.5 kB
build/mini-cart-contents-block/empty-cart-frontend.js 329 B
build/mini-cart-contents-block/filled-cart-frontend.js 230 B
build/mini-cart-contents-block/footer--mini-cart-contents-block/products-table-frontend.js 5.32 kB
build/mini-cart-contents-block/footer-frontend.js 5.63 kB
build/mini-cart-contents-block/items-frontend.js 226 B
build/mini-cart-contents-block/products-table-frontend.js 5.36 kB
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 23.3 kB
build/mini-cart-frontend.js 1.72 kB
build/mini-cart.js 6.56 kB
build/price-filter-frontend.js 12.1 kB
build/price-filter.js 8.49 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 224 B
build/product-add-to-cart--product-button--product-image--product-title.js 2.64 kB
build/product-add-to-cart-frontend.js 7 kB
build/product-add-to-cart.js 7.47 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 499 B
build/product-button-frontend.js 2.08 kB
build/product-button.js 2.29 kB
build/product-categories.js 3.17 kB
build/product-category-list-frontend.js 923 B
build/product-category-list.js 499 B
build/product-image-frontend.js 1.85 kB
build/product-image.js 1.08 kB
build/product-price-frontend.js 1.93 kB
build/product-price.js 1.51 kB
build/product-rating-frontend.js 1.15 kB
build/product-rating.js 731 B
build/product-sale-badge-frontend.js 1.09 kB
build/product-sale-badge.js 681 B
build/product-search.js 2.18 kB
build/product-sku-frontend.js 380 B
build/product-sku.js 382 B
build/product-stock-indicator-frontend.js 1.03 kB
build/product-stock-indicator.js 621 B
build/product-summary-frontend.js 1.33 kB
build/product-summary.js 917 B
build/product-tag-list-frontend.js 917 B
build/product-tag-list.js 494 B
build/product-title-frontend.js 1.28 kB
build/product-title.js 902 B
build/reviews-frontend.js 6.97 kB
build/single-product-frontend.js 21.6 kB
build/stock-filter-frontend.js 6.5 kB
build/stock-filter.js 6.57 kB
build/vendors--cart-blocks/line-items--cart-blocks/order-summary--checkout-blocks/order-summary--checkout--6efbf40e-frontend.js 5.26 kB
build/vendors--cart-blocks/line-items--checkout-blocks/order-summary--mini-cart-contents-block/products-table-frontend.js 3.14 kB
build/vendors--cart-blocks/order-summary--checkout-blocks/billing-address--checkout-blocks/order-summary---4f3822fa-frontend.js 19.3 kB
build/vendors--cart-blocks/order-summary--checkout-blocks/billing-address--checkout-blocks/order-summary---eb4d2cec-frontend.js 4.74 kB
build/vendors--mini-cart-contents-block/footer--mini-cart-contents-block/products-table-frontend.js 7.35 kB
build/vendors--product-add-to-cart-frontend.js 7.54 kB
build/wc-blocks-data.js 9.83 kB
build/wc-blocks-editor-style-rtl.css 4.87 kB
build/wc-blocks-editor-style.css 4.87 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 930 B
build/wc-blocks-registry.js 2.7 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.14 kB
build/wc-blocks-style-rtl.css 22.3 kB
build/wc-blocks-style.css 22.3 kB
build/wc-blocks-vendors-style-rtl.css 1.28 kB
build/wc-blocks-vendors-style.css 1.28 kB
build/wc-blocks-vendors.js 70.7 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.61 kB

compressed-size-action

Copy link
Contributor

@tomasztunik tomasztunik left a comment

Choose a reason for hiding this comment

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

Works as advertised! :)

Minor improvement opportunity and some extra thoughts on handling hidden products.

assets/js/hocs/with-product-variations.js Outdated Show resolved Hide resolved
assets/js/editor-components/utils/index.js Show resolved Hide resolved
Co-authored-by: Tomasz Tunik <tomasztunik@gmail.com>
@github-actions github-actions bot added this to the 7.4.0 milestone Mar 31, 2022
@albarin albarin merged commit 3c0e0af into trunk Mar 31, 2022
@albarin albarin deleted the fix/5344-feature-product-bug branch March 31, 2022 13:24
tjcafferkey pushed a commit that referenced this pull request Apr 5, 2022
… stock + hidden from catalog (#6166)

* Prevent accessing the first element of the `parentProduct` array if empty

* Include all products regardless of their `stock_status`

By default, the `/wc/store/v1/products` endpoint does not return products with
`outofstock` stock status. We want the users to be able to select any product
regardless of its stock status, we need to explicitly request them using the
`stock_status` query param.

* Use the optional chaining operator

Co-authored-by: Tomasz Tunik <tomasztunik@gmail.com>
tarhi-saad added a commit that referenced this pull request Apr 14, 2022
Revert "Prevent Featured Product block from breaking when product is out of stock + hidden
from catalog (#6166)"

This reverts commit 3c0e0af
tarhi-saad added a commit that referenced this pull request Apr 14, 2022
Revert "Prevent Featured Product block from breaking when product is out of stock + hidden
from catalog (#6166)"

This reverts commit 3c0e0af
tarhi-saad added a commit that referenced this pull request Apr 14, 2022
We reverted this PR
tarhi-saad added a commit that referenced this pull request Apr 14, 2022
Revert "Prevent Featured Product block from breaking when product is out of stock + hidden
from catalog (#6166)"

This reverts commit 3c0e0af

(cherry picked from commit 908526e)
tarhi-saad added a commit that referenced this pull request Apr 14, 2022
* Empty commit for release pull request

* Add Changelog to readme.txt

* Update WC tested and required versions

* Add testing notes

* Register missing C&C inner blocks and update fallback template for older C& C versions (#6195)

* Register missing C & C inner blocks and update fallback template for older C & C versions

This will fix the issues with missing order summary inner blocks: Coupons (both in C & C blocks) and the Cart header. The issue was happening because, for example, for Cart the coupons were registred on the on frontend, but it just wasn't forced in the attributes. Because it also wasn't added to the PHP fallback layout, the render function didn't include it. For the Checkout block the coupons inner block wasn't registered at all.

* Revert changes to Checkout.php, we don't need to test for inner blocks

* Revert "Revert changes to Checkout.php, we don't need to test for inner blocks"

This reverts commit fc39535.

* Fix the returned template for older Checkout block iterations

* Fix Cart and Checkout templates to accommodate the Summary order inner blocks

* Hide coupon form div from inner blocks if coubons are not enabled

* Fix checkout coupon tests in checkout

They have been written for logged in user

* Fix Order Summary Heading inner block's default text

* Update comments with better wording

* Revert "Hide coupon form div from inner blocks if coubons are not enabled"

This reverts commit ab09021.

(cherry picked from commit 40180ae)

* Update the zip file link

* Update testing instructions

* Remove experimental build related PR from testing notes

* Fix/order summary sidebar css (#6231)

* Add box sizing to Totals item

* Add some unit tests for Order summary blocks

* Fix Proceed to checkout button size

(cherry picked from commit 669aee7)

* Update the WC required/tested versions

* Mini Cart Contents: Use block pattern to make the empty cart message translatable (#6248)

* try: use block pattern to make empty cart message translatable

* Update src/BlockTypes/MiniCart.php

Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>

* rename function

Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
Co-authored-by: Luigi <gigitux@gmail.com>
(cherry picked from commit cfe73f1)

* Update the release's ZIP file

* Update testing notes

In #6065, for Cart only Order Summary Heading & Coupon form can
be removed, and for Checkout only the Coupon form.

* Update the testing notes

Remove #5870 testing notes because they can't be tested as a user

* Update Testing notes

Add screenshots to the #5967 testing notes

* Remove #6166 testing instructions

We reverted this PR

* Revert (#6166) (#6253)

Revert "Prevent Featured Product block from breaking when product is out of stock + hidden
from catalog (#6166)"

This reverts commit 3c0e0af

(cherry picked from commit 908526e)

* Bumping version strings to new version.

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Saad Tarhi <saad.trh@gmail.com>
Co-authored-by: Raluca Stan <ralucastn@gmail.com>
Co-authored-by: Luigi Teschio <gigitux@gmail.com>
Co-authored-by: Tung Du <dinhtungdu@gmail.com>
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: featured product Issues related to the Featured Product block. focus: blocks Specific work involving or impacting how blocks behave. type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Featured Product block breaks when product is out of stock + hidden from catalog
2 participants