可用的插槽

本文档列出了可用的插槽，您可以使用它们来添加自定义内容（填充）。

如果您想添加一个新的 SlotFill 组件，请查看 结账 - 插槽填充 文档。 要了解更多关于插槽和填充的信息，请查看 插槽和填充 文档。

关于命名说明： 以 Experimental 开头的插槽是实验性的，可能会发生更改或被移除。 当它们从实验阶段毕业后，命名会发生变化，并且会删除 Experimental 前缀。 请查看 特性控制 文档，以获取更多信息。

ExperimentalOrderMeta

此插槽在购物车中的“继续结账”按钮上方，以及结账流程中的摘要部分下方进行渲染。

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: wc/store/cart 数据，但使用 camelCase 格式，而不是 snake_case 格式。 对象分解
• extensions: 由第三方开发者使用 ExtendSchema 注册的外部数据。 如果您在 wc/store/cart 上使用了 ExtendSchema，您可以在此处找到您的数据，位于您的命名空间下。
• context: 等于渲染填充的块的名称，可以是 woocommerce/cart 或 woocommerce/checkout。

ExperimentalOrderShippingPackages

此组件在“结账”流程的“配送”步骤以及“购物车”中的“配送选项”中渲染。

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',
} );

购物车：

结账：

传递的参数

• collapsible: Boolean|undefined 如果配送选项面板应该是可折叠的，如果是，则在“结账”中为 false，在“购物车”中为 undefined。
• collapse: Boolean 如果面板应该默认折叠，如果是可折叠的，则为 true。
• showItems: Boolean|undefined 是否显示每个选项的内容，在“购物车”和“结账”中为 undefined，由实际的选项逻辑决定。
• noResultsMessage: 一个 React 元素，当没有配送选项时，您可以将其渲染。
• renderOption: 一个渲染函数，它接受一个速率对象并返回一个渲染选项。
• cart: wc/store/cart 数据，但使用 camelCase 格式，而不是 snake_case。 对象分解。
• extensions: 由第三方开发者使用 ExtendSchema 注册的外部数据，如果您在 wc/store/cart 上使用了 ExtendSchema，您可以在此处找到您的数据，位于您的命名空间下。
• components: 一个包含您可以用来渲染您自己的配送费率的组件的对象，它包含 ShippingRatesControlPackage。
• context: 等于渲染填充的块的名称，可以是 woocommerce/cart 或 woocommerce/checkout。

ExperimentalOrderLocalPickupPackages

此组件在结账页面的“结账”块中的“取货选项”区域内渲染。 它不会在购物车块中渲染。

const { __ } = window.wp.i18n;
const { registerPlugin } = window.wp.plugins;
const { ExperimentalOrderLocalPickupPackages } = window.wc.blocksCheckout;

const render = () => {
	return (
		<ExperimentalOrderLocalPickupPackages>
			<div>
				{ __(
					'通过使用我们便捷的本地自提选项，您可以来我们的商店取您的订单。 当您的订单准备好取货时，我们会通过电子邮件通知您。',
					'YOUR-TEXTDOMAIN'
				) }
			</div>
		</ExperimentalOrderLocalPickupPackages>
	);
};

registerPlugin( 'slot-and-fill-examples', {
	render,
	scope: 'woocommerce-checkout',
} );

结账：

已传递的参数

• renderPickupLocation: 一个渲染函数，用于渲染本地自提选项的地址详情。
• cart: wc/store/cart 的数据，但使用 camelCase 格式，而不是 snake_case。 对象分解。
• extensions: 由第三方开发者使用 ExtendSchema 注册的外部数据。 如果您在 wc/store/cart 上使用了 ExtendSchema，您可以在此处找到您的数据，位于您的命名空间下。
• components: 一个包含组件的对象，您可以使用这些组件来渲染您自己的取货费用。 它包含 ShippingRatesControlPackage 和 RadioControl。

ExperimentalDiscountsMeta

此组件在 CouponCode 输入框下方渲染。

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">
				{ __( '您有 98683 积分可用于消费...', 'YOUR-TEXTDOMAIN' ) }
			</div>
		</ExperimentalDiscountsMeta>
	);
};

registerPlugin( 'slot-and-fill-examples', {
	render,
	scope: 'woocommerce-checkout',
} );

购物车：

结账：

传递的参数

• cart: wc/store/cart 数据，但使用了 camelCase 格式，而不是 snake_case 格式。 对象分解
• extensions: 由第三方开发者使用 ExtendSchema 注册的外部数据。 如果您在 wc/store/cart 上使用了 ExtendSchema，您可以在此处找到您的数据，它位于您的命名空间下。
• context: 等于渲染填充的 阻止 的名称：woocommerce/cart 或 woocommerce/checkout。