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

Make Mini-Cart block work well with caching plugins #9493

Merged
merged 12 commits into from
May 23, 2023

Conversation

Aljullu
Copy link
Contributor

@Aljullu Aljullu commented May 17, 2023

Fixes #9353.

Accessibility

Testing

Automated Tests

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

User Facing Testing

With your admin user:

  1. Install WP-Optimize - Clean, Compress, Cache or a similar caching plugin.
  2. Go to WP-Optimize > Settings > Cache and enable page caching.

In a private/incognito window without being logged in:
3. In the frontend visit any page. This will cache the page without products in the cart.

With your admin user:
4. Add some products to your cart.
5. Visit the same page from step 3.
6. Notice the Mini Cart totals do include the products you added in step 4, even though it's serving the cached version of step 3.

  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Performance Impact

This PR adds an extra request to all page views were the Mini-Cart block is present. It also increases a the weight of Mini-Cart block scripts on page load. However, I think the benefits of this outweight the performance impact.

Changelog

The Mini-Cart block is now compatible with caching plugins.

@Aljullu Aljullu added status: needs review type: enhancement The issue is a request for an enhancement. block: mini-cart Issues related to the Mini-Cart block. labels May 17, 2023
@Aljullu Aljullu self-assigned this May 17, 2023
@woocommercebot woocommercebot requested review from a team and gigitux and removed request for a team May 17, 2023 13:19
@github-actions
Copy link
Contributor

github-actions bot commented May 17, 2023

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-9493.zip

Script Dependencies Report

The compare-assets action has detected some changed script dependencies between this branch and trunk. Please review and confirm the following are correct before merging.

Script Handle Added Removed
reviews-frontend.js wc-settings, wp-a11y, wp-api-fetch, wp-compose, wp-element, wp-i18n, wp-is-shallow-equal, wp-polyfill ⚠️
active-filters-frontend.js wc-blocks-data-store, wc-price-format, wc-settings, wp-data, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url ⚠️
all-products-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-context, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-blocks, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-style-engine, wp-url, wp-warning, wp-wordcount ⚠️
cart-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-context, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-blocks, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-plugins, wp-polyfill, wp-primitives, wp-style-engine, wp-url, wp-warning, wp-wordcount ⚠️
checkout-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-plugins, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
filter-wrapper-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-price-format, wc-settings, wp-a11y, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-style-engine, wp-url, wp-warning ⚠️
mini-cart-frontend.js wc-price-format, wp-i18n, wp-polyfill ⚠️
rating-filter-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning ⚠️
mini-cart-component-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-price-format, wc-settings, wp-a11y, wp-autop, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-style-engine, wp-url, wp-warning, wp-wordcount ⚠️

This comment was automatically generated by the ./github/compare-assets action.

TypeScript Errors Report

  • Files with errors: 473
  • Total errors: 2268

⚠️ ⚠️ This PR introduces new TS errors on 1 files:

assets/js/blocks/mini-cart/utils/test/data.ts

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented May 17, 2023

Size Change: +1.65 kB (0%)

Total Size: 1.09 MB

