-
Notifications
You must be signed in to change notification settings - Fork 72
/
Layout.tsx
79 lines (66 loc) · 2.93 KB
/
Layout.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
import Head from 'next/head';
import { useEffect } from 'react';
import { getPublicUrl } from 'lib/util';
import {
Placeholder,
useSitecoreContext,
LayoutServicePageState,
} from '@sitecore-jss/sitecore-jss-nextjs';
import { SitecoreContextValue } from 'lib/component-props'; // DEMO TEAM CUSTOMIZATION - Different type name
import { logViewEvent } from './services/BoxeverService'; // DEMO TEAM CUSTOMIZATION - CDP integration
// Prefix public assets with a public URL to enable compatibility with Sitecore Experience Editor.
// If you're not supporting the Experience Editor, you can remove this.
const publicUrl = getPublicUrl();
// DEMO TEAM CUSTOMIZATION - Move navigation to a component
type LayoutProps = {
context: SitecoreContextValue; // DEMO TEAM CUSTOMIZATION - Different type name
};
const Layout = ({ context }: LayoutProps): JSX.Element => {
const { updateSitecoreContext } = useSitecoreContext({ updatable: true });
// Update Sitecore Context if layoutData has changed (i.e. on client-side route change).
// Note the context object type here matches the initial value in [[...path]].tsx.
useEffect(() => {
updateSitecoreContext && updateSitecoreContext(context);
// DEMO TEAM CUSTOMIZATION - Log page views in CDP
const { route } = context;
logViewEvent(route);
// END CUSTOMIZATION
}, [context, updateSitecoreContext]); // DEMO TEAM CUSTOMIZATION - Missing effect parameter to fix linting error
const { route } = context;
// DEMO TEAM CUSTOMIZATION - Add CSS classes when Experience Editor is active
const isExperienceEditorActiveCssClass =
context.pageState === LayoutServicePageState.Edit ||
context.pageState === LayoutServicePageState.Preview
? 'experience-editor-active'
: '';
// DEMO TEAM CUSTOMIZATION - Add Event start date and name to be used globally
const contextTitle = context['EventInfo'] as NodeJS.Dict<string | string>;
let pageTitle = contextTitle.titlePrefix;
if (route?.fields?.pageTitle?.value) {
pageTitle += ' - ' + route?.fields?.pageTitle?.value;
}
// END CUSTOMIZATION
return (
<>
<Head>
{/* // DEMO TEAM CUSTOMIZATION - Use Event name as the page title from context */}
<title>{pageTitle}</title>
<link rel="icon" href={`${publicUrl}/favicon.ico`} />
</Head>
{/* DEMO TEAM CUSTOMIZATION - Remove VisitorIdentification and Navigation */}
{/* DEMO TEAM CUSTOMIZATION - Add placeholders */}
{/* root placeholders for the app, which we add components to using route data */}
<header className={isExperienceEditorActiveCssClass}>
<Placeholder name="jss-header" rendering={route} />
</header>
<main className={isExperienceEditorActiveCssClass}>
<Placeholder name="jss-main" rendering={route} />
</main>
<footer>
<Placeholder name="jss-footer" rendering={route} />
</footer>
{/* END CUSTOMIZATION*/}
</>
);
};
export default Layout;