How to implement Page designer in PWA about pwa-kit HOT 10 CLOSED

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

from pwa-kit.

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

from pwa-kit.

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

from pwa-kit.

@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

from pwa-kit.

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 [email protected]: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.

from pwa-kit.

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

from pwa-kit.

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?

from pwa-kit.

@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.

from pwa-kit.

@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?

from pwa-kit.

@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

from pwa-kit.