Page Designer と PWA Kit の統合

Page Designer を使用すると、Progressive Web App (PWA) Kitサイト用に再利用可能なページタイプとコンポーネントタイプを作成できます。Business Manager のコード不要のビジュアルエディターを使用して、サイトの Page Designer ページをデザイン、スケジュール、公開します。PWA Kit サイトと統合すると、Page Designer は React コンポーネントを使用して動的でレスポンシブなページをレンダリングできます。

このガイドでは、サイトで Page Designer ページを表示できるように PWA Kit を構成する方法について説明します。

このチュートリアルのコマンドを実行する前に、プレースホルダーを実際の値に置き換えてください。プレースホルダーは $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を開き、'' に移動するルートを追加します。

    $PAGE_IDは、Business Manager でPage Designerページに定義したページ ID に置き換えます。

  1. Webサーバーをローカルで起動するには、次のコマンドを実行します。

    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 コンポーネントのリストです。React コンポーネントは、PWA Kit の Page Designer GitHub リポジトリにあります。

React コンポーネントISML コンポーネント
カルーセルcommerce_layouts .carousel
mobileGrid1r1ccommerce_layouts .mobileGrid1r1c
mobileGrid2r1ccommerce_layouts .mobileGrid2r1c
mobileGrid2r2ccommerce_layouts .mobileGrid2r2c
mobileGrid2r3ccommerce_layouts .mobileGrid2r3c
mobileGrid3r1ccommerce_layouts .mobileGrid3r1c
mobileGrid3r2ccommerce_layouts .mobileGrid3r2c
image-tilecommerce_assets .photoTile
テキスト付き画像commerce_assets .imageAndText