利用可能なスロット

このドキュメントでは、カスタムコンテンツ（フィル）を追加するために使用できるスロットのリストを示します。

新しい SlotFill コンポーネントを追加したい場合は、Checkout – Slot Fill documentをチェックしてください。スロットとフィルについての詳細は、スロットとフィルのドキュメントをご覧ください。

**ネーミングについての注意事項： ** 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 のデータが、snake_case ではなく camelCase になっている。オブジェクトの内訳
• extensions：サードパーティの開発者が ExtendSchema を使用して登録した外部データ。もしあなたが wc/store/cart で ExtendSchema を使用した場合、あなたのネームスペースの下にあるデータはここにあります。
• contextは、塗りつぶしがレンダリングされるブロックの名前に等しい：woocommerce/cart または woocommerce/checkout。

実験的注文出荷パッケージ

このスロットはチェックアウトの配送ステップ内とカートの配送オプション内に表示されます。

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 配送パッケージパネルが折りたたみ可能かどうか、これはCheckout では false、Cart では未定義です。
• collapse：Boolean パネルをデフォルトで折りたたむかどうか。
• これは、パネルが折りたたみ可能な場合に真となります：Boolean|undefined 各パッケージの内容を表示するかどうか。これは Cart と Checkout では未定義で、実際のパッケージロジックに任されています。
• noResultsMessage：配送オプションがない場合にレンダリングするReact要素。
• renderOption: 料金オブジェクトを受け取り、レンダーオプションを返すレンダー関数。
• cart：wc/store/cartのデータですが、snake_caseの代わりにcamelCaseです。オブジェクトの内訳
• 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>
                { __(
                    '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',
} );

パラメーター

• renderPickupLocation: 現地ピックアップオプションの住所の詳細をレンダリングするレンダー関数。
• cart：wc/store/cartのデータですが、snake_case の代わりに camelCase です。オブジェクトの内訳
• 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">
                { __( 'You have 98683 coins to spend ...', 'YOUR-TEXTDOMAIN' ) }
            </div>
        </ExperimentalDiscountsMeta>
    );
};

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

パラメーター

• cart：wc/store/cart のデータが、snake_case ではなく camelCase になっている。オブジェクトの内訳
• extensions：サードパーティの開発者が ExtendSchema を使用して登録した外部データで、wc/store/cart で ExtendSchema を使用した場合は、ここに名前空間のデータがあります。
• context、塗りつぶしがレンダリングされるブロックの名前に等しい：woocommerce/cart または woocommerce/checkout。