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

Prevent Mini Cart loading the same script twice #7794

Merged
merged 1 commit into from
Dec 1, 2022

Conversation

Aljullu
Copy link
Contributor

@Aljullu Aljullu commented Nov 30, 2022

This is an alternative approach to fix the issue described in #7791.

The issue seemed to be that we were loading several wc-blocks-registry scripts, so we were registering the Mini Cart inner components in one registry, but then trying to fetch them from another registry which was empty. This issue was reproducible with Product Bundles because their script (wc-pb-checkout-blocks) has a dependency on wc-blocks-checkout which depends on wc-blocks-registry.

This PR changes the way the Mini Cart block checks if a script has already been loaded in the page to avoid loading it twice. Until now, we were relying on the ids of the script elements. But for some reason which I don't understand yet, wc-blocks-registry isn't getting the proper id. So now, in addition to the previous method, we also check for the src attribute of the script elements, so if they are duplicated, we avoid loading (and preloading) the script.

As mentioned in #7791, thanks to @gigitux, @nerrad, @senadir, and @daledupreez for helping research this issue.

Testing

Automated Tests

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

User Facing Testing

  1. Install Page Optimize and Product Bundles.
  2. Enable a block theme.
  3. Customize the block theme and add the Mini Cart block in the header via Site Editor.
  4. Save the changes.
  5. In the frontend, lick on the Mini Cart. The drawer should open and show the "empty cart" message.
  6. Go to the shop page and add a product to your cart.
  7. Click on the Mini Cart. The drawer should open and show the product you just added.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Performance Impact

Changelog

Mini Cart block: fix compatibility with Page Optimize and Product Bundles plugins

@Aljullu Aljullu added status: needs review type: bug The issue/PR concerns a confirmed bug. block: mini-cart Issues related to the Mini-Cart block. labels Nov 30, 2022
@Aljullu Aljullu self-assigned this Nov 30, 2022
@rubikuserbot rubikuserbot requested review from a team and nefeline and removed request for a team November 30, 2022 20:27
@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-7794.zip

@github-actions
Copy link
Contributor

TypeScript Errors Report

Files with errors: 429
Total errors: 2064

🎉 🎉 This PR does not introduce new TS errors.

@github-actions
Copy link
Contributor

Size Change: +115 B (0%)

Total Size: 972 kB

Filename Size Change
build/mini-cart-frontend.js 1.88 kB +115 B (+7%) 🔍
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.74 kB
build/active-filters-wrapper-frontend.js 6.01 kB
build/active-filters.js 7.32 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.js 4.28 kB
build/price-filter-frontend.js 13.6 kB
build/price-filter-wrapper-frontend.js 7.02 kB
build/price-filter.js 8.37 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-query.js 4.44 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.71 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.19 kB
build/wc-blocks-editor-style.css 5.19 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

Copy link

@daledupreez daledupreez left a comment

Choose a reason for hiding this comment

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

I am not sure that this will necessarily address the case we tripped over, as the Page Optimize plugin doesn't actually write out the expected id or src attributes for scripts. This may make the checks a bit more robust in general, but I am not sure if it will address the original issue consistently.

@gigitux
Copy link
Contributor

gigitux commented Dec 1, 2022

Thanks for your deep investigation!

I can confirm that with your fix, the wc-blocks-registry is loaded only one time:

Before After
image image

In any case, I think that we should merge #7791 because we register the Mini Cart blocks in wrong way.

I am not sure that this will necessarily address the case we tripped over, as the Page Optimize plugin doesn't actually write out the expected id or src attributes for scripts. This may make the checks a bit more robust in general, but I am not sure if it will address the original issue consistently.

@daledupreez, I'm pretty sure that this PR fixes the original issue. Page Optimize adds the wc-blocks-registry in the page because wc-blocks-checkout has it as a dependency, and this latter is a dependency of the Product Bundles. As you said, it doesn't write out the expected id or src attributes for scripts. This causes the lazy-load script fails the check and re-add the same script, and this causes the reset of this object.

I will approve the PR, but feel free to continue the discussion if you have other concerns!

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.

Thanks a lot for your investigation! LGTM! 🚢

@Aljullu
Copy link
Contributor Author

Aljullu commented Dec 1, 2022

I am not sure that this will necessarily address the case we tripped over, as the Page Optimize plugin doesn't actually write out the expected id or src attributes for scripts. This may make the checks a bit more robust in general, but I am not sure if it will address the original issue consistently.

Hmm, in my testing I saw two wc-blocks-registry scripts in both environments: in local when tested with those two plugins and in the .com site.

In any case, I think that we should merge #7791 because we register the Mini Cart blocks in wrong way.

Can you expand on that? I'm a bit confused when we need to use registerCheckoutBlock() and when registerBlockComponent().

In any case, I will go ahead merging this PR for now. Thanks for the comments and reviews. 🙂

@Aljullu Aljullu merged commit e3c491b into trunk Dec 1, 2022
@Aljullu Aljullu deleted the fix/mini-cart-lazy-loading-duplicate-scripts branch December 1, 2022 10:54
@gigitux
Copy link
Contributor