Filename Size Change
build/active-filters-wrapper-frontend.js 7.62 kB +5 B (0%)
build/active-filters.js 7.47 kB -3 B (0%)
build/all-products-frontend.js 11.9 kB +1 B (0%)
build/all-products.js 39.9 kB +647 B (+2%)
build/all-reviews.js 7.77 kB -3 B (0%)
build/attribute-filter-wrapper--stock-filter-wrapper-frontend.js 4.04 kB -1 B (0%)
build/attribute-filter.js 13.1 kB -4 B (0%)
build/breadcrumbs.js 2.04 kB -2 B (0%)
build/cart-blocks/cart-cross-sells-products-frontend.js 3.73 kB -1 B (0%)
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.17 kB -2 B (0%)
build/cart-blocks/cart-express-payment-frontend.js 718 B +1 B (0%)
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.51 kB +28 B (+1%)
build/cart-blocks/cart-line-items-frontend.js 1.06 kB +1 B (0%)
build/cart-blocks/empty-cart-frontend.js 346 B +1 B (0%)
build/cart-blocks/order-summary-discount-frontend.js 2.13 kB +3 B (0%)
build/cart-blocks/order-summary-fee-frontend.js 272 B -1 B (0%)
build/cart-blocks/order-summary-shipping-frontend.js 17 kB -1 B (0%)
build/cart-blocks/order-summary-taxes-frontend.js 434 B -1 B (0%)
build/cart-frontend.js 29.7 kB +3 B (0%)
build/cart.js 45 kB +17 B (0%)
build/catalog-sorting.js 1.7 kB +3 B (0%)
build/checkout-blocks/billing-address-frontend.js 1.18 kB -3 B (0%)
build/checkout-blocks/order-summary-discount-frontend.js 2.29 kB +2 B (0%)
build/checkout-blocks/order-summary-fee-frontend.js 275 B -1 B (0%)
build/checkout-blocks/pickup-options-frontend.js 4.8 kB -2 B (0%)
build/checkout-blocks/shipping-address-frontend.js 1.17 kB +6 B (+1%)
build/checkout-blocks/shipping-methods-frontend.js 6.35 kB -2 B (0%)
build/checkout-frontend.js 31.3 kB +5 B (0%)
build/checkout.js 46.3 kB +8 B (0%)
build/customer-account.js 3.18 kB +1 B (0%)
build/featured-category.js 15 kB +3 B (0%)
build/featured-product.js 15.2 kB +5 B (0%)
build/filter-wrapper-frontend.js 14.2 kB -5 B (0%)
build/handpicked-products.js 8 kB +1 B (0%)
build/legacy-template.js 6.45 kB -1 B (0%)
build/mini-cart-component-frontend.js 28.4 kB -2 B (0%)
build/mini-cart-contents-block/cart-button-frontend.js 1.73 kB +1 B (0%)
build/mini-cart-contents-block/filled-cart-frontend.js 267 B +1 B (0%)
build/mini-cart-contents-block/footer-frontend.js 4.1 kB +1 B (0%)
build/mini-cart-contents-block/products-table-frontend.js 592 B +1 B (0%)
build/mini-cart-contents-block/title-items-counter-frontend.js 1.6 kB -1 B (0%)
build/mini-cart-contents-block/title-label-frontend.js 1.54 kB -1 B (0%)
build/mini-cart-contents.js 18 kB +24 B (0%)
build/mini-cart-frontend.js 2.66 kB +505 B (+23%) 🚨
build/mini-cart.js 4.35 kB +150 B (+4%)
build/price-filter-wrapper-frontend.js 6.75 kB -2 B (0%)
build/price-filter.js 8.47 kB +1 B (0%)
build/product-add-to-cart-frontend.js 6.51 kB -1 B (0%)
build/product-add-to-cart.js 8.87 kB -1 B (0%)
build/product-button-frontend.js 2.65 kB +2 B (0%)
build/product-button.js 4.01 kB +1 B (0%)
build/product-category.js 9.35 kB +1 B (0%)
build/product-collection.js 3.39 kB +231 B (+7%) 🔍
build/product-image-frontend.js 2.63 kB +1 B (0%)
build/product-query.js 11.7 kB -3 B (0%)
build/product-rating-frontend.js 2.31 kB +1 B (0%)
build/product-results-count.js 1.66 kB +2 B (0%)
build/product-sale-badge-frontend.js 1.8 kB +2 B (0%)
build/product-search.js 2.63 kB +2 B (0%)
build/product-sku-frontend.js 1.84 kB +1 B (0%)
build/product-stock-indicator-frontend.js 2.02 kB +1 B (0%)
build/product-template.js 3.27 kB +2 B (0%)
build/products-by-attribute.js 9.7 kB -1 B (0%)
build/rating-filter-frontend.js 21.3 kB +4 B (0%)
build/rating-filter-wrapper-frontend.js 6.21 kB +1 B (0%)
build/rating-filter.js 6.89 kB +2 B (0%)
build/reviews-by-category.js 12.1 kB -1 B (0%)
build/reviews-by-product.js 13.2 kB -3 B (0%)
build/single-product.js 11.1 kB +8 B (0%)
build/stock-filter-wrapper-frontend.js 2.98 kB +1 B (0%)
build/stock-filter.js 7.61 kB +2 B (0%)
build/store-notices.js 1.69 kB -2 B (0%)
build/wc-blocks-style-rtl.css 27.8 kB +10 B (0%)
build/wc-blocks-style.css 27.8 kB +8 B (0%)
build/wc-blocks-vendors.js 65 kB -7 B (0%)
build/wc-blocks.js 3.7 kB -4 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 8.57 kB
build/attribute-filter-wrapper-frontend.js 4.28 kB
build/blocks-checkout.js 35.1 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.39 kB
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/cart-cross-sells-products--product-price-frontend.js 2.94 kB
build/cart-blocks/cart-items-frontend.js 301 B
build/cart-blocks/cart-order-summary-frontend.js 1.28 kB
build/cart-blocks/cart-totals-frontend.js 308 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-heading-frontend.js 333 B
build/cart-blocks/order-summary-subtotal-frontend.js 273 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.38 kB
build/checkout-blocks/actions-frontend.js 1.85 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.7 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 330 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.69 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.79 kB
build/checkout-blocks/order-summary-frontend.js 1.28 kB
build/checkout-blocks/order-summary-shipping-frontend.js 17 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/checkout-blocks/order-summary-taxes-frontend.js 435 B
build/checkout-blocks/payment-frontend.js 8.29 kB
build/checkout-blocks/shipping-method-frontend.js 2.59 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 312 B
build/filter-wrapper.js 2.39 kB
build/general-style-rtl.css 1.31 kB
build/general-style.css 1.31 kB
build/mini-cart-contents-block/checkout-button-frontend.js 1.74 kB
build/mini-cart-contents-block/empty-cart-frontend.js 360 B
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/shopping-button-frontend.js 528 B
build/mini-cart-contents-block/title-frontend.js 1.91 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 251 B
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js 151 B
build/product-best-sellers.js 8.34 kB
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--5bce0384.js 963 B
build/product-categories.js 2.37 kB
build/product-image.js 4.18 kB
build/product-new.js 8.34 kB
build/product-on-sale.js 8.68 kB
build/product-price-frontend.js 203 B
build/product-price.js 1.68 kB
build/product-rating.js 999 B
build/product-sale-badge.js 666 B
build/product-sku.js 535 B
build/product-stock-indicator.js 731 B
build/product-summary-frontend.js 2.19 kB
build/product-summary.js 904 B
build/product-tag.js 8.97 kB
build/product-title-frontend.js 2.22 kB
build/product-title.js 3.69 kB
build/product-top-rated.js 8.58 kB
build/reviews-frontend.js 7.11 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--48e1e4bb-frontend.js 6.82 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-shipping--checkout-blocks/billing-addr--d9f38f9d-frontend.js 4.21 kB
build/vendors--attribute-filter-wrapper--stock-filter-wrapper-frontend.js 5.11 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-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.57 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js 19.4 kB
build/vendors--checkout-blocks/pickup-options--checkout-blocks/shipping-methods-frontend.js 8.25 kB
build/vendors--checkout-blocks/shipping-method-frontend.js 12.5 kB
build/vendors--price-filter-wrapper-frontend.js 2.2 kB
build/vendors--product-add-to-cart-frontend.js 7.26 kB
build/vendors--rating-filter-wrapper-frontend.js 5.11 kB
build/wc-blocks-data.js 22.5 kB
build/wc-blocks-editor-style-rtl.css 5.96 kB
build/wc-blocks-editor-style.css 5.96 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.75 kB
build/wc-blocks-vendors-style-rtl.css 1.96 kB
build/wc-blocks-vendors-style.css 1.96 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 30.3 kB
build/woo-directives-runtime.js 2.73 kB
build/woo-directives-vendors.js 7.91 kB

