Sitecore JSSでページ間で共通のヘッダーを作成する

#sitecore #jss #react

一般的なSitecoreの開発では、ヘッダーのような全ページで共通のデータソースを使うレンダリングを必ずと言っていいほど作成します。

JSSでも共有コンポーネントを使用することで、同様の機能を実現できます。

Headerコンポーネントを作成する

まずはHeaderコンポーネントを作成しましょう。コンポーネントの作成には以下のコマンドを使用します。

> jss scaffold Header

作成された/sitecore/definitions/components/Header.sitecore.jsで、Headerコンポーネントのデータソーステンプレートにフィールドを追加します。

// eslint-disable-next-line no-unused-vars
import { CommonFieldTypes, SitecoreIcon, Manifest } from '@sitecore-jss/sitecore-jss-manifest';

/**
 * Adds the Header component to the disconnected manifest.
 * This function is invoked by convention (*.sitecore.js) when 'jss manifest' is run.
 * @param {Manifest} manifest Manifest instance to add components to
 */
export default function(manifest) {
  manifest.addComponent({
    name: 'Header',
    icon: SitecoreIcon.DocumentTag,
    fields: [
      // headingフィールドを削除し、headerContentフィールドを追加
      { name: 'headerContent', type: CommonFieldTypes.RichText }
    ],
    /*
    If the component implementation uses <Placeholder> or withPlaceholder to expose a placeholder,
    register it here, or components added to that placeholder will not be returned by Sitecore:
    placeholders: ['exposed-placeholder-name']
    */
  });
}

次に/src/components/Header/index.jsを編集し、先程定義したフィールドを表示するよう修正します。

import React from 'react';
import { RichText } from '@sitecore-jss/sitecore-jss-react';

const Header = (props) => (
  <div>
    {/* 定義したフィールドを表示 */}
    <RichText field={props.fields.headerContent} />
  </div>
);

export default Header;

共有コンポーネントを定義する

ページ間で共有するコンポーネントは、/data/component-contentフォルダに定義します。

このフォルダは以下のようなパス構成にする必要があります。

data/
- component-content/
  - <コンポーネント名>/
    - <アイテム名>/
      - <言語名>.yml

今回はヘッダーを作成するので、/data/component-content/Header/shared-header/en.yml（アイテム名がshared-headerのHeaderコンポーネント）に定義します。

en.ymlファイルの中身は以下のとおりです。

# このコンポーネントを参照するためのプロジェクトで一意なIDを指定
id: header-banner
# コンポーネントのアイテム名
name: shared-header
# コンポーネントのアイテムの表示名
displayName: Shared Header
# コンポーネントの種類
componentName: Header
# コンポーネントのフィールド一覧
fields:
  headerContent: |
    <header>
      <p> Sample Webiste</p>
    </header>

この時点でjss deploy items -cコマンドを実行しSitecoreへデプロイすると、<jssroot>/Components/Header/shared-headerにアイテムが作成されます。

共有コンポーネントをページに挿入する。

ページの定義（/data/routes）に先程定義した共有コンポーネントを挿入します。挿入時には先程作成した共有コンポーネントのIDを指定します。

例として、デフォルトで用意されている/data/routes/en.ymlに挿入してみます。

 id: home-page

 # Route-level fields are appropriate for page level data like <title> contents
 # Define route level fields in /sitecore/definitions/routes.sitecore
 fields:
   pageTitle: Welcome to Sitecore JSS
 # Define the page layout starting at the root placeholder - in this case, 'jss-main'
 # root placeholder names are defined in the package.json config section (required for Sitecore deployment)
 placeholders:
   jss-main:
+    - id: shared-header # IDで共有コンポーネントを指定
     - componentName: ContentBlock
       fields:
         heading: Welcome to Sitecore JSS

  jss-main:
 ###### (省略) #######

jss deploy items -cを実行して共有コンポーネントを指定したページのプレゼンテーション詳細を確認してみてください。

最終レイアウトにHeaderコンポーネントが入っており、そのデータソースが<jssroot>/Components/Header/shared-headerになっているはずです。（共有でない場合は各ページアイテム下のPage Componentsフォルダ内になります）