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

Pass proper data to On Sale badge when used in the scope of Product Image #9021

Merged
merged 5 commits into from
Apr 18, 2023

Conversation

kmanijak
Copy link
Contributor

@kmanijak kmanijak commented Apr 12, 2023

Product Image reuses On Sale badge block here, but it only passes "block-related" props like align and product. However, On Sale badge is wrapped with withProductDataContext, which requires additional contextual props, mainly: productId or postId (check here).

In this case productId was not passed (and neither isDescendentOfQueryLoop) so what happened:

  1. id here was undefined
  2. That resulted in an additional call for product data. But without id all the products have been returned, which had no real value.

With this change, the unnecessary call to Store API: http://store.local/wp-json/wc/store/v1/products?_locale=user is avoided.

You may spot that there's a check that should prevent that to happen. However, because of the data flow, product is undefined at the beginning and that data is hydrated in next re-renders, causing the call to happen anyway. With this change, we make sure that On Sale badge within Product Image has the same context as other product elements, hence the call for a particular product is not duplicated.

This PR is a part of #8131

Screenshots

Before After
Screenshot 2023-04-14 at 11 06 20 Screenshot 2023-04-14 at 11 07 07

Testing

Automated Tests

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

User Facing Testing

  1. Go to Editor
  2. Add a Products block
  3. Add "On Sale badge" block to the Products
  4. Expected: There's no regression, so "Sale" badge appears in both places: Product Image and On Sale Badge
  5. Save and go to frontend
  6. Confirm they appear on the frontend as well
  • [] Do not include in the Testing Notes
Additional testing steps for developers - do not include in the Testing Notes
  1. Go to Editor
  2. Add a Products block
  3. Open Dev Tools > Network tab
  4. Filter the calls with the term http://store.local/wp-json/wc/store/v1/products?
  5. Expected: There's no call for products without include={ID} query param

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Performance Impact

Changelog

Products: Optimise loading in the Editor

There was no information about product passed to the block, so it fetched information about all products which then wasn't even used
@github-actions
Copy link
Contributor

github-actions bot commented Apr 12, 2023

The release ZIP for this PR is accessible via:

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

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Apr 12, 2023

Size Change: +37 B (0%)

Total Size: 1.11 MB

