Render cart items in Mini Cart drawer with iAPI, support increase / decrease quantity #58370

samueljseay · 2025-05-29T07:37:42Z

Changes proposed in this Pull Request:

This PR introduces rendering of the mini cart items in the drawer via the interactivity API (behind experimental flag like in previous PRs).

Not all functionality is yet supported but increasing/decreasing quantities is supported via the UI steppers.

Also note that there is a flicker of items when changing quantities. I plan to address improvements to the store and this issue in a follow up PR. I will also support removing items entirely in a separate PR

Screenshots or screen recordings:

Screen.Recording.2025-06-02.at.2.26.51.PM.mov

How to test the changes in this Pull Request:

Install the WooCommerce Beta Tester plugin
From admin, go Tools > WCA Helper > Features (tab) > Enable the experimental-iapi-mini-cart toggle.
Reload site on frontend, see the iAPI powered mini cart which has some functionality implemented.
Add some items to your cart on the shop page
Open drawer, see the items rendered
Use the + and - steppers to increase/decrease quantities of the items (noting that removing/going to 0 is not implemented yet)

Testing that has already taken place:

Changelog entry

Automatically create a changelog entry from the details below.

This Pull Request does not require a changelog entry. (Comment required below)

Changelog Entry Details

Significance

Patch
Minor
Major

Type

Fix - Fixes an existing bug
Add - Adds functionality
Update - Update existing functionality
Dev - Development related task
Tweak - A minor adjustment to the codebase
Performance - Address performance issues
Enhancement - Improvement to existing functionality

Message

Changelog Entry Comment

Comment

[Experimental] Render mini cart items using interactivity API when feature flag is enabled.

…r-iapi-mini-cart

…tion of experimental rendering.

…r close button for drawer.

…r-iapi-mini-cart

…mmerce, woocommerce/client/admin

…store.

…n interim workaround strip it out.

… mini cart title up to date.

…cart blocks

…tils to format prices in MiniCartFooterBlock

…illed-empty

…mmerce

… into dev/refactor-price-utils

…mmerce

github-actions · 2025-06-02T08:10:01Z

Size Change: +384 B (+0.01%)

Total Size: 5.97 MB

Filename	Size	Change
`./plugins/woocommerce/client/blocks/build/woocommerce/mini-cart.js`	2.66 kB	+384 B (+16.86%)	⚠️

_{compressed-size-action}

github-actions · 2025-06-02T08:13:17Z

Test using WordPress Playground

The changes in this pull request can be previewed and tested using a WordPress Playground instance.
WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Test this pull request with WordPress Playground.

Note that this URL is valid for 30 days from when this comment was last updated. You can update it by closing/reopening the PR or pushing a new commit.

github-actions · 2025-06-03T09:59:02Z

Testing Guidelines

Hi @luisherranz ,

Apart from reviewing the code changes, please make sure to review the testing instructions (Guide) and verify that relevant tests (E2E, Unit, Integration, etc.) have been added or updated as needed.

Reminder: PR reviewers are required to document testing performed. This includes:

🖼️ Screenshots or screen recordings.
📝 List of functionality tested / steps followed.
🌐 Site details (environment attributes such as hosting type, plugins, theme, store size, store age, and relevant settings).
🔍 Any analysis performed, such as assessing potential impacts on environment attributes and other plugins, conducting performance profiling, or using LLM/AI-based analysis.

⚠️ Within the testing details you provide, please ensure that no sensitive information (such as API keys, passwords, user data, etc.) is included in this public issue.

luisherranz

LGTM, Sam. This is looking great so far 🙂👏

Pre-approving with some comments.

luisherranz · 2025-06-04T06:26:05Z

plugins/woocommerce/src/Blocks/BlockTypes/MiniCartItemsBlock.php

+		$reduce_quantity_label = __( 'Reduce quantity of %s', 'woocommerce' );
+
+		// translators: %s is the name of the product in cart.
+		$increase_quantity_label = __( 'Increase quantity of %s', 'woocommerce' );
+
+		// translators: %s is the name of the product in cart.
+		$quantity_description_label = __( 'Quantity of %s in your cart', 'woocommerce' );
+
+		// translators: %s is the name of the product in cart.
+		$remove_from_cart_label = __( 'Remove %s from cart', 'woocommerce' );


In the Product Button block, Luigi replaced %s with ###. I guess that's not necessary, right? We should probably change it there too, for consistency.

I don't see why it would be necessary. I can ask him about it and do a follow up for consistency.

plugins/woocommerce/src/Blocks/BlockTypes/MiniCartItemsBlock.php

plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/iapi-frontend.ts

luisherranz · 2025-06-04T07:50:08Z

plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/iapi-frontend.ts

