Slot 和 Fill

问题

您向 Store API 添加了自定义数据。您使用 结账过滤器 修改了多个字符串。现在，您想在购物车和结账的特定位置渲染您自己的组件。

解决方案

Slot 和 Fill 是两个组件，它们提供了在购物车和结账的预定义位置渲染您自己的 HTML 的可能性。您的组件将访问上下文数据，并在需要时自动重新渲染。

Slot 是购物车和结账中可以渲染无限数量的外部组件的位置。

Fill 是第三方开发者提供的组件，用于在 Slot 中渲染。

Slot 和 Fill 使用 WordPress 的 API，您可以在 Slot 和 Fill 文档 中了解更多关于它们的工作原理。

基本用法

ExperimentalOrderMeta 是一个 Fill 组件，它将在购物车和结账块中的“订单摘要”部分下方渲染。 ExperimentalOrderMeta 会自动将 props 传递给其顶层子组件：

• cart，包含购物车数据
• extensions，包含在 wc/store/cart 端点中通过 ExtendSchema::class 注册的数据
• context，等于 Fill 组件所在的 Block 的名称：woocommerce/cart 或 woocommerce/checkout

const { registerPlugin } = wp.plugins;
const { ExperimentalOrderMeta } = wc.blocksCheckout;

const MyCustomComponent = ( { cart, extensions } ) => {
	return <div className="my-component">Hello WooCommerce</div>;
};

const render = () => {
	return (
		<ExperimentalOrderMeta>
			<MyCustomComponent />
		</ExperimentalOrderMeta>
	);
};

registerPlugin( 'my-plugin-namespace', {
	render,
	scope: 'woocommerce-checkout',
} );

registerPlugin

在上面的示例中，我们正在使用 registerPlugin。这个插件将接收我们的组件并渲染它，但它不会使其可见。SlotFill 部分负责实际将其显示在正确的位置。

您使用 registerPlugin 来提供您的插件命名空间、您的组件 render 以及您的 registerPlugin 的作用域。作用域的值始终应该是 woocommerce-checkout。

需求

要使此功能正常工作，您的脚本必须在购物车和结账之后被加载。您可以参考 集成界面 文档来了解如何加载您的脚本。