7a89cecb6b
* Notice banner component * Snackbar support * Switch to new components * Finish snackbar implementation * Summary notice * Styling issues * Fix text wrap in shipping calculator * Storybook entries * Docs and tests for NoticeBanner * Framer motion to avoid components dependency * Snackbar list stories * Docs for snackbar list * Update assets/js/base/components/notice-banner/README.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update assets/js/base/components/notice-banner/README.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update assets/js/base/components/notice-banner/README.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update assets/js/base/components/notice-banner/README.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update assets/js/base/components/notice-banner/README.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Types/docblocks * Docs * Update notice type * Use NoticeBannerProps for type of noticeProps * Raw html to fix notice encoding * getClassNameFromStatus is unused * Update position text * Clarify notice text * Fix hover style in whisper TT3 theme * remove div styles * Add new templates for legacy buyer notices in WooCommerce core (https://github.com/woocommerce/woocommerce-blocks/pull/8732) * Add templates for legacy core notices * Update src/Domain/Services/Notices.php Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com> * Remove debugging code * DRY get_notices_template * Simplify error template * Fix padding * Only include new notices if using block cart/checkout --------- Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com> * Fix view box tag * Hover and focus styles * Styling when notices added via ajax * Remove margin change * Implement react-transition-group instead of framer (https://github.com/woocommerce/woocommerce-blocks/pull/8920) * Add screenshots to docs --------- Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com> |
||
---|---|---|
.. | ||
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.