#526106: Extend SXA Headless layout with 3 placeholders instead of one (

#1001)
Sitecore · Apr 29, 2022 · 0e57cc1 · 0e57cc1
1 parent 5ae2bcd
commit 0e57cc1
Showing 1 changed file with 14 additions and 4 deletions.
diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/Layout.tsx b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/Layout.tsx
@@ -40,11 +40,21 @@ const Layout = ({ layoutData }: LayoutProps): JSX.Element => {
 
       <Navigation />
       {/* root placeholder for the app, which we add components to using route data */}
-      <div className="container">
-        <div className="row">
-          {route && <Placeholder name="<%- helper.getAppPrefix(appPrefix, appName) %>jss-main" rendering={route} />}
+      <header>
+        <div id="header" className="container">
+          <div className="row">{route && <Placeholder name="headless-header" rendering={route} />}</div>
         </div>
-      </div>
+      </header>
+      <main>
+        <div id="content" className="container">
+          <div className="row">{route && <Placeholder name="headless-main" rendering={route} />}</div>
+        </div>
+      </main>
+      <footer>
+        <div id="footer" className="container">
+          <div className="row">{route && <Placeholder name="headless-footer" rendering={route} />}</div>
+        </div>
+      </footer>
     </>
   );
 };