Sitecore JSSでレイアウトにプレースホルダを追加する

#sitecore #jss

以下の方法でプレースホルダを追加できます。

① /src/Layout.jsのLayoutコンポーネントにプレースホルダを追加する

 const Layout = ({ route }) => (
   <React.Fragment>
     ...(省略)...
+    <Placeholder name="my-placeholder" rendering={route} />
     ...(省略)...
   </React.Fragment>
 );

② /sitecore/definitions/placeholders.sitecore.jsに①のプレースホルダを追加する。

 export default function addPlaceholdersToManifest(manifest) {
   manifest.addPlaceholder(
+    { name: 'my-placeholder', displayName: 'My Placeholder' },  
     { name: 'jss-main', displayName: 'Main' },
   );
 }

③ /package.jsonのrootPlaceholdersに①のプレースホルダを追加する。

   "config": {
     "appName": "myapp",
     "rootPlaceholders": [
+      "my-placeholder",
       "jss-main"
     ],
     "sitecoreDistPath": "/dist/myapp",
     "sitecoreConfigPath": "/App_Config/Include/zzz",
     "graphQLEndpointPath": "/api/myapp",
     "language": "en"
   },