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

only render the contents once.

This commit is contained in:
Sam Seay 2024-09-06 15:03:41 +08:00
parent 6680be1a07
commit f55666957e
No known key found for this signature in database
GPG Key ID: 2223711A9151668A
1 changed files with 5 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
plugins/woocommerce-blocks/assets/js/blocks/mini-cart-interactivity/frontend.ts
View File

@ -34,7 +34,7 @@ interface dependencyData {
} }
interface State { interface State {
root: ReactRootWithContainer[] | undefined; existingRoot: ReactRootWithContainer[] | null;
displayQuantityBadgeStyle: string; displayQuantityBadgeStyle: string;
priceAriaLabel: string; priceAriaLabel: string;
} }
@ -114,14 +114,15 @@ const renderContents = async ( state: State ) => {
'.wc-block-mini-cart-interactivity__template-part' '.wc-block-mini-cart-interactivity__template-part'
); );
if ( templateContainer ) { // Only render the contents if there is no existing root.
state.root = renderMiniCartContents( templateContainer ); if ( templateContainer && ! state.existingRoot ) {
state.existingRoot = renderMiniCartContents( templateContainer );
} }
}; };
const { state } = store< Store >( 'woocommerce/mini-cart-interactivity', { const { state } = store< Store >( 'woocommerce/mini-cart-interactivity', {
state: { state: {
root: undefined, existingRoot: null,
get displayQuantityBadgeStyle() { get displayQuantityBadgeStyle() {
const context = getContext< Context >(); const context = getContext< Context >();
return context.cartItemCount > 0 ? 'flex' : 'none'; return context.cartItemCount > 0 ? 'flex' : 'none';
@ -203,12 +204,6 @@ const { state } = store< Store >( 'woocommerce/mini-cart-interactivity', {
context.drawerOpen = ! context.drawerOpen; context.drawerOpen = ! context.drawerOpen;
if ( context.drawerOpen ) { if ( context.drawerOpen ) {
if ( state.root ) {
state.root.forEach( ( root ) => {
root.root.unmount();
} );
}
await renderContents( state ); await renderContents( state );
} }
}, },