173 lines
7.8 KiB
Markdown
173 lines
7.8 KiB
Markdown
---
|
|
post_title: Cart and Checkout - Available slots
|
|
menu_title: Available Slots
|
|
tags: reference
|
|
---
|
|
<!-- markdownlint-disable MD024 -->
|
|
|
|
This document presents the list of available Slots that you can use for adding your custom content (Fill).
|
|
|
|
If you want to add a new SlotFill component, check the [Checkout - Slot Fill document](https://github.com/woocommerce/woocommerce/blob/1675c63bba94c59703f57c7ef06e7deff8fd6bba/plugins/woocommerce-blocks/packages/checkout/slot/README.md). To read more about Slot and Fill, check the [Slot and Fill document](./cart-and-checkout-slot-and-fill/).
|
|
|
|
**Note About Naming:** Slots that are prefixed with `Experimental` are experimental and subject to change or remove. Once they graduate from the experimental stage, the naming would change and the `Experimental` prefix would be dropped. Check the [Feature Gating document](https://github.com/woocommerce/woocommerce/blob/1675c63bba94c59703f57c7ef06e7deff8fd6bba/plugins/woocommerce-blocks/docs/internal-developers/blocks/feature-flags-and-experimental-interfaces.md) from more information.
|
|
|
|
## ExperimentalOrderMeta
|
|
|
|
This Slot renders below the Checkout summary section and above the "Proceed to Checkout" button in the Cart.
|
|
|
|
```ts
|
|
const { __ } = window.wp.i18n;
|
|
const { registerPlugin } = window.wp.plugins;
|
|
const { ExperimentalOrderMeta } = window.wc.blocksCheckout;
|
|
|
|
const render = () => {
|
|
return (
|
|
<ExperimentalOrderMeta>
|
|
<div class="wc-block-components-totals-wrapper">
|
|
{ __( 'Yearly recurring total ...', 'YOUR-TEXTDOMAIN' ) }
|
|
</div>
|
|
</ExperimentalOrderMeta>
|
|
);
|
|
};
|
|
|
|
registerPlugin( 'slot-and-fill-examples', {
|
|
render,
|
|
scope: 'woocommerce-checkout',
|
|
} );
|
|
```
|
|
|
|
Cart:
|
|
|
|
|
|
|
|
Checkout:
|
|
|
|
|
|
|
|
### Passed parameters
|
|
|
|
- `cart`: `wc/store/cart` data but in `camelCase` instead of `snake_case`. [Object breakdown.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/c00da597efe4c16fcf5481c213d8052ec5df3766/assets/js/type-defs/cart.ts#L172-L188)
|
|
- `extensions`: external data registered by third-party developers using `ExtendSchema`. If you used `ExtendSchema` on `wc/store/cart` you would find your data under your namespace here.
|
|
- `context`, equal to the name of the Block in which the fill is rendered: `woocommerce/cart` or `woocommerce/checkout`
|
|
|
|
## ExperimentalOrderShippingPackages
|
|
|
|
This slot renders inside the shipping step of Checkout and inside the shipping options in Cart.
|
|
|
|
```ts
|
|
const { __ } = window.wp.i18n;
|
|
const { registerPlugin } = window.wp.plugins;
|
|
const { ExperimentalOrderShippingPackages } = window.wc.blocksCheckout;
|
|
|
|
const render = () => {
|
|
return (
|
|
<ExperimentalOrderShippingPackages>
|
|
<div>{ __( 'Express Shipping', 'YOUR-TEXTDOMAIN' ) }</div>
|
|
</ExperimentalOrderShippingPackages>
|
|
);
|
|
};
|
|
|
|
registerPlugin( 'slot-and-fill-examples', {
|
|
render,
|
|
scope: 'woocommerce-checkout',
|
|
} );
|
|
```
|
|
|
|
Cart:
|
|
|
|
|
|
|
|
Checkout:
|
|
|
|
|
|
|
|
### Passed parameters
|
|
|
|
- `collapsible`: `Boolean|undefined` If a shipping package panel should be collapsible or not, this is false in Checkout and undefined in Cart.
|
|
- `collapse`: `Boolean` If a panel should be collapsed by default, this is true if if panels are collapsible.
|
|
- `showItems`: `Boolean|undefined` If we should show the content of each package, this is undefined in Cart and Checkout and is left to the actual package logic to decide.
|
|
- `noResultsMessage`: A React element that you can render if there are no shipping options.
|
|
- `renderOption`: a render function that takes a rate object and returns a render option.
|
|
- `cart`: `wc/store/cart` data but in `camelCase` instead of `snake_case`. [Object breakdown.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/c00da597efe4c16fcf5481c213d8052ec5df3766/assets/js/type-defs/cart.ts#L172-L188)
|
|
- `extensions`: external data registered by third-party developers using `ExtendSchema`, if you used `ExtendSchema` on `wc/store/cart` you would find your data under your namespace here.
|
|
- `components`: an object containing components you can use to render your own shipping rates, it contains `ShippingRatesControlPackage`.
|
|
- `context`, equal to the name of the Block in which the fill is rendered: `woocommerce/cart` or `woocommerce/checkout`
|
|
|
|
## ExperimentalOrderLocalPickupPackages
|
|
|
|
This slot renders inside the Checkout Pickup Options block in the Checkout block. It does not render in the Cart block.
|
|
|
|
```ts
|
|
const { __ } = window.wp.i18n;
|
|
const { registerPlugin } = window.wp.plugins;
|
|
const { ExperimentalOrderLocalPickupPackages } = window.wc.blocksCheckout;
|
|
|
|
const render = () => {
|
|
return (
|
|
<ExperimentalOrderLocalPickupPackages>
|
|
<div>
|
|
{ __(
|
|
'By using our convenient local pickup option, you can come to our store and pick up your order. We will send you and email when your order is ready for pickup.',
|
|
'YOUR-TEXTDOMAIN'
|
|
) }
|
|
</div>
|
|
</ExperimentalOrderLocalPickupPackages>
|
|
);
|
|
};
|
|
|
|
registerPlugin( 'slot-and-fill-examples', {
|
|
render,
|
|
scope: 'woocommerce-checkout',
|
|
} );
|
|
```
|
|
|
|
Checkout:
|
|
|
|
|
|
|
|
### Passed parameters
|
|
|
|
- `renderPickupLocation`: a render function that renders the address details of a local pickup option.
|
|
- `cart`: `wc/store/cart` data but in `camelCase` instead of `snake_case`. [Object breakdown.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/c00da597efe4c16fcf5481c213d8052ec5df3766/assets/js/type-defs/cart.ts#L172-L188)
|
|
- `extensions`: external data registered by third-party developers using `ExtendSchema`, if you used `ExtendSchema` on `wc/store/cart` you would find your data under your namespace here.
|
|
- `components`: an object containing components you can use to render your own pickup rates, it contains `ShippingRatesControlPackage` and `RadioControl`.
|
|
|
|
## ExperimentalDiscountsMeta
|
|
|
|
This slot renders below the `CouponCode` input.
|
|
|
|
```ts
|
|
const { __ } = window.wp.i18n;
|
|
const { registerPlugin } = window.wp.plugins;
|
|
const { ExperimentalDiscountsMeta } = window.wc.blocksCheckout;
|
|
|
|
const render = () => {
|
|
return (
|
|
<ExperimentalDiscountsMeta>
|
|
<div class="wc-block-components-totals-wrapper">
|
|
{ __( 'You have 98683 coins to spend ...', 'YOUR-TEXTDOMAIN' ) }
|
|
</div>
|
|
</ExperimentalDiscountsMeta>
|
|
);
|
|
};
|
|
|
|
registerPlugin( 'slot-and-fill-examples', {
|
|
render,
|
|
scope: 'woocommerce-checkout',
|
|
} );
|
|
```
|
|
|
|
Cart:
|
|
|
|
|
|
|
|
Checkout:
|
|
|
|
|
|
|
|
### Passed parameters
|
|
|
|
- `cart`: `wc/store/cart` data but in `camelCase` instead of `snake_case`. [Object breakdown.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/c00da597efe4c16fcf5481c213d8052ec5df3766/assets/js/type-defs/cart.ts#L172-L188)
|
|
- `extensions`: external data registered by third-party developers using `ExtendSchema`, if you used `ExtendSchema` on `wc/store/cart` you would find your data under your namespace here.
|
|
- `context`, equal to the name of the Block in which the fill is rendered: `woocommerce/cart` or `woocommerce/checkout`
|