將 Page Designer 與 PWA Kit 集成

1// app/pages/page-viewer/index.jsx
2
3import React from 'react'
4import {useParams} from 'react-router-dom'
5import {Box} from '@salesforce/retail-react-app/app/components/shared/ui'
6import {usePage, usePages} from '@salesforce/commerce-sdk-react'
7import {Page} from '@salesforce/commerce-sdk-react/components'
8// Map Page Designer components to your React components.
9import {ImageTile, ImageWithText} from '../../page-designer/assets'
10import {
11    Carousel,
12    MobileGrid1r1c,
13    MobileGrid2r1c,
14    MobileGrid2r2c,
15    MobileGrid2r3c,
16    MobileGrid3r1c,
17    MobileGrid3r2c
18} from '../../page-designer/layouts'
19
20import {HTTPError, HTTPNotFound} from '@salesforce/pwa-kit-react-sdk/ssr/universal/errors'
21
22const PAGEDESIGNER_TO_COMPONENT = {
23    'commerce_assets.photoTile': ImageTile,
24    'commerce_assets.imageAndText': ImageWithText,
25    'commerce_layouts.carousel': Carousel,
26    'commerce_layouts.mobileGrid1r1c': MobileGrid1r1c,
27    'commerce_layouts.mobileGrid2r1c': MobileGrid2r1c,
28    'commerce_layouts.mobileGrid2r2c': MobileGrid2r2c,
29    'commerce_layouts.mobileGrid2r3c': MobileGrid2r3c,
30    'commerce_layouts.mobileGrid3r1c': MobileGrid3r1c,
31    'commerce_layouts.mobileGrid3r2c': MobileGrid3r2c
32
33// Add your custom Page Designer React component implementation here.
34
35}
36
37
38
39const PageViewer = () => {
40    const {pageId} = useParams()
41    const {data: page, error} = usePage({parameters: {pageId}})
42
43    if (error) {
44        let ErrorClass = error.response?.status === 404 ? HTTPNotFound : HTTPError
45        throw new ErrorClass(error.response?.statusText)
46    }
47
48    return (
49        <Box layerStyle={'page'}>
50            <Page page={page} components={PAGEDESIGNER_TO_COMPONENT} />
51        </Box>
52    )
53}
54
55PageViewer.displayName = 'PageViewer'
56
57export default PageViewer

1// app/routes.jsx
2
3// Create a loadable page for `page-viewer`.
4const PageViewer = loadable(() => import('./pages/page-viewer'), {fallback})
5
6
7// Add a route.
8{
9    path: '/page-viewer/$PAGE_ID',
10    component: PageViewer
11}