This repository has been archived by the owner on Feb 23, 2024. It is now read-only.
Mini Cart as template part #5025
Merged
Merged
Changes from all commits
Commits
Show all changes
21 commits
Select commit
Hold shift + click to select a range
67feb8c
Fix wrong event prefix in doc comment
Aljullu 87d711e
Make className prop in CartLineItemsTableProps optional
Aljullu 414bed1
Mini Cart as template part
Aljullu 85b7a9e
Remove BlockTemplatePartsController and instead use BlockTemplatesCon…
Aljullu 414dac8
Remove old code
Aljullu 5b41b5d
Clean up frontend rendering
Aljullu 8f6b4c2
Update tests
Aljullu b9de74b
Improve if clause
Aljullu b2e630f
Fix wrong tests title
Aljullu 7714a09
Fix wrong variable name
Aljullu eeea1ea
Make sure Mini Cart contents block is unmounted whem mini cart closes…
Aljullu 0238f92
Remove unnecessary waitFor
Aljullu cdfcb72
Fix PaymentMethodDataProvider wrong children type
Aljullu 7c1fc59
TypeScript fixes
Aljullu fe0cb73
Make comment shorter
Aljullu 5aa9c5a
Remove test code
Aljullu 797d70e
Fix contant unmounts of Mini Cart contents block
Aljullu ff180eb
Fix wrong template_type passed
Aljullu c9c2f57
Set Template part area to 'uncategorized'
Aljullu 5ee58d2
Set Template part area to the correct value
Aljullu 51930ed
Move template dir check outside loop
Aljullu File filter
Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
104 changes: 104 additions & 0 deletions
104
assets/js/blocks/cart-checkout/mini-cart-contents/block.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,104 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import { __ } from '@wordpress/i18n'; | ||
import { useEffect, useRef } from '@wordpress/element'; | ||
import { | ||
usePaymentMethods, | ||
useStoreCart, | ||
} from '@woocommerce/base-context/hooks'; | ||
import { TotalsItem } from '@woocommerce/blocks-checkout'; | ||
import { CART_URL, CHECKOUT_URL } from '@woocommerce/block-settings'; | ||
import Button from '@woocommerce/base-components/button'; | ||
import { PaymentMethodDataProvider } from '@woocommerce/base-context'; | ||
import { getIconsFromPaymentMethods } from '@woocommerce/base-utils'; | ||
import PaymentMethodIcons from '@woocommerce/base-components/cart-checkout/payment-method-icons'; | ||
import { getCurrencyFromPriceResponse } from '@woocommerce/price-format'; | ||
import { getSetting } from '@woocommerce/settings'; | ||
|
||
/** | ||
* Internal dependencies | ||
*/ | ||
import CartLineItemsTable from '../cart/cart-line-items-table'; | ||
|
||
const PaymentMethodIconsElement = (): JSX.Element => { | ||
const { paymentMethods } = usePaymentMethods(); | ||
return ( | ||
<PaymentMethodIcons | ||
icons={ getIconsFromPaymentMethods( paymentMethods ) } | ||
/> | ||
); | ||
}; | ||
|
||
const MiniCartContentsBlock = (): JSX.Element => { | ||
const { cartItems, cartIsLoading, cartTotals } = useStoreCart(); | ||
const emptyCartRef = useRef< HTMLDivElement | null >( null ); | ||
|
||
const subTotal = getSetting( 'displayCartPricesIncludingTax', false ) | ||
? parseInt( cartTotals.total_items, 10 ) + | ||
parseInt( cartTotals.total_items_tax, 10 ) | ||
: parseInt( cartTotals.total_items, 10 ); | ||
|
||
useEffect( () => { | ||
// If the cart has been completely emptied, move focus to empty cart | ||
// element. | ||
if ( ! cartIsLoading && cartItems.length === 0 ) { | ||
if ( emptyCartRef.current instanceof HTMLElement ) { | ||
emptyCartRef.current.focus(); | ||
} | ||
} | ||
}, [ cartIsLoading, cartItems.length, emptyCartRef ] ); | ||
|
||
return ! cartIsLoading && cartItems.length === 0 ? ( | ||
<div | ||
className="wc-block-mini-cart__empty-cart" | ||
tabIndex={ -1 } | ||
ref={ emptyCartRef } | ||
> | ||
{ __( 'Cart is empty', 'woo-gutenberg-products-block' ) } | ||
</div> | ||
) : ( | ||
<> | ||
<div className="wc-block-mini-cart__items"> | ||
<CartLineItemsTable | ||
lineItems={ cartItems } | ||
isLoading={ cartIsLoading } | ||
/> | ||
</div> | ||
<div className="wc-block-mini-cart__footer"> | ||
<TotalsItem | ||
className="wc-block-mini-cart__footer-subtotal" | ||
currency={ getCurrencyFromPriceResponse( cartTotals ) } | ||
label={ __( 'Subtotal', 'woo-gutenberg-products-block' ) } | ||
value={ subTotal } | ||
description={ __( | ||
'Shipping, taxes, and discounts calculated at checkout.', | ||
'woo-gutenberg-products-block' | ||
) } | ||
/> | ||
<div className="wc-block-mini-cart__footer-actions"> | ||
<Button | ||
className="wc-block-mini-cart__footer-cart" | ||
href={ CART_URL } | ||
> | ||
{ __( 'View my cart', 'woo-gutenberg-products-block' ) } | ||
</Button> | ||
<Button | ||
className="wc-block-mini-cart__footer-checkout" | ||
href={ CHECKOUT_URL } | ||
> | ||
{ __( | ||
'Go to checkout', | ||
'woo-gutenberg-products-block' | ||
) } | ||
</Button> | ||
</div> | ||
<PaymentMethodDataProvider> | ||
<PaymentMethodIconsElement /> | ||
</PaymentMethodDataProvider> | ||
</div> | ||
</> | ||
); | ||
}; | ||
|
||
export default MiniCartContentsBlock; |
17 changes: 17 additions & 0 deletions
17
assets/js/blocks/cart-checkout/mini-cart-contents/edit.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import type { ReactElement } from 'react'; | ||
import { useBlockProps } from '@wordpress/block-editor'; | ||
|
||
const Edit = (): ReactElement => { | ||
const blockProps = useBlockProps(); | ||
|
||
return ( | ||
<div { ...blockProps }> | ||
<p>Editing the mini cart contents</p> | ||
</div> | ||
); | ||
}; | ||
|
||
export default Edit; |
62 changes: 62 additions & 0 deletions
62
assets/js/blocks/cart-checkout/mini-cart-contents/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,62 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import { __ } from '@wordpress/i18n'; | ||
import { Icon, cart } from '@woocommerce/icons'; | ||
import { registerExperimentalBlockType } from '@woocommerce/block-settings'; | ||
|
||
/** | ||
* Internal dependencies | ||
*/ | ||
import edit from './edit'; | ||
|
||
const settings = { | ||
apiVersion: 2, | ||
title: __( 'Mini Cart Contents', 'woo-gutenberg-products-block' ), | ||
icon: { | ||
src: <Icon srcElement={ cart } />, | ||
foreground: '#7f54b3', | ||
}, | ||
category: 'woocommerce', | ||
keywords: [ __( 'WooCommerce', 'woo-gutenberg-products-block' ) ], | ||
description: __( | ||
'Display a mini cart widget.', | ||
'woo-gutenberg-products-block' | ||
), | ||
supports: { | ||
align: false, | ||
html: false, | ||
multiple: false, | ||
reusable: false, | ||
inserter: false, | ||
}, | ||
attributes: { | ||
lock: { | ||
type: 'object', | ||
default: { | ||
remove: true, | ||
move: true, | ||
}, | ||
}, | ||
}, | ||
example: { | ||
attributes: { | ||
isPreview: true, | ||
}, | ||
}, | ||
attributes: { | ||
isPreview: { | ||
type: 'boolean', | ||
default: false, | ||
save: false, | ||
}, | ||
}, | ||
|
||
edit, | ||
|
||
save() { | ||
return null; | ||
}, | ||
}; | ||
|
||
registerExperimentalBlockType( 'woocommerce/mini-cart-contents', settings ); |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This change is not directly related to this PR, but still wanted to add it. 🙂
count
is going to be an integer, so it's more precise to compare it to0
than to check if it's falsy.