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

Make mini cart buttons editable (https://github.com/woocommerce/woocommerce-blocks/pull/7817) 

* Make Cart and Checkout buttons editable

* Make shopping button editable

* Remove obsolete dot from the “Empty Mini Cart view” title

* Ensure to keep the existing styles

* Improve name of start shopping button label

* Prevent potential TS error
This commit is contained in:
Niels Lange 2022-12-14 13:51:16 +07:00 committed by GitHub
parent 7e16edcf65
commit 6c40524dfe
12 changed files with 199 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
plugins/woocommerce-blocks/assets/js/base/components/button/index.tsx
View File

@ -44,6 +44,10 @@ export interface ButtonProps extends WPButton.ButtonProps {
* Button variant
*/
variant?: 'text' | 'contained' | 'outlined';
/**
* Button href
*/
href?: string | undefined;
}
/**

2
plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/empty-mini-cart-contents-block/block.json
View File

@ -1,7 +1,7 @@
{
"name": "woocommerce/empty-mini-cart-contents-block",
"version": "1.0.0",
"title": "Empty Mini Cart view.",
"title": "Empty Mini Cart view",
"description": "Blocks that are displayed when the Mini Cart is empty.",
"category": "woocommerce",
"supports": {

18
plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/attributes.tsx Normal file
View File

@ -0,0 +1,18 @@
/**
* Internal dependencies
*/
import {
defaultCartButtonLabel,
defaultCheckoutButtonLabel,
} from './constants';
export default {
cartButtonLabel: {
type: 'string',
default: defaultCartButtonLabel,
},
checkoutButtonLabel: {
type: 'string',
default: defaultCheckoutButtonLabel,
},
};

24
plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx
View File

@ -16,6 +16,14 @@ import Button from '@woocommerce/base-components/button';
import { PaymentEventsProvider } from '@woocommerce/base-context';
import classNames from 'classnames';
/**
* Internal dependencies
*/
import {
defaultCartButtonLabel,
defaultCheckoutButtonLabel,
} from './constants';
const PaymentMethodIconsElement = (): JSX.Element => {
const { paymentMethods } = usePaymentMethods();
return (
@ -27,14 +35,21 @@ const PaymentMethodIconsElement = (): JSX.Element => {
interface Props {
className?: string;
cartButtonLabel: string;
checkoutButtonLabel: string;
}
const Block = ( { className }: Props ): JSX.Element => {
const Block = ( {
className,
cartButtonLabel,
checkoutButtonLabel,
}: Props ): JSX.Element => {
const { cartTotals } = useStoreCart();
const subTotal = getSetting( 'displayCartPricesIncludingTax', false )
? parseInt( cartTotals.total_items, 10 ) +
parseInt( cartTotals.total_items_tax, 10 )
: parseInt( cartTotals.total_items, 10 );
return (
<div
className={ classNames( className, 'wc-block-mini-cart__footer' ) }
@ -56,7 +71,7 @@ const Block = ( { className }: Props ): JSX.Element => {
href={ CART_URL }
variant="outlined"
>
{ __( 'View my cart', 'woo-gutenberg-products-block' ) }
{ cartButtonLabel || defaultCartButtonLabel }
</Button>
) }
{ CHECKOUT_URL && (
@ -64,10 +79,7 @@ const Block = ( { className }: Props ): JSX.Element => {
className="wc-block-mini-cart__footer-checkout"
href={ CHECKOUT_URL }
>
{ __(
'Go to checkout',
'woo-gutenberg-products-block'
) }
{ checkoutButtonLabel || defaultCheckoutButtonLabel }
</Button>
) }
</div>

14
plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/constants.tsx Normal file
View File

@ -0,0 +1,14 @@
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
export const defaultCartButtonLabel = __(
'View my cart',
'woo-gutenberg-products-block'
);
export const defaultCheckoutButtonLabel = __(
'Go to checkout',
'woo-gutenberg-products-block'
);

95
plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/edit.tsx
View File

@ -1,22 +1,103 @@
/**
* External dependencies
*/
import { useBlockProps } from '@wordpress/block-editor';
import Noninteractive from '@woocommerce/base-components/noninteractive';
import { __ } from '@wordpress/i18n';
import { TotalsItem } from '@woocommerce/blocks-checkout';
import Button from '@woocommerce/base-components/button';
import { useBlockProps, RichText } from '@wordpress/block-editor';
import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
import {
usePaymentMethods,
useStoreCart,
} from '@woocommerce/base-context/hooks';
import PaymentMethodIcons from '@woocommerce/base-components/cart-checkout/payment-method-icons';
import { getIconsFromPaymentMethods } from '@woocommerce/base-utils';
import { getSetting } from '@woocommerce/settings';
import { PaymentEventsProvider } from '@woocommerce/base-context';
/**
* Internal dependencies
*/
import Block from './block';
import {
defaultCartButtonLabel,
defaultCheckoutButtonLabel,
} from './constants';
export const Edit = (): JSX.Element => {
const PaymentMethodIconsElement = (): JSX.Element => {
const { paymentMethods } = usePaymentMethods();
return (
<PaymentMethodIcons
icons={ getIconsFromPaymentMethods( paymentMethods ) }
/>
);
};
export const Edit = ( {
attributes,
setAttributes,
}: {
attributes: {
cartButtonLabel: string;
checkoutButtonLabel: string;
};
setAttributes: ( attributes: Record< string, unknown > ) => void;
} ): JSX.Element => {
const blockProps = useBlockProps();
const { cartButtonLabel, checkoutButtonLabel } = attributes;
const { cartTotals } = useStoreCart();
const subTotal = getSetting( 'displayCartPricesIncludingTax', false )
? parseInt( cartTotals.total_items, 10 ) +
parseInt( cartTotals.total_items_tax, 10 )
: parseInt( cartTotals.total_items, 10 );
return (
<div { ...blockProps }>
<Noninteractive>
<Block />
</Noninteractive>
<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"
variant="outlined"
>
<RichText
multiline={ false }
allowedFormats={ [] }
value={ cartButtonLabel }
placeholder={ defaultCartButtonLabel }
onChange={ ( content ) => {
setAttributes( {
cartButtonLabel: content,
} );
} }
/>
</Button>
<Button className="wc-block-mini-cart__footer-checkout">
<RichText
multiline={ false }
allowedFormats={ [] }
value={ checkoutButtonLabel }
placeholder={ defaultCheckoutButtonLabel }
onChange={ ( content ) => {
setAttributes( {
checkoutButtonLabel: content,
} );
} }
/>
</Button>
</div>
<PaymentEventsProvider>
<PaymentMethodIconsElement />
</PaymentEventsProvider>
</div>
</div>
);
};

2
plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/index.tsx
View File

@ -9,6 +9,7 @@ import { registerBlockType } from '@wordpress/blocks';
*/
import { Edit, Save } from './edit';
import metadata from './block.json';
import attributes from './attributes';
registerBlockType( metadata, {
icon: {
@ -19,6 +20,7 @@ registerBlockType( metadata, {
/>
),
},
attributes,
edit: Edit,
save: Save,
} );

11
plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-shopping-button-block/attributes.tsx Normal file
View File

@ -0,0 +1,11 @@
/**
* Internal dependencies
*/
import { defaultStartShoppingButtonLabel } from './constants';
export default {
startShoppingButtonLabel: {
type: 'string',
default: defaultStartShoppingButtonLabel,
},
};

6
plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-shopping-button-block/block.tsx
View File

@ -1,20 +1,22 @@
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { SHOP_URL } from '@woocommerce/block-settings';
import classNames from 'classnames';
/**
* Internal dependencies
*/
import { defaultStartShoppingButtonLabel } from './constants';
type MiniCartShoppingButtonBlockProps = {
className: string;
startShoppingButtonLabel: string;
};
const Block = ( {
className,
startShoppingButtonLabel,
}: MiniCartShoppingButtonBlockProps ): JSX.Element | null => {
if ( ! SHOP_URL ) {
return null;
@ -28,7 +30,7 @@ const Block = ( {
) }
>
<a href={ SHOP_URL }>
{ __( 'Start shopping', 'woo-gutenberg-products-block' ) }
{ startShoppingButtonLabel || defaultStartShoppingButtonLabel }
</a>
</div>
);

9
plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-shopping-button-block/constants.tsx Normal file
View File

@ -0,0 +1,9 @@
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
export const defaultStartShoppingButtonLabel = __(
'Start shopping',
'woo-gutenberg-products-block'
);

35
plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-shopping-button-block/edit.tsx
View File

@ -1,22 +1,43 @@
/**
* External dependencies
*/
import { useBlockProps } from '@wordpress/block-editor';
import Noninteractive from '@woocommerce/base-components/noninteractive';
import { useBlockProps, RichText } from '@wordpress/block-editor';
import Button from '@woocommerce/base-components/button';
/**
* Internal dependencies
*/
import Block from './block';
import { defaultStartShoppingButtonLabel } from './constants';
export const Edit = (): JSX.Element => {
export const Edit = ( {
attributes,
setAttributes,
}: {
attributes: {
startShoppingButtonLabel: string;
};
setAttributes: ( attributes: Record< string, unknown > ) => void;
} ): JSX.Element => {
const blockProps = useBlockProps();
const { startShoppingButtonLabel } = attributes;
return (
<div { ...blockProps }>
<Noninteractive>
<Block />
</Noninteractive>
<div className="wp-block-button aligncenter">
<Button className="wc-block-mini-cart__shopping-button">
<RichText
multiline={ false }
allowedFormats={ [] }
value={ startShoppingButtonLabel }
placeholder={ defaultStartShoppingButtonLabel }
onChange={ ( content ) => {
setAttributes( {
startShoppingButtonLabel: content,
} );
} }
/>
</Button>
</div>
</div>
);
};

2
plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-shopping-button-block/index.tsx
View File

@ -9,6 +9,7 @@ import { registerBlockType } from '@wordpress/blocks';
*/
import { Edit, Save } from './edit';
import metadata from './block.json';
import attributes from './attributes';
registerBlockType( metadata, {
icon: {
@ -19,6 +20,7 @@ registerBlockType( metadata, {
/>
),
},
attributes,
edit: Edit,
save: Save,
} );