Webサイト・ページのレビュー
Café SupremoマーケティングWebサイト・アプリケーションには、HOME、MENUおよびBLOGの3つのページがあります。
HOMEページ
ホーム・ページには、広告やプロモーションなどのマーケティング・キャンペーンが表示されます。
Webサイトで使用可能なアイテムは、ホーム・ページの詳細およびリンクとともに通知されます。上部には、「詳細」ボタンがあるプロモーションがあり、このボタンをクリックすると、アイテムを説明するページが開きます。プロモーションの下には、ショップボタンを含むアドバタイズメントが3つあります。ホーム・ページの最後に最新のブログが表示され、クリックすると対応するブログ詳細ページが開きます。
図home_page.pngの説明
ホーム・ページを見て、コンポーネント交換のOracle Content ManagementコンポーネントがOracle Visual BuilderのCafe - Upremoアプリケーションでどのように使用されるかを理解しましょう。
ホーム・ページにコンテンツを表示するには、適切な設定のコンテンツ・リスト・コンポーネントを使用します。
たとえば、ページ上部で使用されるコンテンツ・リスト・コンポーネントの構成を確認します。
プロモーションを上部に表示するには、このコンポーネントの「プロパティ」ペインで次のキー設定を指定します。
- ID:アセットの一意のAPI ID。
- コンテンツ・サーバー-デフォルト値
- Channel Token -デフォルト値
- コンテンツ・タイプ-プロモーション
- レイアウト-販促-デフォルト
- 最大アイテム数- 1
- アイテムで開始- 1
プロモーション・コンテンツ・タイプは、このコンポーネントで使用されます。表示するアイテムの数は1つに制限されています。「詳細」ボタンは、対応する詳細ページを指すように構成されています。イベント・ハンドラは、対応するプロモーション詳細ページを開くために、この追加ボタンを構成するように設定されています。コンポーネントのプロパティの「イベント」タブで、イベント設定を構成して、指定したイベントが発生したときの動作(つまり、アイテムがページ上でクリックされたときの動作)を指定するイベントおよびアクション・チェーン(一連のアクション)を定義します。イベント・リスナーは、イベントをリスニングし、「アクション」タブで定義されたアクション・チェーンを開始するために、「イベント・リスナー」タブでこのページに対して定義されます。
「アクション」タブでは、コンテンツ・リスト・アイテムの「イベント」タブで定義されたイベントに関連付けられたアクションがアクション・チェーンとともに定義されます。アクションはアクション・チェーンの一部です。たとえば、「アクション」タブで、最初のコンテンツ・リストに定義されている最初のアクションをクリックすると、その構成を表示できます。「ダイアグラム」セクションで、「ナビゲート」プロモーション詳細(ナビゲーション・アクション)をクリックすると、プロパティ・ペインの「ターゲット」フィールドがプロモーション詳細に設定され、ユーザーがプロモーションの「詳細」ボタンをクリックしたときに詳細ページに移動することがわかります。
プロモーション詳細ページには、コンテンツ・アイテムを動的に表示するように構成されたコンテンツ・プレースホルダ・コンポーネントがあります。そのため、ユーザーが「詳細」ボタンをクリックすると、プロモーション詳細ページのコンテンツ・プレースホルダ・コンポーネントによって、関連付けられたコンテンツ・アイテムの詳細が自動的にロードされます。
同様に、ユーザーがホーム・ページの最後に表示されたブログをクリックしたときに、対応するブログ記事を表示するために使用されるブログ詳細ページがあります。
これらのOracle Content Managementコンポーネントは、コンポーネント交換からWebサイト・アプリケーション・ページにドラッグ・アンド・ドロップし、必要に応じて適切な設定で構成できます。
たとえば、コンテンツ・アイテムをホーム・ページに追加する方法については、このソリューションのプレイブックの「カスタマイズ」の項を参照してください。
同様に、プロモーションの下に広告とブログを表示するために、さらに2つのコンテンツ・リスト・コンポーネントが使用されます。
これらのコンポーネントは、設定に基づいて、以前にOracle Content Managementで作成したリポジトリからコンテンツを動的にフェッチし、そのコンテンツをホーム・ページに表示します。
MENUページ
MENUページには、カタログ内のすべてのメニュー項目がリストされます。
このページには、COFFEE、TEAおよびTREATSの3つのタブが表示されます。これらの各タブには、そのカテゴリで使用可能な様々な種類のアイテムが表示されます。たとえば、COFFEEタブの下には、CLASSIC ESPRESSO、SUPREMO CAPPUCCINO、COLD PRESS COFFEE、BLACK SUPREMOなどの種類がそれぞれの種類に関する情報とともに表示されます。一部のアイテムにもビデオがあります。これらのタブの下には、各コンボで使用可能なアイテムを説明するイメージなどの詳細を含む様々なCafé Supremoコンボが表示されます。
メニュー・ページで使用される主要コンポーネントには、タブ・バーとコンテンツ・リストがあります。これらのコンポーネントは、メニュー・ページにコンテンツを表示するための適切な設定で使用されています。コンテンツ・リスト・コンポーネントは、コンポーネント交換のものです。
たとえば、ページ上部で使用されるコンテンツ・リスト・コンポーネントのいずれかの構成を確認します。
コンテンツ・アイテム(メニュー・アイテム)を表示するには、このコンポーネントの「プロパティ」ペインで次の主要な設定を指定します。
- ID:アセットの一意のAPI ID。
- コンテンツ・サーバー-デフォルト値
- Channel Token -デフォルト値
- コンテンツ・タイプ- MenuItem
- レイアウト- MenuItem -デフォルト
- 最大アイテム- 10
- アイテムで開始– 1
- 追加問合せ文字列- fields.menuitem_category eq "COFFEE"
MenuItemコンテンツ・タイプがこのコンポーネントで使用されます。表示する項目の数は10個に制限されています。最初のタブ(「COFFEE」タブ)では、「追加問合せ文字列」フィールドはfields.menuitem_category eq "COFFEE"に設定されます。同様に、他のタブにも設定されます。「追加問合せ文字列」フィールドは、表示するメニュー項目のリストをさらに絞り込むために、追加の問合せパラメータを指定するために使用します。
同様に、Café Supremoで使用可能なコンボ・メニュー項目を表示するために、適切な設定で別のコンテンツ・リスト・コンポーネントが使用されています。
コンポーネント交換からのコンポーネントを使用すると、Oracle Content Managementのリポジトリからコンテンツを動的にフェッチしてOracle Visual Builderのアプリケーションに表示することで、これらのページにリッチ・コンテンツを含めることができます。
BLOGページ
BLOGページは、様々なカテゴリのブログ記事を表示するために使用します。
図blog_page.pngの説明
このページには、HOW TO、DRINKS、PEOPLE、RECIPESなどの様々なブログ・カテゴリ用の4つのタブがあります。各タブには、その特定のカテゴリで使用可能なブログ・アイテムが、イメージ、ブログ・タイトル、公開日などの詳細とともに表示されます。ユーザーがブログ・アイテムをクリックすると、ブログ記事ページが同じウィンドウで開きます。
適切に設定されたタブ・バーやコンテンツ・リストなどのコンポーネントを使用して、ブログ・ページにコンテンツを表示します。コンテンツ・リスト・コンポーネントは、コンポーネント交換のものです。
タブ・バー・コンポーネントは、4つのカテゴリがブログ・ページにタブとして表示されるように適切に構成されています。4つのブログ・カテゴリをタブとして表示するには、このコンポーネントの「プロパティ」ペインで次のキー設定を指定します。
- ID:アセットの一意のAPI ID。
- 選択-選択されたアイテムのキーが指定されます。
- タブ- 4つのカテゴリのタブ情報が指定され、最初のタブがデフォルトのタブとして設定されます。
- エッジ-上側
これらのタブに必要な変数のプロパティは、「変数」タブで設定します。
コンテンツ・リスト・コンポーネントの構成を見てみましょう。ブログ・アイテムを表示するには、このコンポーネントの「プロパティ」ペインで次のキー設定を指定します。
- ID:アセットの一意のAPI ID。
- コンテンツ・サーバー-デフォルト値
- Channel Token -デフォルト値
- コンテンツ・タイプ-ブログ
- レイアウト-ブログ・デフォルト
- リスト・ビュー- threeColumns
- 最大アイテム- 10
- アイテムで開始– 1
- 追加問合せ文字列- fields.blog_category eq "HOW TO"
このコンポーネントでは、ブログ・コンテンツ・タイプが使用されます。表示する項目の数は10個に制限されています。最初のタブ(HOW TOタブ)では、「追加問合せ文字列」フィールドはfields.menuitem_category eq "HOW TO"に設定されます。同様に、他のタブにも設定されます。イベント・ハンドラは、コンテンツ・リスト・アイテムに関連付けられたアクションおよびイベントを定義して、ユーザーがブログ・アイテムをクリックしたときの動作を指定するように設定されます。コンポーネントのプロパティの「イベント」タブで、イベント設定を構成して、指定したイベントが発生したときの動作、つまりページ上でアイテムがクリックされたときの動作を指定するイベントおよびアクション・チェーンを定義します。イベント・リスナーは、イベントをリスニングし、「アクション」タブで定義されたアクション・チェーンを開始するために、「イベント・リスナー」タブでこのページに対して定義されます。
「アクション」タブでは、コンテンツ・リスト・アイテムの「イベント」タブで定義されたイベントに関連付けられたアクションがアクション・チェーンとともに定義されます。アクションはアクション・チェーン(一連のアクション)の一部です。たとえば、「アクション」タブで最初のアクションをクリックすると、その構成を表示できます。「図」セクションで、「ブログ詳細のナビゲート」(ナビゲーション・アクション)をクリックすると、プロパティ・ペインの「ターゲット」フィールドがブログ詳細に設定され、ユーザーがブログ・ページのブログ・アイテムをクリックしたときに、対応するブログ記事ページ(ブログ詳細)に移動します。
ブログ詳細ページには、コンテンツ・アイテムを動的に表示するように構成されたコンテンツ・プレースホルダ・コンポーネントがあります。したがって、ユーザーがブログ・アイテムをクリックすると、ブログ詳細ページのコンテンツ・プレースホルダ・コンポーネントによって、関連付けられたコンテンツ・アイテムの詳細が自動的にロードされます。
Webサイト・アプリケーションが公開されると、新しいブログ記事(ブログ・コンテンツ・アイテム)が追加されて(Oracle Content Management Webインタフェースで)公開されたときに、これらのブログ記事がWebサイト・アプリケーションのブログ・ページに動的にプルされ(Oracle Visual Builderで)、ユーザーがすぐに使用できるようになります。