Page Designer와 PWA Kit 통합

Page Designer를 사용하면PWA(Progressive Web App) Kit사이트에 대해 재사용 가능한 페이지 유형 및 구성요소 유형을 생성할 수 있습니다. Business Manager에서 코드 없는 시각적 편집기를 사용하여 사이트의 Page Designer 페이지를 디자인, 스케줄링, 게시할 수 있습니다. PWA Kit 사이트와 통합되면 Page Designer를 사용하면 React 구성 요소를 사용하여 동적 반응형 페이지를 렌더링할 수 있습니다.

이 가이드에서는 사이트에서 Page Designer 페이지를 표시할 수 있도록 PWA Kit를 구성하는 방법을 설명합니다.

이 튜토리얼의 명령을 실행하기 전에 Placeholder를 실제 값으로 바꿉니다. 자리 표시자는 $PLACEHOLDER와 같은 형식입니다.

Page Designer를 PWA Kit 사이트와 통합하려면:

  1. PWA Kit 프로젝트에서 라는app/pages/page-viewer/index.jsx파일을 만들고 이 코드를 추가합니다.

    이 파일의 목적은 구성요소를 사용하여 Page Designer 페이지를 렌더링하도록 페이지 뷰어를 설정하는 것입니다. 이 코드에는 데모를 위한 샘플 구성 요소가 포함되어 있습니다. 코드의 구성요소를 사이트에 적용되는 구성요소로 바꿉니다. 이 통합 예에서는@salesforce/commerce-sdk-react .

  1. PWA Kit 프로젝트에서 ''로 이동하는 경로를 열고app/routes.jsx추가합니다.

    Business Manager에서 Page Designer 페이지에 대해 정의한 페이지 ID로 바꿉니다$PAGE_ID .

  1. 웹 서버를 로컬로 시작하려면 다음을 실행합니다.

    npm start

  2. React.js에서 렌더링된 Page Designer 페이지를 보려면

    `http:localhost:3000/page-viewer/$ PAGE_ID '를 열고 2단계에서 식별한 페이지 ID를 사용합니다.

    예를 들어 페이지 ID가 123인 경우 로 이동합니다http://localhost:3000/page-viewer/123 .

이것은 일치하는 ISML 대응물이 있는 React 구성 요소 목록입니다. PWA Kit용 Page Designer GitHub 리포지토리에서 React 구성 요소를 찾을 수 있습니다.

React 컴포넌트ISML 컴포넌트
캐러셀commerce_layouts .carousel
mobileGrid1r1ccommerce_layouts .mobileGrid1r1c
mobileGrid2r1ccommerce_layouts .mobileGrid2r1c
mobileGrid2r2ccommerce_layouts .mobileGrid2r2c
mobileGrid2r3ccommerce_layouts .mobileGrid2r3c
mobileGrid3r1ccommerce_layouts .mobileGrid3r1c
mobileGrid3r2ccommerce_layouts .mobileGrid3r2c
이미지 타일commerce_assets .photoTile
텍스트commerce_assets가 있는 이미지 .imageAndText