ページコンテナーモジュールの作成

[アーティクル]
07/26/2024

この記事では、Microsoft Dynamics 365 Commerce でページコンテナーモジュールを作成する方法について説明します。

ページコンテナーは、スロットと呼ばれる特定のレイアウト地域を通してページのコア構造を制御するモジュールです。たとえば、ページコンテナーには、ヘッダー領域、メインコンテンツ領域、およびフッター領域に対して定義されているスロットがある場合があります。ページコンテナーはページのルートにのみ埋め込み可能であり、各ページには 1 つのページコンテナーがあります。

ページ作成者は、各スロットに移動するモジュール、そしてコンテナーレンダリングコードを構成し、それらのスロットのレイアウトを制御できます。コンフィギュレーション設定をページ作成者に公開して、レイアウトをさらに構成することができます。

新しいページコンテナーモジュールを作成する

Microsoft Dynamics 365 Commerce オンラインソフトウェア開発キット (SDK) は、追加モジュールコマンドラインインターフェイス (CLI) コマンドも提供しています。ページコンテナーモジュールを作成するには、このコマンドを使用して新しいモジュールを作成し、$type の値をモジュールの定義ファイルの pageModule に変更します。

たとえば、次のコマンドを実行して、campaign-page-containerという名前のモジュールを作成します。

yarn msdyn365 add-module campaign-page-container

その後、新しいモジュールの定義ファイルである campaign-page-container.definition.json を開き、$type の値を pageModule に変更します。

次の例では、スロット セクションにページコンテナーがサポートするさまざまな名前の付いたスロットが含まれることに注意してください。特定のモジュールセットのみを配置できるようにスロットを制限するには、"allowedTypes" 配列を使用して、許可されるモジュールの一覧を定義します。または、アスタリスク (*) を使用して、任意のモジュールをスロットに配置できるようにすることができます。

{
    "$type": "pageModule",
    "friendlyName": "Campaign Page Container",
    "name": "campaign-page-container",
    "description": "This is a test page container.",
    "categories": ["page"],
    "tags": [""],
    "config": {},
    "slots": {
        "header":
        {
            "friendlyName": "Header Slot",
            "description": "This is the header slot",
            "allowedTypes": ["header"],
            "max": 1,
            "min": 0
        },
        "primary":
        {
            "friendlyName": "Main Slot",
            "description": "This is the Primary slot",
            "allowedTypes": ["campaign-container", "carousel", "content-block", "product-collection"],
            "max": 5,
            "min": 0
        },
        "footer":
        {
            "friendlyName": "Footer Slot",
            "description": "This is the footer slot",
            "allowedTypes": ["footer"],
            "max": 1,
            "min": 0
        }
    }
}

MODULE_NAME.tsx ビューファイルで、ページのスロットの HTML 構造を定義することができます。

次の例は、コンテナーのスロットを活用する React ビューファイル (campaign-page-container.view.tsx) からの抜粋を示しています。

...
        return (
            <div  {...this.props.renderModuleAttributes(this.props)} id={this.props.id}>
                <div className='row'>
                    {slots.header[0]}
                </div>
                <div className='row'>
                    {slots.primary[0]}
                </div>
                <div className='row'>
                    {slots.footer[0]}
                </div>
            </div>
        );
    }
...

ページコンテナーモジュールをテストする

ローカルの開発環境でページコンテナーモジュールをテストするには、ページモックを使用する必要があります。

次の例は、テストに使用できるページモックを示しています。 /src/pageMocks ディレクトリに campaignContainerMock.json として保存されます。

{
    "exception": null,
    "pageRoot": {
        "id": "core-root_0",
        "typeName": "core-root",
        "modules": {
            "body": [
                {
                    "id": "default-page_0",
                    "typeName": "campaign-page-container",
                    "modules": {
                        "primary": [
                            {
                                "id": "primaryArea__0",
                                "typeName": "myContainer",
                                "modules": {
                                    "slot1": [
                                        { 
                                            "id": "ProductFeature__0",
                                            "typeName": "productFeature",
                                            "config": {
                                                "imageAlignment": "left",
                                                "productTitle": "Men's Grand Wingtip Shoe",
                                                "productDetails": "Genuine leather crafted with perfection.",
                                                "buttonText": "Buy Now"
                                            }
                                        }
                                    ],
                                    "slot2": [
                                        { 
                                            "id": "ProductFeature__1",
                                            "typeName": "productFeature" ,
                                            "config": {
                                                "imageAlignment": "right",
                                                "productTitle": "Men's Grand Wingtip Shoe",
                                                "productDetails": "Genuine leather crafted with perfection.",
                                                "buttonText": "Buy Now"
                                            }
                                        }
                                    ]
                                }
                            }
                        ] 
                    }
                }
            ]
        } 
    },
    "renderingContext": {
        "staticContext": {
            "staticCdnUrl": "/_scnr/"
        },
        "locale": "en-us"
    },
    "statusCode": 200
}

前のページのモックは、ページコンテナーのプライマリスロットのみを 定義していることに注意してください。ただし、必要に応じてヘッダーおよびフッター スロットを含めることもできます。

ページをプレビューする

ローカルの Web ブラウザーでページをプレビューするには、以下の手順を実行します。

コマンドプロンプトで、ルート SDK フォルダーに移動し、yarn 開始コマンドを実行します。次に例を示します。
```
c:\repos\Msdyn365.Commerce.Online\yarn start
```
Web ブラウザーで、次の URL を開き、モジュールを表示します: https://localhost:4000/page?mock=campaign-containerMock。 mock= クエリ文字列パラメーターのページモックの名前に注意します。