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>
This commit is contained in:
parent
8bbb35d63e
commit
3978be9fdd
|
@ -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 -->
|
|
@ -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, {
|
||||
|
|
|
@ -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();
|
||||
} );
|
||||
} );
|
|
@ -0,0 +1,4 @@
|
|||
Significance: minor
|
||||
Type: fix
|
||||
|
||||
Don't trigger jQuery add to cart function when the button is clicked on classic themes
|
|
@ -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 )
|
||||
|
@ -71,7 +71,7 @@ jQuery( function( $ ) {
|
|||
$thisbutton.addClass( 'loading' );
|
||||
|
||||
// Allow 3rd parties to validate and quit early.
|
||||
if ( false === $( document.body ).triggerHandler( 'should_send_ajax_request.adding_to_cart', [ $thisbutton ] ) ) {
|
||||
if ( false === $( document.body ).triggerHandler( 'should_send_ajax_request.adding_to_cart', [ $thisbutton ] ) ) {
|
||||
$( document.body ).trigger( 'ajax_request_not_sent.adding_to_cart', [ false, false, $thisbutton ] );
|
||||
return true;
|
||||
}
|
||||
|
@ -166,7 +166,7 @@ jQuery( function( $ ) {
|
|||
|
||||
if ( $button ) {
|
||||
$button.removeClass( 'loading' );
|
||||
|
||||
|
||||
if ( fragments ) {
|
||||
$button.addClass( 'added' );
|
||||
}
|
||||
|
|
|
@ -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 ),
|
||||
|
|
Loading…
Reference in New Issue