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

Prevent prefetched Cart payload causing wrong values with cached Mini-Cart block #10029

Merged
merged 5 commits into from Jun 30, 2023

Conversation

Aljullu
Copy link
Contributor

@Aljullu Aljullu commented Jun 29, 2023

In #9493, we updated the Mini-Cart block to support caching plugins. However, there was still an issue when hovering the button: cached values were displayed for a small period of time. That was caused by the prefetching we did of the /cart/ endpoint, this PR removes that and updates the Mini-Cart block button to always display the correct values.

Testing

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:

  1. In the frontend visit any page. This will cache the page without products in the cart.

With your admin user:

  1. Add some products to your cart.
  2. Visit the same page from step 3.
  3. 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.
  4. Hover the Mini-Cart button and verify the totals are still correct.
Before After
before.webm after.webm
  1. Add another product to your cart.
  2. Verify Mini-Cart totals updated correctly.
  3. Navigate to any other page.
  4. Verify Mini-Cart values are always correct and at no moment they render incorrect data.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Changelog

Prevent prefetched Cart payload causing wrong values with cached Mini-Cart block

@Aljullu Aljullu added type: bug The issue/PR concerns a confirmed bug. block: mini-cart Issues related to the Mini-Cart block. labels Jun 29, 2023
@Aljullu Aljullu self-assigned this Jun 29, 2023
@woocommercebot woocommercebot requested review from a team and roykho and removed request for a team June 29, 2023 07:56
@github-actions
Copy link
Contributor

github-actions bot commented Jun 29, 2023

The release ZIP for this PR is accessible via:

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

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

assets/js/blocks/mini-cart/test/block.js

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Jun 29, 2023

Size Change: +64 B (0%)

Total Size: 1.18 MB

