動的ルートと編集可能なコンポーネント

この章では、編集可能なコンポーネントをサポートする2つの動的アドベンチャー詳細ルートを有効にします。Bali Surf Camp​と​Beervana in Portland

動的ルートと編集可能なコンポーネント

Adventure Detail SPAルートは/adventure:pathと定義されます。ここでpathは、詳細を表示するWKNDアドベンチャー(コンテンツフラグメント)へのパスです。

SPA URLのAEMページへのマッピング

前の2つの章では、編集可能なコンポーネントのコンテンツをSPAホームビューからAEMの対応するリモートSPAルートページ(/content/wknd-app/us/en/)にマッピングしました。

SPAの動的ルートの編集可能なコンポーネントのマッピングの定義は類似していますが、ルートのインスタンスとAEMページの間で1対1のマッピングスキームを作成する必要があります。

このチュートリアルでは、パスの最後のセグメントであるWKND Adventure Content Fragmentの名前を使用し、/content/wknd-app/us/en/adventureの下のシンプルなパスにマッピングします。

リモートSPAルート AEMページパス
/content/wknd-app/us/en/home
/adventure:/content/dam/wknd/en/adventures/bali-surf-camp/bali-surf-camp /content/wknd-app/us/en/home/adventure/bali-surf-camp
/adventure:/content/dam/wknd/en/adventures/beervana-portland/beervana-portland /content/wknd-app/us/en/home/adventure/beervana-in-portland

したがって、このマッピングに基づいて、次の場所に2つの新しいAEMページを作成する必要があります。

  • /content/wknd-app/us/en/home/adventure/bali-surf-camp
  • /content/wknd-app/us/en/home/adventure/beervana-in-portland

リモートSPAマッピング

リモートSPAからの要求のマッピングは、Bootstrapので行われたsetupProxy設定を使用して設定されます。

SPA Editorマッピング

AEM SPA EditorでSPAを開いたときのSPA要求のマッピングは、AEMの設定で行われたSling Mappings設定を使用して設定します。

AEMでのコンテンツページの作成

最初に、中間のadventureページセグメントを作成します。

  1. AEMオーサーにログインします。
  2. サイト/WKNDアプリ/ us / en / WKNDアプリホームページ​に移動します。
    • このAEMページはSPAのルートとしてマッピングされるので、他のSPAルート用のAEMページ構造の構築を開始します。
  3. 作成」をタップし、「ページ」を選択します。
  4. リモートSPAページ​テンプレートを選択し、次へ​をタップします。
  5. ページプロパティの入力
    • タイトル:冒険
    • 名前adventure
      • この値はAEMページのURLを定義するので、SPAのルートセグメントと一致する必要があります。
  6. 完了​をタップします。

次に、編集可能な領域を必要とするSPA URLのそれぞれに対応するAEMページを作成します。

  1. サイト管理の新しい​アドベンチャー​ページに移動します。
  2. 作成」をタップし、「ページ」を選択します。
  3. リモートSPAページ​テンプレートを選択し、次へ​をタップします。
  4. ページプロパティの入力
    • タイトル:バリサーフキャンプ
    • 名前bali-surf-camp
      • この値はAEMページのURLを定義するので、SPAのルートの最後のセグメントと一致する必要があります
  5. 完了​をタップします。
  6. 手順3~6を繰り返して、Portland Beervanaを次のように作成します。
    • タイトル:ベアヴァナインポートランド
    • 名前beervana-in-portland
      • この値はAEMページのURLを定義するので、SPAのルートの最後のセグメントと一致する必要があります

