前回はコンポーネントに画像、テキストを固定で作成してページに貼り付けましたが、今回は独自のテンプレートを追加して、そのデータを利用してコンポーネントのレンダリングをしたいと思います。

新しいコンポーネントの作成

今回はコンポーネントとして画像、テキストを配置している簡単なものを作成しました。

このレイアウトに対して、画像とテキストを割り当てていきます。

テンプレートを作成する

今回のコンポーネントで利用する専用のテンプレートを作成していきます。Pages を開いて、左側のメニューにある Teampletes をクリックしてください。

Create template をクリックするとコンテンツエディターに移動をします。今回は Project の下の Tailwind にはすでにデフォルトのテンプレートがあるため、区別するために Components というフォルダを作成して、Sample というテンプレートを作成します。

この作成したテンプレートを利用して、Home の中の Data フォルダに対して、サンプルのアイテムを作成します。

これで準備が完了となります。

テンプレートを FEaaS に登録する

今回作成をしたテンプレートの構造を Sitecore Components で利用できるようにするために、サイトの Settings の中にある FEaaS compnent data source tempates で選択をしてください。FEaaS は FrontEnd as a Service の略で、Sitecore Component と連携するための仕組みの名称となります。

この設定を実行すると、Components のデータソースに自動的に候補として表示されるようになります。

項目を選択すると、すでに作成したサンプルのデータが JSON のサンプルとして追加されていることがわかります。

データソースを紐づける

紐づける準備が完了したところで、もう一度 Components の画面で対象となるコンポーネントを開きます。作業的なところとしては、画像には画像の値を、テキストにはテキストをマップさせるような形です。今回は以下のように作業をしました。

適当に作っているので画像のサイズなどはおかしい形です。少しだけ補正をしてみました。

これに以下のような手順を進めていきます。

• Version を追加

• デバイスに合わせたバージョンの調整

これでコンポーネントの準備が完了です。

Pages に移動をして、コンポーネントを配置、表示をするアイテムをアサインします。

コンポーネントを配置して、デバイスを切り替えると有効になっていることを確認できます。

アイテムのデータを更新

コンポーネントが正しくデータソースを参照しているか確認をするために、アイテムのデータをまずは更新します。

Pages で改めてコンポーネントの確認をします。

画像と文字が変更されていることを確認できました。

まとめ

コンポーネントの画像、テキストだけで今回は検証をしました。もちろん要素を増やすのであればテンプレートで設定することで項目を追加することが出来ます。アイテムに対して、ワークフロー、タイマーをかけて公開などをすることで、コンポーネントの中身を公開、バージョン管理することが可能となります。

前回はノーコードでコンポーネントの作成、そして今回はノーコードでテンプレートと連携することが出来ました。Headless SXA でコンポーネントを作成しなくても、コンポーネントを作ることが出来るのは ROI という点では便利な機能です。