Filename Size Change
build/all-products-frontend.js 11.8 kB -1 B (0%)
build/all-products.js 38.5 kB +8 B (0%)
build/cart-blocks/cart-cross-sells-products-frontend.js 9.82 kB +4 B (0%)
build/cart-frontend.js 29.3 kB +1 B (0%)
build/cart.js 48.7 kB +10 B (0%)
build/product-image-frontend.js 1.84 kB +6 B (0%)
build/product-image.js 4.3 kB +6 B (0%)
build/single-product.js 11 kB +3 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.99 kB
build/active-filters-wrapper-frontend.js 5.97 kB
build/active-filters.js 7.49 kB
build/all-reviews.js 7.66 kB
build/attribute-filter-frontend.js 22.4 kB
build/attribute-filter-wrapper-frontend.js 7.07 kB
build/attribute-filter.js 13.2 kB
build/blocks-checkout.js 35.1 kB
build/breadcrumbs.js 2.05 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-express-payment--checkout-blocks/express-payment-frontend.js 5.16 kB
build/cart-blocks/cart-express-payment-frontend.js 720 B
build/cart-blocks/cart-items-frontend.js 302 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.4 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 308 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 272 B
build/cart-blocks/order-summary-heading-frontend.js 455 B
build/cart-blocks/order-summary-shipping-frontend.js 11.8 kB
build/cart-blocks/order-summary-subtotal-frontend.js 273 B
build/cart-blocks/order-summary-taxes-frontend.js 431 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.33 kB
build/catalog-sorting.js 1.7 kB
build/checkout-blocks/actions-frontend.js 1.84 kB
build/checkout-blocks/billing-address-frontend.js 4.19 kB
build/checkout-blocks/contact-information-frontend.js 2.05 kB
build/checkout-blocks/express-payment-frontend.js 1.13 kB
build/checkout-blocks/fields-frontend.js 331 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.71 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 275 B
build/checkout-blocks/order-summary-frontend.js 1.28 kB
build/checkout-blocks/order-summary-shipping-frontend.js 11.8 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/checkout-blocks/order-summary-taxes-frontend.js 431 B
build/checkout-blocks/payment-frontend.js 8.27 kB
build/checkout-blocks/pickup-options-frontend.js 4.14 kB
build/checkout-blocks/shipping-address-frontend.js 4.14 kB
build/checkout-blocks/shipping-method-frontend.js 2.63 kB
build/checkout-blocks/shipping-methods-frontend.js 5.83 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 310 B
build/checkout-frontend.js 30.9 kB
build/checkout.js 46.3 kB
build/customer-account.js 3.17 kB
build/featured-category.js 14.1 kB
build/featured-product.js 14.3 kB
build/filter-wrapper-frontend.js 14 kB
build/filter-wrapper.js 2.4 kB
build/general-style-rtl.css 1.31 kB
build/general-style.css 1.31 kB
build/handpicked-products.js 7.92 kB
build/legacy-template.js 5.63 kB
build/mini-cart-component-frontend.js 29.2 kB
build/mini-cart-contents-block/cart-button-frontend.js 867 B
build/mini-cart-contents-block/checkout-button-frontend.js 869 B
build/mini-cart-contents-block/empty-cart-frontend.js 360 B
build/mini-cart-contents-block/filled-cart-frontend.js 268 B
build/mini-cart-contents-block/footer-frontend.js 3.2 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 588 B
build/mini-cart-contents-block/shopping-button-frontend.js 760 B
build/mini-cart-contents-block/title-frontend.js 1.09 kB
build/mini-cart-contents-block/title-items-counter-frontend.js 733 B
build/mini-cart-contents-block/title-label-frontend.js 660 B
build/mini-cart-contents.js 17.8 kB
build/mini-cart-frontend.js 2.02 kB
build/mini-cart.js 4.49 kB
build/price-filter-frontend.js 13.9 kB
build/price-filter-wrapper-frontend.js 7.04 kB
build/price-filter.js 8.46 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 253 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.43 kB
build/product-add-to-cart.js 8.8 kB
build/product-best-sellers.js 8.26 kB
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--408017d2.js 262 B
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--5bce0384.js 464 B
build/product-button-frontend.js 1.92 kB
build/product-button.js 4.17 kB
build/product-categories.js 2.37 kB
build/product-category.js 9.25 kB
build/product-new.js 8.26 kB
build/product-on-sale.js 8.59 kB
build/product-price-frontend.js 2.12 kB
build/product-price.js 1.67 kB
build/product-query.js 11.3 kB
build/product-rating-frontend.js 1.33 kB
build/product-rating.js 920 B
build/product-results-count.js 1.66 kB
build/product-sale-badge-frontend.js 976 B
build/product-sale-badge.js 799 B
build/product-search.js 2.63 kB
build/product-sku-frontend.js 1 kB
build/product-sku.js 577 B
build/product-stock-indicator-frontend.js 1.19 kB
build/product-stock-indicator.js 770 B
build/product-summary-frontend.js 1.29 kB
build/product-summary.js 922 B
build/product-tag.js 8.75 kB
build/product-title-frontend.js 1.37 kB
build/product-title.js 3.73 kB
build/product-top-rated.js 8.49 kB
build/products-by-attribute.js 9.59 kB
build/rating-filter-frontend.js 20.8 kB
build/rating-filter-wrapper-frontend.js 5.59 kB
build/rating-filter.js 6.98 kB
build/reviews-by-category.js 11.9 kB
build/reviews-by-product.js 13 kB
build/reviews-frontend.js 7.1 kB
build/stock-filter-frontend.js 21.1 kB
build/stock-filter-wrapper-frontend.js 5.83 kB
build/stock-filter.js 7.71 kB
build/store-notices.js 1.69 kB
build/vendors--attribute-filter-wrapper--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary--82e4ed06-frontend.js 6.82 kB
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 7.7 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-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js 19.4 kB
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 7.25 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/order-summary-shipping--checkout-block--24d3fc0c-frontend.js 8.24 kB
build/vendors--checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 5.44 kB
build/vendors--checkout-blocks/shipping-method-frontend.js 12 kB
build/wc-blocks-data.js 21.8 kB
build/wc-blocks-editor-style-rtl.css 5.87 kB
build/wc-blocks-editor-style.css 5.87 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 933 B
build/wc-blocks-registry.js 3.15 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 27.6 kB
build/wc-blocks-style.css 27.6 kB
build/wc-blocks-vendors-style-rtl.css 1.96 kB
build/wc-blocks-vendors-style.css 1.96 kB
build/wc-blocks-vendors.js 63.8 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
build/wc-shipping-method-pickup-location.js 29.9 kB
build/woo-directives-runtime.js 2.73 kB
build/woo-directives-vendors.js 7.91 kB

compressed-size-action

@kmanijak kmanijak added block-type: product elements Issues related to Product Element blocks. block-type: product-query Issues related to/affecting all product-query variations. labels Apr 14, 2023
@kmanijak kmanijak changed the title Don't use withProductDataContext in Sale Badge block Pass proper data to On Sale badge when used in the scope of Product Image Apr 14, 2023
@kmanijak kmanijak marked this pull request as ready for review April 14, 2023 09:15
@woocommercebot woocommercebot requested review from a team and gigitux and removed request for a team April 14, 2023 09:15
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

@github-actions github-actions bot added this to the 10.1.0 milestone Apr 18, 2023
@kmanijak kmanijak merged commit 905ebc8 into trunk Apr 18, 2023
@kmanijak kmanijak deleted the fix/8131-remove-call branch April 18, 2023 12:53
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block-type: product elements Issues related to Product Element blocks. block-type: product-query Issues related to/affecting all product-query variations.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants