fix - Product Button: don't trigger jQuery add to cart function when the button is clicked on classic themes (#43325)

* fix - Product Button: don't trigger old add to cart function when the button is clicked on classic themes

* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce

* improve E2E tests

* update changelog

* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce

* update changelog

* use beforeEach

---------

Co-authored-by: github-actions <github-actions@github.com>

plugins/woocommerce-blocks/tests/e2e/bin/posts/product-collection.html

@@ -0,0 +1,34 @@
+<!-- wp:woocommerce/product-collection {"queryId":0,"query":{"perPage":16,"pages":0,"offset":0,"postType":"product","order":"asc","orderBy":"title","search":"","exclude":[],"inherit":false,"taxQuery":{},"isProductCollectionBlock":true,"featured":false,"woocommerceOnSale":false,"woocommerceStockStatus":["instock","outofstock","onbackorder"],"woocommerceAttributes":[],"woocommerceHandPickedProducts":[]},"tagName":"div","displayLayout":{"type":"flex","columns":3,"shrinkColumns":true}} -->
+<div class="wp-block-woocommerce-product-collection"><!-- wp:woocommerce/product-template -->
+	<!-- wp:woocommerce/product-image {"imageSizing":"thumbnail","isDescendentOfQueryLoop":true} /-->
+
+	<!-- wp:post-title {"textAlign":"center","level":3,"isLink":true,"style":{"spacing":{"margin":{"bottom":"0.75rem","top":"0"}}},"fontSize":"medium","__woocommerceNamespace":"woocommerce/product-collection/product-title"} /-->
+
+	<!-- wp:woocommerce/product-price {"isDescendentOfQueryLoop":true,"textAlign":"center","fontSize":"small"} /-->
+
+	<!-- wp:woocommerce/product-button {"textAlign":"center","isDescendentOfQueryLoop":true,"fontSize":"small"} /-->
+	<!-- /wp:woocommerce/product-template -->
+
+	<!-- wp:query-pagination {"layout":{"type":"flex","justifyContent":"center"}} -->
+	<!-- wp:query-pagination-previous /-->
+
+	<!-- wp:query-pagination-numbers /-->
+
+	<!-- wp:query-pagination-next /-->
+	<!-- /wp:query-pagination -->
+
+	<!-- wp:woocommerce/product-collection-no-results -->
+	<!-- wp:group {"layout":{"type":"flex","orientation":"vertical","justifyContent":"center","flexWrap":"wrap"}} -->
+	<div class="wp-block-group"><!-- wp:paragraph {"fontSize":"medium"} -->
+		<p class="has-medium-font-size"><strong>No results found</strong></p>
+		<!-- /wp:paragraph -->
+
+		<!-- wp:paragraph -->
+		<p>You can try <a class="wc-link-clear-any-filters" href="#">clearing any filters</a> or head to our <a
+				class="wc-link-stores-home" href="#">store's home</a></p>
+		<!-- /wp:paragraph -->
+	</div>
+	<!-- /wp:group -->
+	<!-- /wp:woocommerce/product-collection-no-results -->
+</div>
+<!-- /wp:woocommerce/product-collection -->

plugins/woocommerce-blocks/tests/e2e/tests/product-button/product-button.block_theme.side_effects.spec.ts

@@ -24,6 +24,17 @@ test.describe( `${ blockData.name } Block`, () => {
 			blockData.selectors.frontend.productsToDisplay
 		);
 	} );
