Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix: Mini Cart: Ability to choose the drawer behavior when user add products to cart (https://github.com/woocommerce/woocommerce-blocks/pull/6052)

This commit is contained in:
Tung Du 2022-03-26 07:32:23 +07:00 committed by GitHub
parent ba2308f729
commit 7d60c8fc66
6 changed files with 67 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart/block.tsx
View File

@ -40,6 +40,7 @@ interface Props {
colorClassNames?: string;
style?: Record< string, Record< string, string > >;
contents: string;
addToCartBehaviour: string;
}
const MiniCartBlock = ( {
@ -47,6 +48,7 @@ const MiniCartBlock = ( {
colorClassNames,
style,
contents = '',
addToCartBehaviour = 'none',
}: Props ): JSX.Element => {
const {
cartItemsCount: cartItemsCountFromApi,
@ -108,8 +110,10 @@ const MiniCartBlock = ( {
useEffect( () => {
const openMiniCart = () => {
setSkipSlideIn( false );
setIsOpen( true );
if ( addToCartBehaviour === 'open_drawer' ) {
setSkipSlideIn( false );
setIsOpen( true );
}
};
// Make it so we can read jQuery events triggered by WC Core elements.
@ -131,7 +135,7 @@ const MiniCartBlock = ( {
openMiniCart
);
};
}, [] );
}, [ addToCartBehaviour ] );
const showIncludingTax = getSettingWithCoercion(
'displayCartPricesIncludingTax',

1
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart/component-frontend.tsx
View File

@ -41,6 +41,7 @@ const renderMiniCartFrontend = () => {
isInitiallyOpen: el.dataset.isInitiallyOpen === 'true',
colorClassNames,
style: el.dataset.style ? JSON.parse( el.dataset.style ) : {},
addToCartBehaviour: el.dataset.addToCartBehaviour || 'none',
contents:
el.querySelector( '.wc-block-mini-cart__template-part' )
?.innerHTML ?? '',

54
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart/edit.tsx
View File

@ -5,7 +5,7 @@ import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
import type { ReactElement } from 'react';
import { formatPrice } from '@woocommerce/price-format';
import { CartCheckoutCompatibilityNotice } from '@woocommerce/editor-components/compatibility-notices';
import { PanelBody, ExternalLink } from '@wordpress/components';
import { PanelBody, ExternalLink, SelectControl } from '@wordpress/components';
import { getSetting } from '@woocommerce/settings';
import { __ } from '@wordpress/i18n';
import Noninteractive from '@woocommerce/base-components/noninteractive';
@ -15,7 +15,20 @@ import Noninteractive from '@woocommerce/base-components/noninteractive';
*/
import QuantityBadge from './quantity-badge';
const MiniCartBlock = (): ReactElement => {
interface Attributes {
addToCartBehaviour: string;
}
interface Props {
attributes: Attributes;
setAttributes: ( attributes: Record< string, unknown > ) => void;
}
const MiniCartBlock = ( {
attributes,
setAttributes,
}: Props ): ReactElement => {
const { addToCartBehaviour } = attributes;
const blockProps = useBlockProps( {
className: `wc-block-mini-cart`,
} );
@ -31,6 +44,43 @@ const MiniCartBlock = (): ReactElement => {
return (
<div { ...blockProps }>
<InspectorControls>
<PanelBody
title={ __(
'Mini Cart Settings',
'woo-gutenberg-products-block'
) }
>
<SelectControl
label={ __(
'Add-to-Cart behaviour',
'woo-gutenberg-products-block'
) }
value={ addToCartBehaviour }
onChange={ ( value ) => {
setAttributes( { addToCartBehaviour: value } );
} }
help={ __(
'Select what happens when a customer adds a product to the cart.',
'woo-gutenberg-products-block'
) }
options={ [
{
value: 'none',
label: __(
'Do nothing',
'woo-gutenberg-products-block'
),
},
{
value: 'open_drawer',
label: __(
'Open cart drawer',
'woo-gutenberg-products-block'
),
},
] }
/>
</PanelBody>
{ templatePartEditUri && (
<PanelBody
title={ __(

4
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart/index.tsx
View File

@ -44,6 +44,10 @@ const settings = {
default: false,
save: false,
},
addToCartBehaviour: {
type: 'string',
default: 'none',
},
},
edit,

2
plugins/woocommerce-blocks/tests/e2e/specs/backend/__fixtures__/mini-cart.fixture.json
View File

@ -1 +1 @@
{"title":"Mini Cart Block","pageContent":"<!-- wp:woocommerce/mini-cart /--><!-- wp:woocommerce/all-products {\"columns\":3,\"rows\":3,\"alignButtons\":false,\"contentVisibility\":{\"orderBy\":true},\"orderby\":\"date\",\"layoutConfig\":[[\"woocommerce/product-image\"],[\"woocommerce/product-title\"],[\"woocommerce/product-price\"],[\"woocommerce/product-rating\"],[\"woocommerce/product-button\"]]} -->\n<div class=\"wp-block-woocommerce-all-products wc-block-all-products\" data-attributes=\"{&quot;alignButtons&quot;:false,&quot;columns&quot;:3,&quot;contentVisibility&quot;:{&quot;orderBy&quot;:true},&quot;isPreview&quot;:false,&quot;layoutConfig&quot;:[[&quot;woocommerce/product-image&quot;],[&quot;woocommerce/product-title&quot;],[&quot;woocommerce/product-price&quot;],[&quot;woocommerce/product-rating&quot;],[&quot;woocommerce/product-button&quot;]],&quot;orderby&quot;:&quot;date&quot;,&quot;rows&quot;:3}\"></div>\n<!-- /wp:woocommerce/all-products -->"}
{"title":"Mini Cart Block","pageContent":"<!-- wp:woocommerce/mini-cart {\"addToCartBehaviour\":\"open_drawer\"} /--><!-- wp:woocommerce/all-products {\"columns\":3,\"rows\":3,\"alignButtons\":false,\"contentVisibility\":{\"orderBy\":true},\"orderby\":\"date\",\"layoutConfig\":[[\"woocommerce/product-image\"],[\"woocommerce/product-title\"],[\"woocommerce/product-price\"],[\"woocommerce/product-rating\"],[\"woocommerce/product-button\"]]} -->\n<div class=\"wp-block-woocommerce-all-products wc-block-all-products\" data-attributes=\"{&quot;alignButtons&quot;:false,&quot;columns&quot;:3,&quot;contentVisibility&quot;:{&quot;orderBy&quot;:true},&quot;isPreview&quot;:false,&quot;layoutConfig&quot;:[[&quot;woocommerce/product-image&quot;],[&quot;woocommerce/product-title&quot;],[&quot;woocommerce/product-price&quot;],[&quot;woocommerce/product-rating&quot;],[&quot;woocommerce/product-button&quot;]],&quot;orderby&quot;:&quot;date&quot;,&quot;rows&quot;:3}\"></div>\n<!-- /wp:woocommerce/all-products -->"}

4
plugins/woocommerce-blocks/tests/e2e/specs/shopper/mini-cart.test.js
View File

@ -460,11 +460,11 @@ describe( 'Shopper → Mini Cart', () => {
describe( 'Remove product', () => {
beforeAll( async () => {
await shopper.emptyCart();
await shopper.block.emptyCart();
} );
afterAll( async () => {
await shopper.emptyCart();
await shopper.block.emptyCart();
} );
it( 'Can remove product from Mini Cart', async () => {