テーマ設定の構成
この記事では、Microsoft Dynamics 365 Commerce においてテーマ設定をコンフィギュレーションする方法について説明します。
Dynamics 365 Commerce e コマースのオンライン ソフトウェア開発キット (SDK) を使用すると、テーマ デザイナーは各モジュールのさまざまなレイアウトを指定できます。 次に、テーマ デザイナーは、画像の特定のレイアウト オプションを制御できます。 レイアウトは、\src\themes\<THEME_NAME>\<THEME_NAME>.theme.settings.json ファイルで指定されています。
例 theme.settings.json ファイル
次の例では、画像設定に対して特定のサイズ値を持つモジュール レイアウトを、theme.settings.json ファイルに追加する方法を示します。 モジュールの構成時に、各レイアウトが作成ツールで公開されます。 次の例にて、コンテンツ ブロックモジュールは 3 つのレイアウトを持つように構成されています: 全幅、左から右、およびタイル。 各レイアウトは、定義されている調整サイズの高さと幅の画像設定を指定します。
{
"modules": {
"content-block": {
"properties": {
"full-width": {
"friendlyName": "Hero",
"description": "Image on background with text overlay",
"type": "layout",
"properties": {
"image": {
"friendlyName": "Hero Image Settings",
"description": "Image settings for the hero",
"type": "imageSizes",
"properties": {
"xs": {
"width": 800,
"height": 600
},
"sm": {
"width": 1200,
"height": 900
},
"md": {
"width": 1600,
"height": 900
},
"lg": {
"width": 1600,
"height": 700
},
"xl": {
"width": 1600,
"height": 700
}
}
}
}
},
"left-right": {
"friendlyName": "Feature",
"description": "Image with text side by side",
"type": "layout",
"properties": {
"image": {
"friendlyName": "Feature Image Settings",
"description": "Feature Image Settings",
"type": "imageSizes",
"properties": {
"xs": {
"width": 509,
"height": 303
},
"sm": {
"width": 762,
"height": 471
},
"md": {
"width": 1110,
"height": 557
},
"lg": {
"width": 935,
"height": 471
},
"xl": {
"width": 935,
"height": 471
}
}
}
}
},
"tile": {
"friendlyName": "Tile",
"description": "Image with text as tiles",
"type": "layout",
"properties": {
"image": {
"friendlyName": "Tile Image Settings",
"description": "Tile Image Settings",
"type": "imageSizes",
"properties": {
"xs": {
"width": 343,
"height": 457
},
"md": {
"width": 427,
"height": 569
},
"xl": {
"width": 427,
"height": 569
}
}
}
}
}
}
}
},
"gridSettings": {
"xs": 768,
"sm": 991,
"md": 1199,
"lg": 1599,
"xl": 1600
}
}
既定のグリッド ブレークポイント設定は、theme.settings.json ファイル設定もできます (前例で gridSettings を参照)。