gigitux commented Dec 1, 2022

Can you expand on that? I'm a bit confused when we need to use registerCheckoutBlock() and when registerBlockComponent().

Reading the JSDoc comment, registerCheckoutBlock should be a dedicated method for register blocks regarding the checkout.

@gigitux gigitux modified the milestones: 9.1.0, 8.9.2 Dec 1, 2022
gigitux added a commit that referenced this pull request Dec 1, 2022
* Empty commit for release pull request

* Display correct block template when filtering by attribute (#7640)

* Fix error when trying to access the queried object when it's null (#7664)

* Fix error when trying to access the queried object when it's null.

* Check if the `slug` exists

* Use the taxonomy name instead of the slug, otherwise it returns false

* Update readme changelog

* Add testing notes

* Improve testing notes format

* Bumping version strings to new version.

* Prevent Mini Cart loading the same script twice (#7794)

* Empty commit for release pull request

* update changelog

* add testing instructions

* update zip file link

* Mini Cart: load wc-blocks-registry package at the load of the page instead of lazy load it (#7813)

* update changelog

* update testing instructions

* update zip file link

* Bumping version strings to new version.

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
Co-authored-by: Alba Rincón <albarin@users.noreply.github.com>
Co-authored-by: Alba Rincón <alba.rincon@automattic.com>
Co-authored-by: Luigi <gigitux@gmail.com>
gigitux added a commit that referenced this pull request Dec 1, 2022
* Empty commit for release pull request

* Added readme.txt changelog entry

* Update HPOS compatibility snippet (#7395)

* 8.7.2 Testing notes

* Update testing notes

* Update testing notes

* Bumped version

* Refactor force billing: remove forcedBillingAddress from conditions for showBillingFields (#7393)

Co-authored-by: Niels Lange <info@nielslange.de>

* Updated testing instructions and changelog to include #7393

* Updated testing zip

* Bumping version strings to new version.

* Empty commit for release pull request

* Fix wrong keys being sent in `canMakePayment` and customer data showing in the Checkout block in the editor (#7434)

* Construct args for canMakePayment with correct keys

* When the CheckoutEventsContext mounts, initialize payment store

* Destructure useSelect correctly

* Dispatch __internalInitializePaymentStore in selector tests

* Update selector name to __internalUpdateAvailablePaymentMethods

* Remove check for editor when registering checkout store

* Add check for when express payment methods have updated too

* Ensure billingAddress key exists in canMakePayment arg

* Use editor context to know if we're in editor

* Updated readme.txt

* Reverted stable tag change on readme.txt

* Testing instructions

* Cleaned out testing instructions

* Bumping version strings to new version.

* Empty commit for release pull request

* Testing instructions

* package-lock.json version bump

* Revert "Fix `useForcedLayout` to re-select inner blocks after we manually insert one (#6676)" (#7447)

This reverts commit 1564de2.

* Testing zip

* Bumping version strings to new version.

* add testing instructions

* upload a new zip file

* Update styles of the Filter by Attribute dropdown so it looks good in TT3 (#7506)

* Use theme's body background color as the mini cart contents default background color (#7510)

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

* Price Slider: use `currentColor` for the slider (#7527)

* Fixed Price Slider Issue

Located where the price slider was hard coded and replaced it.

* fix CSS lint

* use currentColor instead of hard-coded color for the slider of the Filter By Price block #7130

use currentColor instead of hard-coded color for the slider of the Filte By Price block

* use currentColor instead of hard-coded color for the slider of the Filter By Price block #7130

use currentColor instead of hard-coded color for the slider of the Filte By Price block

* remove background-color

Co-authored-by: EmptySet-Exe <46509186+EmptySet-Exe@users.noreply.github.com>
Co-authored-by: Niels Lange <info@nielslange.de>

* Make price slider 'inactive' range half transparent so it looks better in dark themes (#7525)

* Fix inconsistent button styling with TT3 (#7516)

* fix inconsistent button styling with TT3

* use wc_wp_theme_get_element_class_name

* add check to be sure that wc_wp_theme_get_element_class_name function exists

* Fix Mini Cart Block global styles #7379 (#7515)

* Fix Mini Cart Block global styles #7379

Fix Mini Cart Block global styles

* add font_size

* upload a new build

* Bumping version strings to new version.

* update changelog

* Empty commit for release pull request

* add testing instructions

* update zip file link

* Prevent Mini Cart loading the same script twice (#7794)

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com>
Co-authored-by: Alex Florisca <alex.florisca@automattic.com>
Co-authored-by: Tarun Vijwani <tarun.vijwani@automattic.com>
Co-authored-by: Niels Lange <info@nielslange.de>
Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>
Co-authored-by: Luigi <gigitux@gmail.com>
Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
Co-authored-by: Tung Du <dinhtungdu@gmail.com>
Co-authored-by: EmptySet-Exe <46509186+EmptySet-Exe@users.noreply.github.com>
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: mini-cart Issues related to the Mini-Cart block. type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants