4fd16267be
* Add local state to address-form * Update test with valid postcode and required fields * Push changes refactoring * Avoid loops due to retrying same data * Callbacks to prevent rerenders * Move validation functions * Filter incoming values to only those included as fields to prevent errors * Keep track of country changes to prevent excessive updates of addressFormFields. * Use helpers in test * Fill company * Revert local state in address form * Update address form to remove validation handling for postcode (country clears the field). * Revert "Update test with valid postcode and required fields" This reverts commit 718a6006df24f6e957297ad4d1ef9d6f690793bd. * Clear postcode when country changes if invalid * Revalidate fields when country changes * Comment for pick * Revert unneccessary test change * Revery moving of functions to reduce diff size * Increase push timeout in tests * Revert test changes |
||
|---|---|---|
| .. | ||
| blocks-registry | ||
| components | ||
| filter-registry | ||
| slot | ||
| utils | ||
| README.md | ||
| index.js | ||
| style.scss | ||
README.md
Checkout
Table of Contents
Components and utilities making it possible to integrate with the WooCommerce Mini-Cart, Cart and Checkout Blocks.
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.