※ これから記載する事項は、私が所属する会社とは切関係のない事柄です。
今回は Salesforce B2C/B2B Commerce でどのようにデザインを変更するか前半と後半に分けて紹介したいと思います。後編はこちら。
基本的なテーマ変更
B2C/B2B Commerce では Experience Builder 上からテーマパネルを利用してテーマをカスタマイズすることができます。（ヘルプ）
テキストサイズやスペース、ロゴなど変更できる項目がたくさんあります。項目については「How —dxp Styling Hooks Map to Theme Panel Properties」をご覧ください。
試しに背景を白から黒に変えてみました。
Before：
After：
ページレイアウトの適用
ページのレイアウトを変更するた方法は下記の２種類あります。（ヘルプ）
ページレイアウト
自分が全く新しいページを作成した時に適応できるレイアウトです。ヘッダーやフッターはテーマレイアウトで編集し、このレイアウトではコンテンツ内の設定が可能です。
テーマレイアウト
商品詳細ページ、カテゴリページ、カートページといったサイト作成時に選択したテンプレートに適用できるレイアウトです。
使い方
ページレイアウト
コンテンツ内を三つの部分に分けて色付けしてみたいと思います。この各部分には様々なコンポーネントをドラッグ&ドロップで追加することができます。
1 . ページレイアウトLWCコンポーネントの作成
LWCコンポーネントの作成方法については以前紹介した記事「初めての Lightning Web コンポーネント開発で OCI を操作してみる（lwc開発方法編）」を参考にしてください。
今回は下記の４つのファイルで１つのコンポーネントを作成し環境にデプロイします。
.header{
background-color: red;
}
.main{
background-color: blue;
}
.footer{
background-color: yellow;
}
<template>
<div class='header'>
<slot name="contentTopRegion"></slot>
</div>
<div class='main'>
<slot name="contentMainRegion"></slot>
</div>
<div class='footer'>
<slot name="contentBottomRegion"></slot>
</div>
</template>
使用するスロットの名前は @slot と共に記載しておく必要があります。
import { LightningElement } from 'lwc';
/**
* @slot contentTopRegion
* @slot contentMainRegion
* @slot contentBottomRegion
*/
export default class SampleLayout extends LightningElement {}
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" >
<masterLabel>Sample Layout</masterLabel>
<description>Sample layout</description>
<apiVersion>56.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightningCommunity__Page_Layout</target>
</targets>
</LightningComponentBundle>
2. 新しいページの作成
「New Page」ボタンをクリックして、「Standard Page」を選択します。
すると、自分が作成したレイアウトが表示されているはずなので、それを選択して、必要事項を入力し、ページ作成を完了します。
テーマレイアウト
上記のページレイアウトで作ったページに対してヘッダー、フッターに加えて、test という新しいセクションを付け加えて、header：１、test：１、main：２、footer：１ となるようなレイアウトを当ててみたいと思います。（見やすくするためにヘッダーなどにデフォルトで入っているコンポーネントは全て削除しています）
1 . テーマレイアウトLWCコンポーネントの作成
今回は下記の４つのファイルで１つのコンポーネントを作成し環境にデプロイします。
:host {
display: flex;
flex-flow: column;
height: 100vh;
}
.l-header{
flex-grow: 1;
}
.l-test{
flex-grow: 1;
}
.l-main{
flex-grow: 2;
}
.l-footer{
flex-grow: 1;
}
スロット名はheaderとfooterは元々当たっていたslotの名前なので、踏襲しています。デフォルトのテンプレートのレイアウトはGithubを参考にしてみてください。
<template>
<header data-f6-region class="l-header">
<slot name="header"></slot>
</header>
<section data-f6-region class="l-test" >
<slot name="test"></slot>
</section>
<section data-f6-region class="l-main" >
<slot></slot>
</section>
<footer data-f6-region class="l-footer" >
<slot name="footer"></slot>
</footer>
</template>
import { LightningElement } from 'lwc';
/**
* @slot header
* @slot test
* @slot footer
*/
export default class SampleThemeLayout extends LightningElement {}
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>56.0</apiVersion>
<isExposed>true</isExposed>
<masterLabel>Sample Theme Layout</masterLabel>
<description>Sample theme layout</description>
<targets>
<target>lightningCommunity__Theme_Layout</target>
</targets>
</LightningComponentBundle>
2. テーマレイアウトを利用できるように設定します
3. テーマレイアウトをページに設定します。
