How to implement Page designer in PWA

[Mohansharu]

Hi all,

I'm not able to implement page designer in PWA, If anyone has any idea about it or any document/article regarding this please do share it. I have followed some articles and even the git repo but have not been able to find the solution.

Here are some links that I have referred
https://github.com/SalesforceCommerceCloud/pwa-kit/blob/develop/packages/template-retail-react-app/app/page-designer/README.md
https://github.com/SalesforceCommerceCloud/composable-storefront-pocs#page-designer
https://blogs.xcentium.com/blogs/implementing-sfcc-page-designer-with-the-pwa-kit

please do the needful, Thank you in advance

[joeluong-sfcc]

Hi @Mohansharu could you elaborate on which part isn't working for you?

[Mohansharu]

Hi @joeluong-sfcc I'm not sure how to implement page designer in PWA, If there is any document or steps to learn pls do share

[joeluong-sfcc]

Unfortunately page designer isn't as well documented as we'd like, and we have items on our roadmap in order to improve documentation around page designer. What did you see when you tried to follow the steps in the README? https://github.com/SalesforceCommerceCloud/pwa-kit/blob/develop/packages/template-retail-react-app/app/page-designer/README.md

[Mohansharu]

@joeluong-sfcc, when I tried with what and all the steps they have mentioned here https://github.com/SalesforceCommerceCloud/pwa-kit/blob/develop/packages/template-retail-react-app/app/page-designer/README.md

I faced some error I have attached it as a text file please have a look, and help us to resolve this error

error.txt

[joeluong-sfcc]

I believe you're on an older version where @salesforce/retail-react-app/app/components/shared/ui doesn't exist yet. What version are you on? I just tried following the steps on v3.1.1 (v2.0.0 of retail-react-app) and it worked for me, at least off the monorepo:

1. git clone git@github.com:SalesforceCommerceCloud/pwa-kit.git
2. cd pwa-kit
3. git checkout v3.1.1
4. npm ci
5. cd packages/template-retail-react-app
6. Follow instructions in: https://github.com/SalesforceCommerceCloud/pwa-kit/blob/develop/packages/template-retail-react-app/app/page-designer/README.md
7. npm run start
8. visit http://localhost:3000/page-viewer/get-ready-for-summer after app is done building

I think this should work if you follow similar steps for a generated project as well.

[Mohansharu]

Hi @joeluong-sfcc, after following the steps it is working fine but when I created a new page designer in my Business manager if I try to access it through the page id in url it shows like below

the same page if I try to access using SFRA it's working fine

please guide us

[Mohansharu]

Hi @joeluong-sfcc,

To establish a connection with our Sandbox, we are updating credentials in only default.js which is under config folder.

Is there any other files to modify to connect totally to our sandbox?

[joeluong-sfcc]

@Mohansharu default.js should be the only spot you need to be able to connect to your sandbox. As for the errors, unfortunately the page designer support for PWA Kit is limited, with only a handful of components that you can use. In page-viewer/index.jsx you can see which components are supported:

const PAGEDESIGNER_TO_COMPONENT = {
    'commerce_assets.photoTile': ImageTile,
    'commerce_assets.imageAndText': ImageWithText,
    'commerce_layouts.carousel': Carousel,
    'commerce_layouts.mobileGrid1r1c': MobileGrid1r1c,
    'commerce_layouts.mobileGrid2r1c': MobileGrid2r1c,
    'commerce_layouts.mobileGrid2r2c': MobileGrid2r2c,
    'commerce_layouts.mobileGrid2r3c': MobileGrid2r3c,
    'commerce_layouts.mobileGrid3r1c': MobileGrid3r1c,
    'commerce_layouts.mobileGrid3r2c': MobileGrid3r2c
}

If you try to use a component that isn't supported like commerce_assets.productTile, you'll see those type of errors. The demo pages that we have for page-designer in PWA Kit with the demo default.js (such as get-ready-for-summer) are made up of only these basic components.

[Mohansharu]

@joeluong-sfcc ok got it, One more concern can we extend these components or is it possible to create our new components? If yes how can we achieve this?

[joeluong-sfcc]

@Mohansharu You should be able to create new components, however, this process isn't formally documented. You can look at the components already implemented to use as reference for the components you'd like to create: https://github.com/SalesforceCommerceCloud/pwa-kit/blob/develop/packages/template-retail-react-app/app/page-designer

[dvalkov1]

I have implemented the Page Designer successfully, but when I try to use Targeting functionalities using customer groups (Page settings -> Targeting -> Customer groups), it returns a 500 error.

{ "detail": "No visible page with ID 'test' was found in site 'XXXX'.", "title": "Page Not Found", "type": "https://api.commercecloud.salesforce.com/documentation/error/v1/errors/page-not-found", "isError": true, "message": "No visible page with ID 'test' was found in site 'XXXX'." }

Any idea how to targeting the PD pages with customer groups?