コンポーネントを構成して、コンテンツアセットをアップロードする
学習の目的
この単元を完了すると、次のことができるようになります。
- コンポーネントのページ表示のしくみについて説明する。
- Brandon がコンポーネントで使用する 3 つの属性を挙げる。
- Media Manager でフォルダー名を変更すると問題が生じる理由を説明する。
- コンテンツアセットファイルをアップロードする方法を説明する。
ページを改良する
Brandon は順調に作業を進めています。新しい Page Designer ページを作成し、コンポーネントを追加して、いつ、誰がそのコンポーネントを表示できるかを構成しました。ここで、さらに複雑な 2 つ目のコンポーネントを追加したいと考えています。また、B2C Commerce で表示するコンポーネントがどのように決定されるのかにも関心があります。さらに、新しい優れたコンテンツアセットをアップロードしようと思っています。
別のコンポーネントを追加する
Brandon は、カルーセルを表示する 2 つ目の複雑なコンポーネントを追加したいと考えています。カルーセルコンポーネントを追加してから、カルーセルに表示する個々のタイルコンポーネントを追加する手順は、次のとおりです。
- Business Manager で [App Launcher (アプリケーションランチャー)] をクリックし、[Merchant Tools (マーチャントツール)] | [Content (コンテンツ)] | [Page Designer] を選択します。
-
[Cloud Kicks Homepage (Cloud Kicks ホームページ)] ページを選択します。
- ページ構造
アイコンをクリックします。
- [Main Region (メイン領域)] の横にあるプラス記号をクリックします。
- [Commerce Layouts (コマースレイアウト)] セクションの [Carousel (カルーセル)] を選択します。または、[Components (コンポーネント)] ペインからこのコンポーネントをドラッグアンドドロップします。右ペインに新しいコンポーネントが表示されます。
- ストアフロントページに表示するカルーセルのタイトルを入力します。
- スマートフォン、タブレット、デスクトップの各サイズで表示するインジケーター、コントロール、スライド数 (1、2、3) を選択します。
- カルーセルのスライドを追加します。
- ページ構造
アイコンをクリックします。
- [Slides (スライド)] の横にあるプラス記号をクリックして、[Image With Text (テキスト付き画像)] コンポーネントを選択します。このコンポーネントで、複数の商品を紹介できます。買い物客がタイルのリンクをクリックすると、特定の商品やカテゴリページなど、あなたが表示したいページに移動します。
- このコンポーネントで次のことができます。
- 画像を選択する。
- テキストオーバーレイを追加する。
- 商品、カテゴリ、検索用語、外部サイトへのリンクを作成する。
- 画像の下に表示するテキストを入力する。
- 画像を選択する。
- このスライドの詳細を入力または選択したら、[Save (保存)] をクリックします。中央のペインに新しいコンポーネントが表示されます。
- ページ構造
アイコンをクリックします。
- [Slides (スライド)] の横にあるプラス記号をクリックして、さらに 2 つのスライドを追加します。デスクトップビューのスライド数を 3 に指定したためです。カルーセルコンポーネントには必ず構成したとおりのスライド数を追加して、ビューのスライドがそれぞれ異なるようにします。
ページの見た目に満足した Brandon は、[Publish (公開)] をクリックしてオンラインで公開します。
数種のページを作成後、Brandon は最初の頃に行った作業に物足りなさを感じるかもしれません。問題ありません。ページを削除する手順は次のとおりです。
- Business Manager で [App Launcher (アプリケーションランチャー)] をクリックし、[Merchant Tools (マーチャントツール)] | [Content (コンテンツ)] | [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 は、優れた商品を際立たせる素晴らしいコンテンツをページに追加したいと考えています。コンテンツをアップロードしてファイルを管理する手順は、次のとおりです。
- Business Manager で、Page Designer を開きます。
- Media Manager
アイコンをクリックします。![Page Designer の [Manage Files (ファイルの管理)] ウィンドウ](https://res.cloudinary.com/hy4kyit2a/f_auto,fl_lossy,q_70/learn/modules/b2c-page-designer-merchandiser/b2c-page-designer-configure-component/images/ja-JP/4813bec30e03c3773053e733e60feef3_kix.re6osvqu5ktm.png)
- フォルダーを展開してコンテンツを表示します。さまざまな種類のファイルをアップロードして、わかりやすい構造に整理できます。
- フォルダー名の右側にある 3 つのドットをクリックします。実行できる操作は、次のとおりです。
- 新規フォルダーを作成する。
- フォルダー名を変更する。フォルダー名を変更すると、このフォルダー内のファイルと、ファイルを使用しているページのリンクが解除される点に十分注意します。美しいグラフィックが突如として表示されなくなります!
- フォルダーを削除する。
- ローカルファイルをアップロードする手順は、次のとおりです。
- アップロード先のフォルダーを選択します。
-
[Upload Files (ファイルのアップロード)] をクリックしてファイルを選択するか、ファイルを [Manage Files (ファイルの管理)] ウィンドウにドラッグします。
- コンテンツライブラリからファイルを削除する手順は、次のとおりです。
- ファイルのゴミ箱アイコンを選択するか、1 つ以上のファイルを選択します。
- をクリックします。
-
[Finished (完了)] をクリックして Media Manager を終了します。
まとめ
この単元では、Brandon がページにコンポーネントを追加するところを見てきました。その過程で、コンポーネントタイプごとに独自の属性があり、複雑さが異なることを学びました。また、素晴らしいコンテンツアセットを Page Designer にアップロードする方法も習得しました。
これで、最後のテストを受けて、輝かしいバッジを獲得することができます。
リソース