+
+	test( 'should not enqueue add-to-cart-script', async ( { page } ) => {
+		let isScriptEnqueued = false;
+		page.on( 'request', ( request ) => {
+			if ( request.url().includes( 'add-to-cart.min.js' ) )
+				isScriptEnqueued = true;
+		} );
+		await page.reload();
+		expect( isScriptEnqueued ).toBe( false );
+	} );
+
 	test( 'should add product to the cart', async ( {
 		frontendUtils,
 		page,
@@ -50,7 +61,7 @@ test.describe( `${ blockData.name } Block`, () => {
 		} );
 		await block.click();
 		await expect( block.getByRole( 'button' ) ).toHaveText( '1 in cart' );
-		await expect( block.getByRole( 'link' ) ).toBeVisible();
+		await expect( block.getByRole( 'link' ) ).toHaveText( 'View cart' );
 
 		await frontendUtils.goToCheckout();
 		const productElement = page.getByText( productName, {

plugins/woocommerce-blocks/tests/e2e/tests/product-button/product-button.classic_theme.spec.ts

@@ -0,0 +1,73 @@
+/**
+ * External dependencies
+ */
+import { expect, test as base } from '@woocommerce/e2e-playwright-utils';
+
+/**
+ * Internal dependencies
+ */
+import { blockData } from './utils';
+import ProductCollectionPage from '../product-collection/product-collection.page';
+
+const test = base.extend< { productCollectionPage: ProductCollectionPage } >( {
+	productCollectionPage: async (
+		{ page, admin, editor, templateApiUtils, editorUtils },
+		use
+	) => {
+		const pageObject = new ProductCollectionPage( {
+			page,
+			admin,
+			editor,
+			templateApiUtils,
+			editorUtils,
+		} );
+		await use( pageObject );
+	},
+} );
+test.describe( `${ blockData.name } Block`, () => {
+	test.beforeEach( async ( { page } ) => {
+		await page.goto( '/product-collection/' );
+	} );
+
+	test( 'should be visible', async ( { frontendUtils } ) => {
+		const blocks = await frontendUtils.getBlockByName( blockData.slug );
+		await expect( blocks ).toHaveCount(
+			blockData.selectors.frontend.productsToDisplay
+		);
+	} );
+
+	test( 'should add product to the cart', async ( {
+		frontendUtils,
+		page,
+	} ) => {
+		const blocks = await frontendUtils.getBlockByName( blockData.slug );
+		const block = blocks.first();
+
+		const productId = await block
+			.locator( '[data-product_id]' )
+			.getAttribute( 'data-product_id' );
+
+		const productName = await page
+			.locator( `li.post-${ productId } h3` )
+			.textContent();
+
+		// We want to fail the test if the product name is not found.
+		// eslint-disable-next-line playwright/no-conditional-in-test
+		if ( ! productName ) {
+			return test.fail( ! productName, 'Product name was not found' );
+		}
+
+		await block.locator( 'loading' ).waitFor( {
+			state: 'detached',
+		} );
+		await block.click();
+		await expect( block.getByRole( 'button' ) ).toHaveText( '1 in cart' );
+		await expect( block.getByRole( 'link' ) ).toHaveText( 'View cart' );
+
+		await frontendUtils.goToCheckout();
+		const productElement = page.getByText( productName, {
+			exact: true,
+		} );
+		await expect( productElement ).toBeVisible();
+	} );
+} );

plugins/woocommerce/changelog/43325-43288-product-collection-block-add-to-cart-adds-two-products-to-the-cart

@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+Don't trigger jQuery add to cart function when the button is clicked on classic themes

plugins/woocommerce/client/legacy/js/frontend/add-to-cart.js

@@ -14,7 +14,7 @@ jQuery( function( $ ) {
 		this.run        = this.run.bind( this );
 
 		$( document.body )
-			.on( 'click', '.add_to_cart_button', { addToCartHandler: this }, this.onAddToCart )
+			.on( 'click', '.add_to_cart_button:not(.wc-interactive)', { addToCartHandler: this }, this.onAddToCart )
 			.on( 'click', '.remove_from_cart_button', { addToCartHandler: this }, this.onRemoveFromCart )
 			.on( 'added_to_cart', this.updateButton )
 			.on( 'ajax_request_not_sent.adding_to_cart', this.updateButton )

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

@@ -52,8 +52,6 @@ class ProductButton extends AbstractBlock {
 				'wp_enqueue_scripts',
 				array( $this, 'dequeue_add_to_cart_scripts' )
 			);
-		} else {
-			$this->dequeue_add_to_cart_scripts();
 		}
 	}
 
@@ -216,7 +214,7 @@ class ProductButton extends AbstractBlock {
 						'{custom_classes}'         => esc_attr( $classname . ' ' . $custom_width_classes . ' ' . $custom_align_classes ),
 						'{html_element}'           => $html_element,
 						'{add_to_cart_url}'        => esc_url( $product->add_to_cart_url() ),
-						'{button_classes}'         => isset( $args['class'] ) ? esc_attr( $args['class'] ) : '',
+						'{button_classes}'         => isset( $args['class'] ) ? esc_attr( $args['class'] . ' wc-interactive' ) : 'wc-interactive',
 						'{button_styles}'          => esc_attr( $styles_and_classes['styles'] ),
 						'{attributes}'             => isset( $args['attributes'] ) ? wc_implode_html_attributes( $args['attributes'] ) : '',
 						'{add_to_cart_text}'       => esc_html( $initial_product_text ),