コンポーネントを構成して、コンテンツアセットをアップロードする

Brandon は順調に作業を進めています。新しい Page Designer ページを作成し、コンポーネントを追加して、いつ、誰がそのコンポーネントを表示できるかを構成しました。ここで、さらに複雑な 2 つ目のコンポーネントを追加したいと考えています。また、B2C Commerce で表示するコンポーネントがどのように決定されるのかにも関心があります。さらに、新しい優れたコンテンツアセットをアップロードしようと思っています。

Brandon は、カルーセルを表示する 2 つ目の複雑なコンポーネントを追加したいと考えています。カルーセルコンポーネントを追加してから、カルーセルに表示する個々のタイルコンポーネントを追加する手順は、次のとおりです。

1. Business Manager で、Page Designer を開きます。
2. [Cloud Kicks Homepage (Cloud Kicks ホームページ)] ページを選択します。
3. ページ構造 アイコンをクリックします。
4. [Main Region (メイン領域)] の横にあるプラス記号をクリックします。
5. [Commerce Layouts (コマースレイアウト)] セクションの [Carousel (カルーセル)] を選択します。または、[Components (コンポーネント)] ペインからこのコンポーネントをドラッグアンドドロップします。右ペインに新しいコンポーネントが表示されます。
6. ストアフロントページに表示するカルーセルのタイトルを入力します。
7. スマートフォン、タブレット、デスクトップの各サイズで表示するインジケーター、コントロール、スライド数 (1、2、3) を選択します。
8. カルーセルのスライドを追加します。
   1. ページ構造 アイコンをクリックします。
   2. [Slides (スライド)] の横にあるプラス記号をクリックして、[Image With Text (テキスト付き画像)] コンポーネントを選択します。このコンポーネントで、複数の商品を紹介できます。買い物客がタイルのリンクをクリックすると、特定の商品やカテゴリページなど、あなたが表示したいページに移動します。
   3. このコンポーネントで次のことができます。
      • 画像を選択する。
      • テキストオーバーレイを追加する。
      • 商品、カテゴリ、検索用語、外部サイトへのリンクを作成する。
      • 画像の下に表示するテキストを入力する。
   4. このスライドの詳細を入力または選択したら、[Add to Page (ページに追加)] をクリックします。中央のペインに新しいコンポーネントが表示されます。
   5. ページ構造 アイコンをクリックします。
   6. [Slides (スライド)] の横にあるプラス記号をクリックして、さらに 2 つのスライドを追加します。デスクトップビューのスライド数を 3 に指定したためです。カルーセルコンポーネントには必ず構成したとおりのスライド数を追加して、ビューのスライドがそれぞれ異なるようにします。

ページの見た目に満足した Brandon は、[Publish (公開)] をクリックしてオンラインで公開します。

数種のページを作成後、Brandon は最初の頃に行った作業に物足りなさを感じるかもしれません。問題ありません。Page Designer で [Delete (削除)] をクリックすれば、ページを削除できます。

Brandon は後々予想外のものが表示されて慌てることがないように、Page Designer が表示するコンポーネントをどのように決めているのか理解する必要があります。Page Designer は [Page Structure (ページ構造)] リストの先頭から順番に各コンポーネントの表示ルールをチェックします。

Page Designer は、顧客グループ、日付、時刻のルールに一致する最初のコンポーネントを表示します (この場合は [Main Banner (メインバナー)])。すべてのコンポーネントを順にチェックし、一致するものが見つからなかった場合は、リストの一番下にあるコンポーネントを表示します (この場合は 3 つ目の [Image With Text (テキスト付き画像)] コンポーネント)。ページ構造リストで、ルールが適用されていないコンポーネントより下にあるコンポーネントは表示されません。それより上のコンポーネントが必ず一致するためです。

たとえば、Brandon は次の 5 つのコンポーネントからなるホームページを作成します。

• バナー1
• カルーセル
  • テキスト付き画像1
  • テキスト付き画像2
• バナー2

Brandon がカルーセルコンポーネントにルールを追加し忘れたため、2 つのテキスト付き画像コンポーネントとバナー2 コンポーネントは表示されません。

[Page Structure (ページ構造)] ウィンドウのコンポーネントをドラッグすれば、リストの順序を変更できます。

Brandon は、優れた商品を際立たせる素晴らしいコンテンツをページに追加したいと考えています。コンテンツをアップロードしてファイルを管理する手順は、次のとおりです。

1. Business Manager で、Page Designer を開きます。
2. Media Manager アイコンをクリックします。
3. フォルダーを展開してコンテンツを表示します。さまざまな種類のファイルをアップロードして、わかりやすい構造に整理できます。
4. フォルダー名の右側にある 3 つのドットをクリックします。実行できる操作は、次のとおりです。
   • 新規フォルダーを作成する。
   • フォルダー名を変更する。フォルダー名を変更すると、このフォルダー内のファイルと、ファイルを使用しているページのリンクが解除される点に十分注意します。美しいグラフィックが突如として表示されなくなります!
   • フォルダーを削除する。
5. ローカルファイルをアップロードする手順は、次のとおりです。
   1. アップロード先のフォルダーを選択します。
   2. [Upload Files (ファイルのアップロード)] をクリックしてファイルを選択するか、ファイルを [Manage Files (ファイルの管理)] ウィンドウにドラッグします。
6. コンテンツライブラリからファイルを削除する手順は、次のとおりです。
   1. ファイルのゴミ箱アイコンを選択するか、1 つ以上のファイルを選択します。
   2. をクリックします。
7. [Finished (完了)] をクリックして Media Manager を終了します。

この単元では、Brandon がページにコンポーネントを追加するところを見てきました。その過程で、コンポーネントタイプごとに独自の属性があり、複雑さが異なることを学びました。また、素晴らしいコンテンツアセットを Page Designer にアップロードする方法も習得しました。

これで、最後のテストを受けて、輝かしいバッジを獲得することができます。

• Salesforce ヘルプ: キャンペーンの作成
• Salesforce ヘルプ: Storefront Toolkit