woocommerce/plugins/woocommerce-blocks/packages/checkout
Mike Jolley c4be7ca307 Styling (margin and padding) tweaks (https://github.com/woocommerce/woocommerce-blocks/pull/4974) 2021-10-20 17:02:05 +01:00
..
blocks-registry Update blocks-registry docs (https://github.com/woocommerce/woocommerce-blocks/pull/4946) 2021-10-19 14:05:26 +01:00
components Styling (margin and padding) tweaks (https://github.com/woocommerce/woocommerce-blocks/pull/4974) 2021-10-20 17:02:05 +01:00
filter-registry Add Checkout Package and Checkout i2 Documentation (https://github.com/woocommerce/woocommerce-blocks/pull/4892) 2021-10-12 15:23:52 +01:00
slot Add Checkout Package and Checkout i2 Documentation (https://github.com/woocommerce/woocommerce-blocks/pull/4892) 2021-10-12 15:23:52 +01:00
utils Add Checkout Package and Checkout i2 Documentation (https://github.com/woocommerce/woocommerce-blocks/pull/4892) 2021-10-12 15:23:52 +01:00
README.md Update blocks-registry docs (https://github.com/woocommerce/woocommerce-blocks/pull/4946) 2021-10-19 14:05:26 +01:00
index.js Add Checkout Package and Checkout i2 Documentation (https://github.com/woocommerce/woocommerce-blocks/pull/4892) 2021-10-12 15:23:52 +01:00
style.scss Create @woocommerce/checkout to export components to a global (https://github.com/woocommerce/woocommerce-blocks/pull/3654) 2021-01-07 13:02:21 +01:00

README.md

Checkout

Components and utilities making it possible to integrate with the WooCommerce Cart and Checkout Blocks.

Table of Contents

Installation

This package is available as an external when the WooCommerce Blocks Feature Plugin is installed and activated.

Usage

Package components can be accessed via the wc global:

const { ... } = wc.blocksCheckout;

Aliased imports

Alternatively, you can map this to external to a custom alias using the WordPress Dependency Extraction Webpack Plugin:

// webpack.config.js
const DependencyExtractionWebpackPlugin = require( '@wordpress/dependency-extraction-webpack-plugin' );

const dependencyMap = {
	'@woocommerce/blocks-checkout': [ 'wc', 'blocksCheckout' ],
};

const handleMap = {
	'@woocommerce/blocks-checkout': 'wc-blocks-checkout',
};

module.exports = {
	// …snip
	plugins: [
		new DependencyExtractionWebpackPlugin( {
			injectPolyfill: true,
			requestToExternal( request ) {
				if ( dependencyMap[ request ] ) {
					return dependencyMap[ request ];
				}
			},
			requestToHandle( request ) {
				if ( handleMap[ request ] ) {
					return handleMap[ request ];
				}
			},
		} ),
	],
};

Folder Structure Overview

This package contains the following directories. Navigate to a directory for more in depth documentation about each module.

Directory Contents
blocks-registry/ Used to register new Inner Blocks that can be inserted either automatically or optionally within the Checkout Block. Example use case: Creating a newsletter subscription block on the Checkout.
components/ Components available for use by Checkout Blocks.
filter-registry/ Used to manipulate content where filters are available. Example use case: Changing how prices are displayed. (Documentation)
slot/ Slot and Fill are a pair of components which enable developers to render in a React element tree. In this context, they are used to insert content within Blocks where slot fills are available. Example use case: Adding a custom component after the shipping options. (Documentation)
utils/ Miscellaneous utility functions for dealing with checkout functionality.



WooCommerce
We're hiring! Come work with us!