0714fa41bd
* Add address-related items to wc/store/cart data store * include shippingAsBilling in return value of useCustomerData * Add useUpdateCustomerData hook This allows us to have a single hook responsible for updating the customer information on the server. * Add useUpdateCustomerData hook in Checkout block * Remove the updating customer data work from the useCustomerData hook * Remove shippingAsBilling from previousCustomerData ref type * Add useShippingAsBillingCheckbox hook * Control shippingAsBilling from single hook * Remove checkbox handling from useCheckoutAddress * Remove CustomerDataContext typedef * Merge with woocommerce/woocommerce-blocks#5810 changes * Move shipping as billing to checkout state context provider * Unused import * Subscribe to changes * Only receiveCartContents when updating customer data via checkout * Cache customerDataToUpdate * rename debounced function * Combine customerDataType and customerDataContextType * Change case of CustomerDataType * debouncedUpdateCustomerData typo * Fix notice context * Clean up inline docs for push changes * Comment on dirty state * Phone is always set * shippingAddress is never undefined * setBillingPhone * receiveCartContents explanation * Tweak customerData to avoid null * useShippingAsBilling Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com> |
||
|---|---|---|
| .. | ||
| blocks-registry | ||
| components | ||
| filter-registry | ||
| slot | ||
| utils | ||
| README.md | ||
| index.js | ||
| style.scss | ||
README.md
Checkout
Components and utilities making it possible to integrate with the WooCommerce Mini Cart, 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 externals (or aliases) using the WooCommerce Dependency Extraction Webpack Plugin. Just add the above Webpack plugin to your package.json:
npm install @woocommerce/dependency-extraction-webpack-plugin --save-dev
Now, you can include this plugin in your Webpack configuration:
// webpack.config.js
const WooCommerceDependencyExtractionWebpackPlugin = require( '@woocommerce/dependency-extraction-webpack-plugin' );
module.exports = {
// …snip
plugins: [ new WooCommerceDependencyExtractionWebpackPlugin() ],
};
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. |
We're hiring! Come work with us!
🐞 Found a mistake, or have a suggestion? Leave feedback about this document here.