0

I am trying to create a new route using Sitecore 9.2 JSS. Below steps I have followed:

  1. I have created a new Route i.e. Product.
  2. Then I have created two new placeholders jss-header and jss-footer. (jss-main already exists) in placeholders.sitecore.js file
export default function addPlaceholdersToManifest(manifest) {
  manifest.addPlaceholder(
    { name: 'jss-header', displayName: 'Header' },
    { name: 'jss-main', displayName: 'Main' },
    { name: 'jss-footer', displayName: 'Footer' }
  );
}

  1. In Layout.js, I have added placeholders
 <div className="container">
      <Placeholder name="jss-header" rendering={route} />
      <Placeholder name="jss-main" rendering={route} />
      <Placeholder name="jss-footer" rendering={route} />
    </div>
  1. I have created new component of Header and Footer
  2. In en.yml added data
id: product-page

# Route-level fields are appropriate for page level data like <title> contents
# Define route level fields in /sitecore/definitions/routes.sitecore
fields:
  title: 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-header:
    - componentName: Header
      fields:
        heading: This is a header
  jss-main:
    - componentName: ContentBlock
      fields:
        heading: Welcome to Sitecore JSS
  jss-footer:
    - componentName: Footer
      fields:
        heading: This is a footer

Now when I am deploying the app using this command jss deploy app --includeContent --includeDictionary, I can see the page but the issue is that I can not see placeholder of jss-header and jss-footer, I can see jss-main component in experience editor.

  • Do you see the new placeholders in Sitecore-import.json.? this file will be available under sitecore\package folder in your react app root. – Gobinath Saminathan Feb 6 at 14:08
2

Make sure your top level placeholders have been added to rootPlaceholders setting in package.json file:

{
  ...
  "config": {
    "appName": "myApp",
    "rootPlaceholders": [
      "jss-main",
      "jss-header",
      "jss-footer"
    ]
  },
  ...
}

Unless the root level placeholders are set, the placeholders and their components do not render in Experience Editor or normal mode.

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.