これらの2つのAEMページには、一致するSPAルート用にそれぞれオーサリングされたコンテンツが含まれます。 他のSPAルートでオーサリングが必要な場合は、新しいAEM PagesをSPAのURL(Remote SPAページのルートページ(/content/wknd-app/us/en/home)のAEMで作成する必要があります。

WKNDアプリの更新

最後の章で作成した<AEMResponsiveGrid...>コンポーネントを、AdventureDetail SPAコンポーネントに配置し、編集可能なコンテナを作成します。

AEMResponsiveGrid SPAコンポーネントの配置

<AEMResponsiveGrid...>AdventureDetailコンポーネントに配置すると、そのルートに編集可能なコンテナが作成されます。 これは、複数のルートがAdventureDetailコンポーネントを使用してレンダリングするため、<AEMResponsiveGrid...>'s pagePath属性を動的に調整する必要があるからです。 ルートのインスタンスが表示するアドベンチャーに基づいて、対応するAEMページを指すようにpagePathを派生させる必要があります。

  1. react-app/src/components/AdventureDetail.jsを開いて編集します

  2. 次の行をAdventureDetail(..)'s 2番目のreturn(..)ステートメントの前に追加します。このステートメントは、コンテンツフラグメントパスからアドベンチャー名を派生させます。

    ...
    // Get the last segment of the Adventure Content Fragment path to used to generate the pagePath for the AEMResponsiveGrid
    const adventureName = adventureData._path.split('/').pop();
    ...
    
  3. AEMResponsiveGridコンポーネントを読み込み、<h2>Itinerary</h2>コンポーネントの上に配置します。

  4. <AEMResponsiveGrid...>コンポーネントに次の属性を設定します

    • pagePath = '/content/wknd-app/us/en/home/adventure/${adventureName}'
    • itemPath = 'root/responsivegrid'

    これは、AEMResponsiveGridコンポーネントに対し、AEMリソースからコンテンツを取得するように指示します。

    • /content/wknd-app/us/en/home/adventure/${adventureName}/jcr:content/root/responsivegrid

AdventureDetail.jsを次の行で更新します。

...
import AEMResponsiveGrid from '../components/aem/AEMResponsiveGrid';
...

function AdventureDetail(props) {
    ...
    // Get the last segment of the Adventure Content Fragment path to used to generate the pagePath for the AEMResponsiveGrid
    const adventureName = adventureData._path.split('/').pop();

    return(
        ...
        <AEMResponsiveGrid 
            pagePath={`/content/wknd-app/us/en/home/adventure/${adventureName}`}
            itemPath="root/responsivegrid"/>
            
        <h2>Itinerary</h2>
        ...
    )
}

AdventureDetail.jsファイルは次のようになります。

AdventureDetail.js

AEMでのコンテナの作成

<AEMResponsiveGrid...>を配置し、レンダリングされるアドベンチャーに基づいて動的に設定されたpagePathを使用して、コンテンツをオーサリングします。

  1. AEMオーサーにログインします。

  2. サイト/WKND App > us > en​に移動します。

  3. ____ WKNDアプリのホ ームページページの 編集

    • SPAの​Bali Surf Camp​ルートに移動して編集します。
  4. 右上のモードセレクターから「プレビュー」を選択します。

  5. SPAの​Bali Surf Camp​カードをタップして、ルートに移動します。

  6. mode-selectorから「編集」を選択します。

  7. レイアウトコンテナ​編集可能な領域を​旅程​のすぐ上に見つけます。

  8. ページエディターのサイドバー​を開き、コンポーネントビュー​を選択します。

  9. 有効なコンポーネントの一部を​レイアウトコンテナ​にドラッグします。

    • 画像
    • テキスト
    • タイトル

    プロモーションマーケティング資料を作成します。 次のようになります。

    バリアドベンチャー詳細オーサリング

  10. ____ AEMページエディターでの変更のプレビュー

  11. http://localhost:3000上でローカルで実行されているWKNDアプリを更新し、Bali Surf Camp​ルートに移動して、作成した変更を確認します。

    リモートSPAバリ

マッピングされたAEM Pageを持たないアドベンチャー詳細ルートに移動する場合、そのルートインスタンスではオーサリング機能はありません。 これらのページでオーサリングを有効にするには、Adventure​ページの下に、一致する名前のAEMページを作成します。

おめでとうございます。

おめでとうございます。SPAで動的なルートにオーサリング機能が追加されました。

  • AEM React編集可能コンポーネントのResponsiveGridコンポーネントを動的ルートに追加しました。
  • SPA(Bali Surf CampとBeervana in Portland)での2つの特定のルートのオーサリングをサポートするAEMページを作成しました。
  • ダイナミックバリサーフキャンプルートのコンテンツを作成しました!

これで、AEM SPA Editorを使用して特定の編集可能領域をRemote SPAに追加する方法の最初の手順を学習しました。

メモ

気をつけろ! このチュートリアルは、Adobeのベストプラクティスと、SPA EditorソリューションをAEM as aCloud Serviceおよび実稼動環境にデプロイする方法に関する推奨事項について説明するように拡張されます。

このページ