Update some Cart and Checkout extensibility docs to include the Mini Cart block (https://github.com/woocommerce/woocommerce-blocks/pull/5815)

* Update some Cart and Checkout extensibility docs to include the Mini Cart block

* Add Mini Cart to blocks-registry docs
This commit is contained in:
Albert Juhé Lluveras 2022-02-21 16:29:29 +01:00 committed by GitHub
parent fcaf683fdc
commit 0008e8b7f1
6 changed files with 19 additions and 13 deletions

View File

@ -49,7 +49,7 @@ The sale badges are not shown here, so those filters are not applied in the Orde
Each of these filters has the following additional arguments passed to it: `{ context: 'summary', cartItem: CartItem }` ([CartItem](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/c00da597efe4c16fcf5481c213d8052ec5df3766/assets/js/type-defs/cart.ts#L113))
### Totals footer item (in Cart and Checkout)
### Totals footer item (in Mini Cart, Cart and Checkout)
The word 'Total' that precedes the amount due, present in both the Cart _and_ Checkout blocks, is also passed through filters.
@ -122,7 +122,7 @@ To reiterate, the _value_ here will determine whether this notice gets displayed
## Examples
### Changing the wording of the Totals label in the Cart and Checkout
### Changing the wording of the Totals label in the Mini Cart, Cart and Checkout
For this example, let's suppose we are building an extension that lets customers pay a deposit, and defer the full amount until a later date.
@ -151,14 +151,14 @@ __experimentalRegisterCheckoutFilters( 'my-hypothetical-deposit-plugin', {
### Changing the format of the item's single price
Let's say we want to add a little bit of text after an item's single price **in the Cart only**, just to make sure our customers know
Let's say we want to add a little bit of text after an item's single price **in the Mini Cart and Cart blocks only**, just to make sure our customers know
that's the price per item.
1. We will need to register a function to be executed when the `subtotalPriceFormat` is applied. Since we only want this to happen in the
Cart context, our function will need to check the additional arguments passed to it to ensure the `context` value is `cart`.
We can see from the table above, that our function needs to return a string that contains a substring of `<price/>`.
This is a placeholder for the numeric value. The Cart block will interpolate the value into the string we return.
This is a placeholder for the numeric value. The Mini Cart and Cart blocks will interpolate the value into the string we return.
```typescript
const appendTextToPriceInCart = ( value, extensions, args ) => {

View File

@ -2,7 +2,7 @@
## The problem
You want to extend the Cart and Checkout blocks, but you want to use some custom data not available on Store API or the context.
You want to extend the Mini Cart, Cart and Checkout blocks, but you want to use some custom data not available on Store API or the context.
You don't want to create your own endpoints or Ajax actions. You want to piggyback on the existing StoreAPI calls.
## Solution

View File

@ -7,10 +7,10 @@ data, and you'd like this to be available to your scripts.
## The solution
You may use the `IntegrationRegistry` to register an `IntegrationInterface` this will be a class that will handle the
enqueuing of scripts, styles, and data. You may have a different `IntegrationInterface` for both the Cart and Checkout
blocks, or you may use the same one, it is entirely dependent on your use case.
enqueuing of scripts, styles, and data. You may have a different `IntegrationInterface` for each block (Mini Cart, Cart
and Checkout), or you may use the same one, it is entirely dependent on your use case.
You should use the hooks: `woocommerce_blocks_cart_block_registration` and
You should use the hooks: `woocommerce_blocks_mini-cart_block_registration`. `woocommerce_blocks_cart_block_registration` and
`woocommerce_blocks_checkout_block_registration`. These hooks both pass an instance of [`IntegrationRegistry`](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/src/Integrations/IntegrationRegistry.php) to the callback.
You may then use the `register` method on this object to register your `IntegrationInterface`.
@ -45,7 +45,7 @@ The keys and values of this array should all be serializable.
## Usage example
Let's suppose we're the author of an extension: `WooCommerce Example Plugin`. We want to enqueue scripts, styles,
and data on the frontend when either the Cart or Checkout blocks are being used.
and data on the frontend when either the Mini Cart, Cart or Checkout blocks are being used.
We also want some data from a server-side function to be available to our front-end scripts.
@ -164,9 +164,15 @@ class WooCommerce_Example_Plugin_Integration implements IntegrationInterface {
```
As mentioned, we will need register our `IntegrationInterface` with WooCommerce Blocks, as we want our scripts
to be included when either the Cart or Checkout is used, we need to register callbacks for two actions.
to be included when either the Mini Cart, Cart or Checkout is used, we need to register callbacks for two actions.
```php
add_action(
'woocommerce_blocks_mini-cart_block_registration',
function( $integration_registry ) {
$integration_registry->register( new WooCommerce_Example_Plugin_Integration() );
}
);
add_action(
'woocommerce_blocks_cart_block_registration',
function( $integration_registry ) {

View File

@ -1,6 +1,6 @@
# Checkout <!-- omit in toc -->
Components and utilities making it possible to integrate with the WooCommerce Cart and Checkout Blocks.
Components and utilities making it possible to integrate with the WooCommerce Mini Cart, Cart and Checkout Blocks.
## Table of Contents <!-- omit in toc -->

View File

@ -1,6 +1,6 @@
# Checkout - Blocks Registry <!-- omit in toc -->
This directory contains the Checkout Blocks Registry. This provides functions to **register new Inner Blocks** that can be inserted automatically, or optionally, within the cart and checkout blocks in certain areas.
This directory contains the Checkout Blocks Registry. This provides functions to **register new Inner Blocks** that can be inserted automatically, or optionally, within the Mini Cart, Cart and Checkout blocks in certain areas.
Registered Inner Blocks can either be forced within the layout of the Cart/Checkout Block, or they can just be made available to merchants so they can be inserted manually. Inner Blocks registered in this way can also define a component to render on the frontend in place of the Block.

View File

@ -128,7 +128,7 @@ A function that needs to return true when the filtered value is passed in order
## Available Filters
Filters are implemented throughout the Cart and Checkout Blocks, as well as some components. For a list of filters, [see this document](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/docs/extensibility/available-filters.md). You can also search for [usage of `__experimentalApplyCheckoutFilter` within the source code](https://github.com/woocommerce/woocommerce-gutenberg-products-block/search?q=__experimentalApplyCheckoutFilter).
Filters are implemented throughout the Mini Cart, Cart and Checkout Blocks, as well as some components. For a list of filters, [see this document](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/docs/extensibility/available-filters.md). You can also search for [usage of `__experimentalApplyCheckoutFilter` within the source code](https://github.com/woocommerce/woocommerce-gutenberg-products-block/search?q=__experimentalApplyCheckoutFilter).
<!-- FEEDBACK -->
---