スロットとフィル

問題

Store APIにカスタムデータを追加しました。Checkout filtersを使用して、いくつかの文字列を変更しました。ここで、カートとチェックアウトの特定の場所に独自のコンポーネントをレンダリングしたいとします。

解決策

スロットとフィルは、カートとチェックアウトのあらかじめ定義された場所に独自の HTML をレンダリングする可能性を追加するコンポーネントのペアです。あなたのコンポーネントはコンテキストデータにアクセスし、必要に応じて再レンダリングされます。

スロットとは、カートとチェックアウトの中にある、不特定多数の外部コンポーネントを表示できる場所のことです。

Fill_は、_Slot_の中にレンダリングするためにサードパーティの開発者によって提供されるコンポーネントです。

SlotとFillはWordPressのAPIを使用しており、その仕組みについてはSlot と Fill のドキュメントをご覧ください。

基本的な使い方

ExperimentalOrderMeta は、カートブロックとチェックアウトブロックのオーダーサマリーセクションの下のスロットにレンダリングされるフィルです。
ExperimentalOrderMeta は自動的にトップレベルの子にpropsを渡します：

• カートデータを格納する cart。
• wc/store/cartエンドポイントに ExtendSchema::class で登録されたデータを含むextensions。
• 塗りつぶしがレンダリングされるブロックの名前に等しい context、 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 のスコープを入力します。scopeの値は常にwoocommerce-checkoutでなければなりません。

必要条件

この機能を使用するには、カートとチェックアウトの後にスクリプトをキューに入れる必要があります。スクリプトをキューに入れる方法については、IntegrationInterface のドキュメントを参照してください。