ShopwareのCMS機能を知る〜その2

今回は前回に引き続き、ShopwareのCMS機能の一部である「Shopping Experience」について解説していきます。
その中でも「レイアウト編集機能」にスポットを当てていきたいと思います。

レイアウト編集機能とは

Shopping Experience機能で提供されるレイアウト編集機能は、以下の機能を提供しています。

今回はこれらの内容を解説していきましょう。

レイアウトを編集する場合は、次のような流れで編集作業を行います。

既存のレイアウトから選ぶ場合は特に問題はないと思いますので、ここでは新規作成について紹介します。

レイアウトを作成したい場合は、レイアウト一覧画面の右上にある「Create new layout」をクリックします。
作成したいレイアウトの種類を選ぶ画面に切り替わるので、作成したいものを選びます。ここでは「Shop page」を選んでみます。

作成するページの選択

次はコンテンツレイアウトを選択する画面が表示されます。
サイドバー付きか、1列レイアウトのいずれかを選びます。

レイアウトの選択

最後はレイアウトの名前を入力し、レイアウトを作成します。
（この時点で一旦はデータが作成されます）

レイアウト名の設定

レイアウトを作成し終わると、コンポーネント配置画面に切り替わります。

レイアウト編集画面

ここからは既存のレイアウトを編集する場合も同じ操作となります。

コンポーネントを配置する場合、まずは右ナビの「＋」アイコン（上から2つ目）をクリックします。
右ナビの表示がコンポーネント選択に切り替わります。

コンポーネントの選択

「Block category」にはテキストをはじめとした以下の8種類のコンポーネントカテゴリが用意されています。

1つのコンポーネントカテゴリには1つ以上のコンポーネントが用意されていますが、レイアウトに配置する場合はこのコンポーネントをレイアウト上にドラッグ＆ドロップします。

1つのレイアウト枠には、複数のコンポーネントを配置できます。
コンポーネントの一覧からレイアウト枠へドラッグ＆ドロップすると、縦方向にコンポーネントを追加できます。

複数のコンポーネント配置

配置済みのコンポーネントにマウスカーソルを当てると、歯車アイコンが表示されます。

コンポーネント設定

このアイコンをクリックすると、コンポーネント毎に用意されている設定が表示されます。

Imageコンポーネント設定

上図はImageコンポーネントの設定画面ですが、

などが可能です。

配置済みのコンポーネントにマウスカーソルを当てると、コンポーネントの差し替えができます。
歯車アイコンの右側にあるボタンをクリックすると、入れ替え可能なコンポーネントが表示され、どれか1つを選ぶとそのコンポーネントに差し替わります。

コンポーネント入れ替え

レイアウト編集画面の編集エリア上部と下部には、コンポーネント配置枠を追加するボタンが用意されています。
ここをクリックするとコンテンツを配置するエリアを追加でき、

のどちらかのレイアウトを用いたコンテンツ配置ができます。

標準のShopwareの画面レイアウトには

はありません。デザイン案を考える際は注意したほうが良いでしょう。

次回は作成したレイアウトをShopwareのシステムと関連付け、どのように動作するかを解説していきます。