+		},
+
+		// Intended to be used in context of a cart item in wp-each
+		itemShortDescription() {


My take is that this should be moved to callbacks. I understand that it is due to the limitation of not yet having a directive for the HTML, but I'd move it anyway to keep only state and derived state inside state.

Yeah that makes sense 👍🏻

luisherranz · 2025-06-04T07:47:19Z

plugins/woocommerce/src/Blocks/BlockTypes/MiniCartItemsBlock.php

+										</div>
+										<div class="wc-block-components-product-metadata">
+											<div data-wp-watch="state.itemShortDescription" >
+												<div class="wc-block-components-product-metadata__description" data-wp-ignore></div>


Oh, this is very interesting. I wonder why you need data-wp-ignore here. I was thinking about deprecating and the removing it, as we haven't found any use case for it (and it's a very complex and confusing directive).

Ah I forgot to revisit this 🤦🏻‍♂️ . I assumed by the name of it that it was a way to tell interactivity API that I don't want it to control rendering this region, now looking at it I see it is sorta like that, but would likely only make sense to do it, if it has some initial inner content to cache? I think I can remove this.

I think it's okay to delete it and see if everything works as it should. If it doesn't work, we'll research why.

plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/iapi-frontend.ts

samueljseay · 2025-06-05T14:50:34Z

@luisherranz Could you help me debug tomorrow, there seem to be some issues with reflecting state updates, I can't work out where it's going wrong.
I've incorporated the wp-key change needed for the each to work properly, but cart item quantities don't update using the steppers anymore with the new derived state for the item context, but I can't see why they shouldn't.

I'm wondering if server side directive handling is part of the issue?

samueljseay · 2025-06-06T04:27:42Z

@luisherranz just adding some more thoughts:

A revert to the way we were using context before works: 3ff8785

We should still figure out whats going on, but one thing I don't like about the changes you made is its quite hard to reason about. I come back to finding the "context" being set to woocommerce quite confusing (and how that becomes the context for items in the loop), but also that we add another layer more indirection for a derived getter for the woocommerce context's cart item. It feels like coming back to maintain it that finding the source of the context feels like detective work.

It results in less code, but overall a lot more confusing in my opinion.

Still would be great to pair and try figure out why the current pattern is not working properly for me.

EDIT: I kept going with a new branch for the follow on quantity limits work. This branch: https://github.com/woocommerce/woocommerce/compare/dev/redo-cart-set-qty?expand=1 removes the duplicated cartItems state, but still relies on getContext from within the derived getters and everything functions as expected. I just can't get your original code of getting state directly from woocommerce namespace in the directive to work for me.

…mmerce

luisherranz

After investigating with @samueljseay and @DAreRodz, we discovered that the problem is a bug in data-wp-each, and @DAreRodz will prepare a pull request in the Interactivity API to solve it.

There is still an issue in the lineItemTotal update, for which we have to find a workaround.

samueljseay · 2025-06-10T10:36:15Z

@luisherranz how do you feel about merging this so we can continue? I've continued to iterate in #58589 and also in https://github.com/woocommerce/woocommerce/compare/wooplug-4502-interactivity-api-powered-mini-cart-display-salediscount?expand=1

luisherranz

Yes, let's do that. Sorry for the request changes.