compressed-size-action

@Aljullu Aljullu force-pushed the fix/9353-mini-cart-cache-friendly branch 2 times, most recently from adf7954 to 4a1da27 Compare May 17, 2023 13:34
@Aljullu Aljullu force-pushed the fix/9353-mini-cart-cache-friendly branch 3 times, most recently from a42a1ee to d12e2b7 Compare May 17, 2023 15:44
@Aljullu Aljullu force-pushed the fix/9353-mini-cart-cache-friendly branch from d12e2b7 to 2aa687d Compare May 17, 2023 15:50
Comment on lines +260 to +262
act( () => {
userEvent.click( removeRating4Button );
} );
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I have no idea why these tests suddenly stopped passing, so I needed to add atc() here.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Heads-up that I didn't change anything in the code of this file, I just moved it over from assets/js/blocks/mini-cart/frontend.ts.

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 for working on this! Overall it works great!

I noticed when the PHP version is loaded the badge is visible, while when the JS version is loaded, the badge isn't visible:

Screen Capture on 2023-05-22 at 11-30-31

Also, I added some comments.

assets/js/blocks/mini-cart/utils/data.ts Show resolved Hide resolved
assets/js/blocks/mini-cart/utils/data.ts Outdated Show resolved Hide resolved
assets/js/blocks/mini-cart/utils/data.ts Outdated Show resolved Hide resolved
assets/js/blocks/mini-cart/utils/data.ts Show resolved Hide resolved
assets/js/blocks/mini-cart/frontend.ts Outdated Show resolved Hide resolved
src/BlockTypes/MiniCart.php Show resolved Hide resolved
@Aljullu
Copy link
Contributor Author

Aljullu commented May 22, 2023

Thanks for the review, @gigitux!

I noticed when the PHP version is loaded the badge is visible, while when the JS version is loaded, the badge isn't visible:

Oh, good catch. Should be fixed in c288ee2.

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 for addressing the comments! LGTM!

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: enhancement The issue is a request for an enhancement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Make the Mini Cart block cache-friendly
3 participants