Commit 3c864c6f8c2 for woocommerce
commit 3c864c6f8c2d95099c58139a02f22e76ebaa86b4
Author: Mario Santos <34552881+SantosGuillamot@users.noreply.github.com>
Date: Tue Apr 21 15:41:02 2026 +0200
Fix: Mini-cart does not update or open when adding through legacy events (#64152)
* Add bubbles: true to `translateJQueryEventToNative`
* Add e2e test for classic themes
* Add changefile(s) from automation for the following project(s): woocommerce
* Listen to AJAX call in the test
* Use `module` for the store-notices module
* Use same format as `utils/legacy-events.ts`
* Check mini cart badge in added test
* Remove badge `toBeHidden` from test
---------
Co-authored-by: woocommercebot <woocommercebot@users.noreply.github.com>
Co-authored-by: David <david.arenas@automattic.com>
diff --git a/plugins/woocommerce/changelog/64152-wooplug-6527-regression-mini-cart-does-not-update-or-open-when-adding b/plugins/woocommerce/changelog/64152-wooplug-6527-regression-mini-cart-does-not-update-or-open-when-adding
new file mode 100644
index 00000000000..2595d523982
--- /dev/null
+++ b/plugins/woocommerce/changelog/64152-wooplug-6527-regression-mini-cart-does-not-update-or-open-when-adding
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix Mini-cart does not update or open when adding through legacy events
\ No newline at end of file
diff --git a/plugins/woocommerce/client/blocks/assets/js/base/stores/woocommerce/legacy-events.ts b/plugins/woocommerce/client/blocks/assets/js/base/stores/woocommerce/legacy-events.ts
index 3e147db129c..85129c47085 100644
--- a/plugins/woocommerce/client/blocks/assets/js/base/stores/woocommerce/legacy-events.ts
+++ b/plugins/woocommerce/client/blocks/assets/js/base/stores/woocommerce/legacy-events.ts
@@ -54,10 +54,12 @@ export const translateJQueryEventToNative = (
// Name of the jQuery event to listen to.
jQueryEventName: string,
// Name of the native event to dispatch.
- nativeEventName: string
+ nativeEventName: string,
+ // Whether the event bubbles.
+ bubbles = false
): ( () => void ) => {
const eventDispatcher = () => {
- dispatchEvent( nativeEventName, {} );
+ dispatchEvent( nativeEventName, { bubbles } );
};
jQuery( document ).on( jQueryEventName, eventDispatcher );
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/iapi-frontend.ts b/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/iapi-frontend.ts
index 8412d2c8ec9..93fabbee27a 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/iapi-frontend.ts
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/iapi-frontend.ts
@@ -368,12 +368,14 @@ store< MiniCart >(
const removeJQueryAddedToCartEvent =
translateJQueryEventToNative(
'added_to_cart',
- 'wc-blocks_added_to_cart'
+ 'wc-blocks_added_to_cart',
+ true
);
const removeJQueryRemovedFromCartEvent =
translateJQueryEventToNative(
'removed_from_cart',
- 'wc-blocks_removed_from_cart'
+ 'wc-blocks_removed_from_cart',
+ true
);
return () => {
diff --git a/plugins/woocommerce/client/blocks/bin/webpack-config-interactive-blocks.js b/plugins/woocommerce/client/blocks/bin/webpack-config-interactive-blocks.js
index 207ebb19ae8..e96c704af02 100644
--- a/plugins/woocommerce/client/blocks/bin/webpack-config-interactive-blocks.js
+++ b/plugins/woocommerce/client/blocks/bin/webpack-config-interactive-blocks.js
@@ -82,12 +82,8 @@ module.exports = {
combineAssets: true,
combinedOutputFile: './interactivity-blocks-frontend-assets.php',
requestToExternalModule( request ) {
- if (
- request.startsWith( '@woocommerce/stores/woocommerce/' )
- ) {
+ if ( request.startsWith( '@woocommerce/stores/' ) ) {
return `module ${ request }`;
- } else if ( request.startsWith( '@woocommerce/stores/' ) ) {
- return `import ${ request }`;
}
},
} ),
diff --git a/plugins/woocommerce/client/blocks/tests/e2e/tests/mini-cart/mini-cart.classic_theme.spec.ts b/plugins/woocommerce/client/blocks/tests/e2e/tests/mini-cart/mini-cart.classic_theme.spec.ts
new file mode 100644
index 00000000000..daa2a2d270e
--- /dev/null
+++ b/plugins/woocommerce/client/blocks/tests/e2e/tests/mini-cart/mini-cart.classic_theme.spec.ts
@@ -0,0 +1,52 @@
+/**
+ * External dependencies
+ */
+import { test, expect, CLASSIC_THEME_SLUG } from '@woocommerce/e2e-utils';
+
+test.describe( 'Mini-Cart: classic theme', () => {
+ test.use( {
+ storageState: {
+ origins: [],
+ cookies: [],
+ },
+ } );
+
+ test.beforeEach( async ( { requestUtils } ) => {
+ await requestUtils.activateTheme( CLASSIC_THEME_SLUG );
+ } );
+
+ test( 'opens the drawer when a classic AJAX add-to-cart button is clicked', async ( {
+ page,
+ requestUtils,
+ } ) => {
+ // Create a page with a mini-cart block (open_drawer) and a classic
+ // [products] shortcode that renders AJAX add-to-cart links.
+ const testPage = await requestUtils.rest( {
+ method: 'POST',
+ path: '/wp/v2/pages',
+ data: {
+ status: 'publish',
+ title: 'Classic add-to-cart test page',
+ content:
+ '<!-- wp:woocommerce/mini-cart {"addToCartBehaviour":"open_drawer"} /-->\n\n<!-- wp:shortcode -->\n[products limit="3"]\n<!-- /wp:shortcode -->',
+ },
+ } );
+
+ await page.goto( `/?p=${ testPage.id }` );
+
+ const miniCartButton = page.locator( '.wc-block-mini-cart__button' );
+ const miniCartBadge = page.locator( '.wc-block-mini-cart__badge' );
+ await expect( miniCartButton ).toBeVisible();
+
+ const addToCartLink = page.getByLabel( /Add to cart/ ).first();
+ const ajaxCall = page.waitForResponse( '**wc-ajax=add_to_cart**' );
+ await addToCartLink.click();
+ // Wait for the AJAX call to complete.
+ await ajaxCall;
+ const dialog = page.getByRole( 'dialog' );
+ await expect( dialog ).toBeVisible();
+ await expect( miniCartButton ).toBeVisible();
+ await expect( miniCartBadge ).toBeVisible();
+ await expect( miniCartBadge ).toHaveText( '1' );
+ } );
+} );