Add an option to mini cart block to navigate directly to checkout. (#51283)

plugins/woocommerce-blocks/assets/js/blocks/mini-cart/block.json

@@ -5,9 +5,7 @@
 	"icon": "miniCartAlt",
 	"description": "Display a button for shoppers to quickly view their cart.",
 	"category": "woocommerce",
-	"keywords": [
-		"WooCommerce"
-	],
+	"keywords": [ "WooCommerce" ],
 	"textdomain": "woocommerce",
 	"supports": {
 		"html": false,
@@ -35,6 +33,10 @@
 			"type": "string",
 			"default": "none"
 		},
+		"onCartClickBehaviour": {
+			"type": "string",
+			"default": "open_drawer"
+		},
 		"hasHiddenPrice": {
 			"type": "boolean",
 			"default": true

plugins/woocommerce-blocks/assets/js/blocks/mini-cart/block.tsx

@@ -29,6 +29,7 @@ import {
 } from '@wordpress/element';
 import { sprintf, _n } from '@wordpress/i18n';
 import clsx from 'clsx';
+import { CHECKOUT_URL } from '@woocommerce/block-settings';
 
 /**
  * Internal dependencies
@@ -58,6 +59,7 @@ const MiniCartBlock = ( attributes: Props ): JSX.Element => {
 		contents = '',
 		miniCartIcon,
 		addToCartBehaviour = 'none',
+		onCartClickBehaviour = 'open_drawer',
 		hasHiddenPrice = true,
 		priceColor = defaultColorItem,
 		iconColor = defaultColorItem,
@@ -251,6 +253,11 @@ const MiniCartBlock = ( attributes: Props ): JSX.Element => {
 			<button
 				className={ `wc-block-mini-cart__button ${ colorClassNames }` }
 				onClick={ () => {
+					if ( onCartClickBehaviour === 'navigate_to_checkout' ) {
+						window.location.href = CHECKOUT_URL;
+						return;
+					}
+
 					if ( ! isOpen ) {
 						setIsOpen( true );
 						setSkipSlideIn( false );

plugins/woocommerce-blocks/assets/js/blocks/mini-cart/component-frontend.tsx

@@ -49,6 +49,8 @@ const renderMiniCartFrontend = () => {
 				style: el.dataset.style ? JSON.parse( el.dataset.style ) : {},
 				miniCartIcon: el.dataset.miniCartIcon,
 				addToCartBehaviour: el.dataset.addToCartBehaviour || 'none',
+				onCartClickBehaviour:
+					el.dataset.onCartClickBehaviour || 'open_drawer',
 				hasHiddenPrice: el.dataset.hasHiddenPrice !== 'false',
 				priceColor: el.dataset.priceColor
 					? JSON.parse( el.dataset.priceColor )

plugins/woocommerce-blocks/assets/js/blocks/mini-cart/edit.tsx

@@ -37,6 +37,7 @@ import './editor.scss';
 export interface Attributes {
 	miniCartIcon: 'cart' | 'bag' | 'bag-alt';
 	addToCartBehaviour: string;
+	onCartClickBehaviour: 'navigate_to_checkout' | 'open_drawer';
 	hasHiddenPrice: boolean;
 	cartAndCheckoutRenderStyle: boolean;
 	priceColor: ColorPaletteOption;
@@ -58,6 +59,7 @@ const Edit = ( { attributes, setAttributes }: Props ): ReactElement => {
 	const {
 		cartAndCheckoutRenderStyle,
 		addToCartBehaviour,
+		onCartClickBehaviour,
 		hasHiddenPrice,
 		priceColor = defaultColorItem,
 		iconColor = defaultColorItem,
@@ -321,6 +323,26 @@ const Edit = ( { attributes, setAttributes }: Props ): ReactElement => {
 							) }
 							checked={ addToCartBehaviour === 'open_drawer' }
 						/>
+						<ToggleControl
+							label={ __(
+								'Navigate to checkout when clicking the Mini-Cart, instead of opening the drawer.',
+								'woocommerce'
+							) }
+							onChange={ ( value ) => {
+								setAttributes( {
+									onCartClickBehaviour: value
+										? 'navigate_to_checkout'
+										: 'open_drawer',
+								} );
+							} }
+							help={ __(
+								'Toggle to disable opening the Mini-Cart drawer when clicking the cart icon, and instead navigate to the checkout page.',
+								'woocommerce'
+							) }
+							checked={
+								onCartClickBehaviour === 'navigate_to_checkout'
+							}
+						/>
 					</BaseControl>
 				</PanelBody>
 			</InspectorControls>

plugins/woocommerce-blocks/assets/js/blocks/mini-cart/types.ts

@@ -25,6 +25,7 @@ export interface BlockAttributes {
 	contents: string;
 	miniCartIcon?: IconType;
 	addToCartBehaviour: string;
+	onCartClickBehaviour: string;
 	hasHiddenPrice: boolean;
 	priceColor: ColorItem;
 	iconColor: ColorItem;

plugins/woocommerce/changelog/51283-dev-navigate-to-checkout-mini-cart

@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Add a setting to the Mini-Cart block to navigate to checkout on click instead of opening the drawer.