Filename Size Change
build/mini-cart-component-frontend.js 30.8 kB +70 B (0%)
build/mini-cart-frontend.js 2.84 kB -6 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 8.64 kB
build/active-filters-wrapper-frontend.js 7.58 kB
build/active-filters.js 7.48 kB
build/all-products-frontend.js 12.2 kB
build/all-products.js 40.3 kB
build/all-reviews.js 7.86 kB
build/attribute-filter-frontend.js 23 kB
build/attribute-filter-wrapper-frontend.js 7.73 kB
build/attribute-filter.js 13.3 kB
build/blocks-checkout.js 35.1 kB
build/breadcrumbs.js 2.13 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-price-frontend.js 2.92 kB
build/cart-blocks/cart-cross-sells-products-frontend.js 3.78 kB
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 301 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.48 kB
build/cart-blocks/cart-line-items-frontend.js 1.06 kB
build/cart-blocks/cart-order-summary-frontend.js 1.28 kB
build/cart-blocks/cart-totals-frontend.js 307 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 334 B
build/cart-blocks/order-summary-shipping-frontend.js 17.1 kB
build/cart-blocks/order-summary-subtotal-frontend.js 273 B
build/cart-blocks/order-summary-taxes-frontend.js 436 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.44 kB
build/cart-frontend.js 29.9 kB
build/cart.js 45.3 kB
build/catalog-sorting.js 1.7 kB
build/checkout-blocks/actions-frontend.js 1.88 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.69 kB
build/checkout-blocks/billing-address-frontend.js 1.18 kB
build/checkout-blocks/contact-information-frontend.js 2.04 kB
build/checkout-blocks/express-payment-frontend.js 1.14 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.76 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 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 9.27 kB
build/checkout-blocks/pickup-options-frontend.js 4.84 kB
build/checkout-blocks/shipping-address-frontend.js 1.17 kB
build/checkout-blocks/shipping-method-frontend.js 2.63 kB
build/checkout-blocks/shipping-methods-frontend.js 6.41 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 361 B
build/checkout-frontend.js 31.8 kB
build/checkout.js 47.9 kB
build/customer-account.js 3.19 kB
build/featured-category.js 15.1 kB
build/featured-product.js 15.3 kB
build/filter-wrapper-frontend.js 14.2 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 8.05 kB
build/legacy-template.js 8.92 kB
build/mini-cart-contents-block/cart-button-frontend.js 1.73 kB
build/mini-cart-contents-block/checkout-button-frontend.js 1.81 kB
build/mini-cart-contents-block/empty-cart-frontend.js 360 B
build/mini-cart-contents-block/filled-cart-frontend.js 267 B
build/mini-cart-contents-block/footer-frontend.js 3.83 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 587 B
build/mini-cart-contents-block/shopping-button-frontend.js 531 B
build/mini-cart-contents-block/title-frontend.js 1.9 kB
build/mini-cart-contents-block/title-items-counter-frontend.js 1.59 kB
build/mini-cart-contents-block/title-label-frontend.js 1.53 kB
build/mini-cart-contents.js 18.1 kB
build/mini-cart.js 5.93 kB
build/price-filter-frontend.js 14.7 kB
build/price-filter-wrapper-frontend.js 6.79 kB
build/price-filter.js 8.57 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 271 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.52 kB
build/product-add-to-cart.js 8.83 kB
build/product-best-sellers.js 8.36 kB
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--5bce0384.js 953 B
build/product-button-frontend.js 2.67 kB
build/product-button.js 3.97 kB
build/product-categories.js 2.72 kB
build/product-category.js 9.37 kB
build/product-collection.js 12.3 kB
build/product-image-frontend.js 2.63 kB
build/product-image.js 4.14 kB
build/product-new.js 8.65 kB
build/product-on-sale.js 8.65 kB
build/product-price-frontend.js 231 B
build/product-price.js 1.69 kB
build/product-query.js 11.9 kB
build/product-rating-frontend.js 2.35 kB
build/product-rating.js 1.04 kB
build/product-results-count.js 1.66 kB
build/product-sale-badge-frontend.js 1.8 kB
build/product-sale-badge.js 665 B
build/product-search.js 2.63 kB
build/product-sku-frontend.js 1.85 kB
build/product-sku.js 536 B
build/product-stock-indicator-frontend.js 2.04 kB
build/product-stock-indicator.js 731 B
build/product-summary-frontend.js 2.26 kB
build/product-summary.js 1.01 kB
build/product-tag.js 9 kB
build/product-template.js 3.34 kB
build/product-title-frontend.js 2.22 kB
build/product-title.js 3.65 kB
build/product-top-rated.js 8.91 kB
build/products-by-attribute.js 9.75 kB
build/rating-filter-frontend.js 21.4 kB
build/rating-filter-wrapper-frontend.js 6.23 kB
build/rating-filter.js 6.92 kB
build/reviews-by-category.js 12.1 kB
build/reviews-by-product.js 13.3 kB
build/reviews-frontend.js 7.17 kB
build/single-product.js 11.1 kB
build/stock-filter-frontend.js 21.7 kB
build/stock-filter-wrapper-frontend.js 6.5 kB
build/stock-filter.js 7.67 kB
build/store-notices.js 1.69 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--48e1e4bb-frontend.js 6.83 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-shipping--checkout-blocks/billing-addr--d9f38f9d-frontend.js 4.2 kB
build/vendors--attribute-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.4 kB
build/vendors--price-filter-wrapper-frontend.js 2.2 kB
build/vendors--product-add-to-cart-frontend.js 7.25 kB
build/vendors--rating-filter-wrapper-frontend.js 5.11 kB
build/vendors--stock-filter-wrapper-frontend.js 5.11 kB
build/wc-blocks-data.js 22.4 kB
build/wc-blocks-editor-style-rtl.css 6.35 kB
build/wc-blocks-editor-style.css 6.34 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 934 B
build/wc-blocks-registry.js 3.15 kB
build/wc-blocks-shared-context.js 1.1 kB
build/wc-blocks-shared-hocs.js 1.75 kB
build/wc-blocks-style-rtl.css 28 kB
build/wc-blocks-style.css 28 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 65.1 kB
build/wc-blocks.js 3.74 kB
build/wc-interactivity.js 10.4 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.4 kB

compressed-size-action

@@ -150,12 +150,10 @@ window.addEventListener( 'load', () => {
};

const openDrawerWithRefresh = () => {
miniCartBlock.dataset.isDataOutdated = 'true';
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This change is not directly related to the rest of the PR, but I found out that isDataOutdated was defined but never read, so it should be safe to remove it.

@roykho
Copy link
Member

roykho commented Jun 29, 2023

I am still seeing a flash of the old data in some cases.

file.mov

Steps to replicate:

  • Go to private/incognito window (not logged in).
  • Go to shop page and add some products to the cart.
  • Navigate to a different page and you will see a flash of the old price.

@Aljullu
Copy link
Contributor Author

Aljullu commented Jun 30, 2023

Oooh, good catch, @roykho! That's because when adding/removing products we weren't updating the values in the local storage, so in the next page load, we were using outdated data. It should have been fixed in f906b81. Would you mind taking another look?

@Aljullu Aljullu force-pushed the fix/cart-payload-mini-cart branch from f045b2c to f906b81 Compare June 30, 2023 08:01
Copy link
Member

@roykho roykho 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 the quick fix, it is working great now. Good job!

@github-actions github-actions bot added this to the 10.6.0 milestone Jun 30, 2023
@Aljullu Aljullu merged commit a14891f into trunk Jun 30, 2023
31 checks passed
@Aljullu Aljullu deleted the fix/cart-payload-mini-cart branch June 30, 2023 14:05
@nielslange nielslange mentioned this pull request Jul 6, 2023
5 tasks
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.

None yet

2 participants