…ecrease quantity (#58370) Co-authored-by: Luis Herranz <luisherranz@gmail.com>

samueljseay and others added 30 commits May 13, 2025 19:12

Minimal example of reworking mini cart behind a feature flag.

eb36ff2

Merge remote-tracking branch 'origin/trunk' into dev/experiment-rende…

bc50939

…r-iapi-mini-cart

Make experimental mini cart opt in in all environment, improve separa…

82b9405

…tion of experimental rendering.

Merge branch 'trunk' into dev/experiment-render-iapi-mini-cart

d9b3934

Add one more iAPI powered block using the Mini Cart Contents to rende…

7f81a95

…r close button for drawer.

Merge remote-tracking branch 'origin/trunk' into dev/experiment-rende…

d405af9

…r-iapi-mini-cart

Add changefile(s) from automation for the following project(s): wooco…

86dd564

…mmerce, woocommerce/client/admin

Consolidate mini cart store behaviour into the woocommerce/mini-cart …

4b01df9

…store.

Don't enqueue non-existent script module.

345b3d5

The template has a wrapping div around the block we don't want, for a…

74a5918

…n interim workaround strip it out.

Merge branch 'trunk' into dev/experiment-render-iapi-mini-cart

c9235eb

Implement the mini cart title block powered by iAPI

19b7acc

Fix animations of drawer and quantity badge functionality

a09c6eb

WIP experimental rendering.

72fc7d8

Use derived state in cart store for convenience, clean up types, keep…

a388266

… mini cart title up to date.

Add skeleton of footer and cart / checkout buttons

ecbe02b

Use translations and dynamic data to render some of the text in mini …

5719b41

…cart blocks

Refactor price utils so they can be used in iAPI context. Use price u…

d09d3e9

…tils to format prices in MiniCartFooterBlock

Server render the cart and checkout links for the footer block

78bf024

Merge remote-tracking branch 'origin/trunk' into dev/iapi-mini-cart-f…

2fcf06e

…illed-empty

Revert whitespace change.

96a3725

hide badge by default

02ce47a

Translate 'your cart' heading

0e9e0c9

Add changefile(s) from automation for the following project(s): wooco…

cbc76c0

…mmerce

Merge branch 'trunk' into dev/iapi-mini-cart-filled-empty

09fae69

Revert changes to pnpm lock

7ab71d4

Merge remote-tracking branch 'origin/dev/iapi-mini-cart-filled-empty'…

a142655

… into dev/refactor-price-utils

Fix types by adding CartResponseTotals to the WooCommerce store type

1906f33

Add changefile(s) from automation for the following project(s): wooco…

ffd4df0

…mmerce

WIP rendering cart items in drawer

2c68dcf

woocommerce deleted a comment from github-actions bot Jun 2, 2025

Get rid of now redundant cart getter

cc8f687

samueljseay requested a review from luisherranz June 3, 2025 09:58

Fix a bug where we need to encode entities of product titles

f3bc4e2

luisherranz approved these changes Jun 4, 2025

View reviewed changes

luisherranz added 2 commits June 4, 2025 10:02

Use woocommerce namespace for state.cart.items

80387de

Derive woocommerce::context.cartItem

1058bc4

luisherranz reviewed Jun 4, 2025

View reviewed changes

plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/iapi-frontend.ts Outdated Show resolved Hide resolved

Move getConfig outside the stores

ed722b0

Base automatically changed from dev/refactor-price-utils to trunk June 5, 2025 11:42

samueljseay added 3 commits June 5, 2025 21:40

Merge remote-tracking branch 'origin/trunk' into dev/cart-drawer-items

febebcf

Merge branch 'trunk' into dev/cart-drawer-items

ae1f08b

Fix incorrect merge, add wp key to fix rendering issues in each

b731870

Revert changes to derived state that were not working.

3ff8785

samueljseay and others added 3 commits June 6, 2025 12:38

Rearrange stores to fix lint error.

8756267

Add changefile(s) from automation for the following project(s): wooco…

13ca3be

…mmerce

Merge branch 'trunk' into dev/cart-drawer-items

2f5e2df

luisherranz requested changes Jun 10, 2025

View reviewed changes

samueljseay mentioned this pull request Jun 10, 2025

Interactivity API powered Mini Cart - bug in iAPI causes line item totals to be out of sync #58673

Closed

luisherranz approved these changes Jun 10, 2025

View reviewed changes

samueljseay merged commit 56361b1 into trunk Jun 11, 2025
39 checks passed

samueljseay deleted the dev/cart-drawer-items branch June 11, 2025 01:04

github-actions bot added this to the 10.0.0 milestone Jun 11, 2025

shaybanshee pushed a commit that referenced this pull request Jun 13, 2025

Render cart items in Mini Cart drawer with iAPI, support increase / d…

cf8078e

…ecrease quantity (#58370) Co-authored-by: Luis Herranz <luisherranz@gmail.com>

Render cart items in Mini Cart drawer with iAPI, support increase / decrease quantity #58370

Render cart items in Mini Cart drawer with iAPI, support increase / decrease quantity #58370

Uh oh!

Conversation

samueljseay commented May 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes proposed in this Pull Request:

Screenshots or screen recordings:

How to test the changes in this Pull Request:

Testing that has already taken place:

Changelog entry

Significance

Type

Message

Comment

Uh oh!

github-actions bot commented Jun 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Jun 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Test using WordPress Playground

Uh oh!

github-actions bot commented Jun 3, 2025

Testing Guidelines

Uh oh!

luisherranz left a comment

Choose a reason for hiding this comment

Uh oh!

luisherranz Jun 4, 2025

Choose a reason for hiding this comment

Uh oh!

samueljseay Jun 5, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

luisherranz Jun 4, 2025

Choose a reason for hiding this comment

Uh oh!

samueljseay Jun 5, 2025

Choose a reason for hiding this comment

Uh oh!

luisherranz Jun 4, 2025

Choose a reason for hiding this comment

Uh oh!

samueljseay Jun 5, 2025

Choose a reason for hiding this comment

Uh oh!

luisherranz Jun 5, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

samueljseay commented Jun 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

samueljseay commented Jun 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

luisherranz left a comment

Choose a reason for hiding this comment

Uh oh!

samueljseay commented Jun 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

luisherranz left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

samueljseay commented May 29, 2025 •

edited

Loading

github-actions bot commented Jun 2, 2025 •

edited

Loading

github-actions bot commented Jun 2, 2025 •

edited

Loading

samueljseay commented Jun 5, 2025 •

edited

Loading

samueljseay commented Jun 6, 2025 •

edited

Loading

samueljseay commented Jun 10, 2025 •

edited

Loading