Integrate Page Designer with PWA Kit

With Page Designer, you can create reusable page types and component types for your Progressive Web App (PWA) Kit site. Use the no-code visual editor in Business Manager to design, schedule, and publish Page Designer pages for your site. When integrated with a PWA Kit site, Page Designer enables the rendering of dynamic, responsive pages using React components.

This guide explains how to configure PWA Kit so that your site can display Page Designer pages.

Before running the commands in this tutorial, replace any placeholders with actual values. Placeholders are formatted like this: $PLACEHOLDER.

To integrate Page Designer with a PWA Kit Site:

• Build your site with either of these implementations:

  • Composable Storefront (PWA Kit version 2.7.0 or later) for your whole site with usage of the Retail React app template
  • A phased headless rollout (Storefront Reference Architecture - SFRA and PWA Kit version 2.7.0 or later with usage of the Retail React app template)

• Create or update a SLAS public or private client. Follow the steps in Create a SLAS Client or use the registerClient API endpoint.

  • In the Scopes field, include this scope: sfcc.shopper-experience.

    A SLAS private client offers several advantages over a public client. See Use a SLAS Private Client.

• Get a SLAS Admin Token.

• Create your Page Designer pages in Business Manager. See Create a Page Using the Page Designer Visual Editor.

• Because PWA Kit is a decoupled web app, you need to create both the Page Designer Internet Store Markup Language (ISML) components and their corresponding PWA Kit React components.
• If the ISML components you want to use on your site don’t exist in Page Designer, create them in Business Manager. See How to Implement Page Designers Component.
• There are some PWA Kit React components that match their ISML counterparts. See Matching React and ISML Components. If there isn’t a matching React component, you can build it.
• The preview feature in Business Manager renders Storefront Reference Architecture (SFRA) ISML components. So the actual appearance of your React site can be different from the preview. To get a more accurate preview of your PWA Kit site, use Storefront Preview.

1. In your PWA Kit project, create a file called app/pages/page-viewer/index.jsx, and add this code.

   The purpose of the file is to set up a page viewer to render your Page Designer pages using your components. This code includes sample components for demonstration purposes. Replace the components in your code with the ones that apply to your site. This example integration uses @salesforce/commerce-sdk-react.

2. In your PWA Kit project, open app/routes.jsx and add a route to navigate to <PageViewer>.

   Replace $PAGE_ID with a page ID that you defined for your Page Designer pages in Business Manager.

3. To start your web server locally, run:

   npm start

4. To see Page Designer pages rendered in React.js, go to

   http://localhost:3000/page-viewer/$PAGE_ID and use the page ID that you identified in step 2.

   For example, if your page ID is 123, go to: http://localhost:3000/page-viewer/123.

This is a list of React components that have matching ISML counterparts. You can find the React components in the Page Designer GitHub Repo for PWA Kit.

• GitHub: Page Designer Repo for PWA Kit
• Salesforce Help: Page Designer Pages