Webサイト・アプリケーションの要素の理解

Café SupremoのマーケティングWebサイトには、ブランドロゴ、メニューバー、検索バーなどの要素があります。


site_elements.pngの説明が続きます
図site_elements.pngの説明

Webサイト・ページのブランド・ロゴ

Café SupremoマーケティングWebサイト・アプリケーションでは、ブランド・ロゴはページの左上隅と右下隅に表示されます。

Café SupremoマーケティングWebサイト・アプリケーションのブランド・ロゴにイメージが使用されます。Webサイトの左上隅にあるロゴには、最新バージョンのイメージCafe - Soupremote - Header - Logoが使用されています。Webサイトの右下隅にあるロゴには、最新バージョンのイメージCafe - Soupremote - First - Logoが使用されています。これらのイメージをブランド・ロゴに置き換えることができます。

イメージのAPI IDは、Oracle Visual Builderのイメージ・コンポーネントを使用してイメージを表面化するために使用されます。

API IDを取得するには:
  1. Oracle Content Management Webインタフェースで、「アセット」ページに移動し、CafeSupremoリポジトリを選択します。
  2. ロゴ・イメージのいずれかを選択し、そのプロパティを開きます。
  3. 「プロパティ」ペインでは、「API」タブでID値を使用できます。

Café Supremo Marketing Webサイト・アプリケーションでのナビゲーション

Café SupremoマーケティングWebサイト・アプリケーションでは、ナビゲーションはWebサイト・ページの右上隅に表示されるメニュー・バーを使用して実現されます。

メニュー・バーには、HOME、MENU、BLOGなどのメニュー・オプションがあります。

Search Bar

Café SupremoマーケティングWebサイト・アプリケーションの右上隅には、カスタマがキーワードを使用してこのWebサイト内のブログを検索できる検索ツールバーがあります。

ユーザーは検索バーにテキストを入力し、[Enter]キーを押して検索する必要があります。検索結果には、キーワードに一致するブログが表示されます。ユーザーが検索結果のいずれかをクリックすると、その特定のブログ記事が同じウィンドウで開きます。

Oracle Visual Builderで、検索開始ページに移動します。これは、ユーザーが検索バーを使用して検索を実行したときに、検索結果(ブログ・アイテム)のリストを表示するために使用されるページです。このページでは、コンポーネント交換からのコンテンツ・リスト・コンポーネントをこの目的で使用します。検索結果を表示するには、このコンポーネントの「プロパティ」ペインで次のキー設定を指定します。

「一般」タブ:

  • ID:アセットの一意のAPI ID。
  • コンテンツ・サーバー-デフォルト値
  • Channel Token -デフォルト値
  • コンテンツ・タイプ-ブログ
  • レイアウト-ブログ・デフォルト
  • リスト・ビュー- threeColumns
  • 最大アイテム- 10
  • アイテムで開始- 1
  • Search Observable -このプロパティは、コンテンツ検索コンポーネントと通信し、コンテンツ・リスト内で検索機能を実行するために、アプリケーション・レベルの変数に自動的に設定されます。


search-start_page.pngの説明が続きます
図search-start_page.pngの説明

このコンポーネントでは、ブログ・コンテンツ・タイプが使用されます。表示する項目の数は10個に制限されています。イベント・ハンドラは、コンテンツ・リスト・アイテムに関連付けられたアクションおよびイベントを定義して、ユーザーがブログ・アイテムをクリックしたときの動作を指定するように設定されます。コンポーネントのプロパティの「イベント」タブで、イベント設定を構成して、指定したイベントが発生したときの動作、つまりページ上でアイテムがクリックされたときの動作を指定するイベントおよびアクション・チェーンを定義します。イベント・リスナーは、イベントをリスニングし、「アクション」タブで定義されたアクション・チェーンを開始するために、「イベント・リスナー」タブでこのページに対して定義されます。


search-start_actions.pngの説明が続きます
図search-start_actions.pngの説明

検索開始ページの「アクション」タブで、イベントに関連付けられているアクションがアクション・チェーン(アクションの順序を決定する)とともに定義されます。アクションはアクション・チェーンの一部です。「アクション」タブでアクションをクリックすると、その構成を表示できます。「図」セクションで、「ナビゲート」検索-詳細(ナビゲーション・アクション)をクリックすると、プロパティ・ペインの「ターゲット」フィールドが検索-詳細に設定され、ユーザーが検索結果のリストからブログ・アイテムをクリックしたときに、アプリケーション内の対応するブログ記事ページ(詳細)に移動します。


search_detail_setting.pngの説明が続きます
図search_detail_setting.pngの説明

検索/詳細ページには、コンテンツ・アイテムを動的に表示するように構成されたコンテンツ・プレースホルダ・コンポーネントがあります。したがって、ユーザーが検索結果からブログ・アイテムをクリックすると、検索/詳細ページのコンテンツ・プレースホルダ・コンポーネントによって、関連付けられたコンテンツ・アイテムの詳細が自動的にロードされます。


search-detail_page.pngの説明が続きます
図search-detail_page.pngの説明