CS-Cartでは、ホームページや商品、カテゴリー、注文手続きなどのレイアウトを個別に管理画面から編集することができます。
また、レイアウトをXMLでインポートやエクスポートすることもできます。
レイアウトを編集するには、管理画面からの上部にあるメニューから「デザイン > レイアウト > レイアウト」に移動します。
- レイアウトの管理
- レイアウトの追加
- レイアウトの切り替え
- レイアウトとレイアウトページ
- レイアウトページの構造
- レイアウトページの編集
- レイアウトページの追加
- レイアウトページの削除
- レイアウトのインポートとエクスポート
レイアウトの管理
レイアウトページのリストは、右側の「レイアウト」セクションが選択されているときに表示されます。
レイアウトは、レイアウト名をクリックして切り替え、レイアウトの名前にをマウスを乗せると、「歯車」ボタンが表示されます。
右上の「＋」ボタンを使用すると、プルダウンメニューが表示されます。
- プレビュー：ECサイトを別のページで開きます。
- プロパティ：モーダルウィンドウが開きレイアウト全体の構成を編集できます。
- レイアウトのエクスポート：レイアウトをエクスポートします。
- レイアウトのインポート：レイアウトをインポートします。
レイアウトの追加
右上の「＋」ボタンをクリックすると、新しいレイアウトの追加ができます。
レイアウトを追加や編集をするときに、以下の項目を定義できます。
- 名前：レイアウトの名前。
- レイアウトからデータをコピー（新しいレイアウトを追加する場合）：コピー元のテーマからレイアウトを選択します。
- デフォルト：このチェックボックスがオンになっている場合、レイアウトはデフォルトとして設定され、ECサイトで使用されます。
- グリッド数：レイアウトで12列と16列のどちらのグリッドを使用するかどうかを選択します。
- 12列
- 16列
- グリッドレイアウトの横幅：ページレイアウトのスタイルを選択します。
- 固定幅：ページの幅は固定になります（たとえば、1200px）。
- 可変幅：ページはレスポンシブレイアウトになります。
- 全幅表示：ページは全幅レイアウトになります。
右下の「登録」ボタンをクリックすると、新しいスタイルとして登録されます。
レイアウトの切り替え
レイアウトが複数ある場合には、右サイドにある「レイアウト切り替え」からレイアウトを切り替えることができます。
- プレビュー：このレイアウトが適用されたECサイトを別のページで開きます。
- デフォルトレイアウトに指定：こちらをクリックすると、指定されているレイアウトはデフォルトとして設定され、ECサイトで使用されます。
- プロパティ：モーダルウィンドウが開き、該当レイアウト全体の構成を編集できます。
- 削除：該当レイアウトを削除します。
デフォルトのレイアウトになっている場合、プルダウンメニューはプレビューとプロパティしか出ません。
レイアウトとレイアウトページ
レイアウトの中には、各ページのレイアウトを設定するレイアウトページがあり、各タイプのページ（商品詳細、カテゴリーなど）や機能を持ったページ（注文手続き、カートなど）があります。
上部のタブには、以下のレイアウトページが用意されています。
- デフォルト
- ホームページ
- 商品
- カテゴリー
- カート
- 決済手続き
- 認証
- プロフィール
- 登録成功
- 注文完了
- ページ
- ギフト券
- 404
- ブログ
- 検索結果
レイアウトページの構造
レイアウトページは、コンテナとその中にあるグリッド、さらにグリッドの中にあるブロックで構成されています。
ブロックには、ロゴ、商品の詳細、パンくずリスト、検索フォーム、ナビゲーションメニューなどの情報が含まれます。
ブロックを追加、編集、削除、移動することで、ページの構造を変更できます。
レイアウトページの編集
レイアウトページを編集するには、各レイアウトページの
、決済手続きページを編集するには、上部にある「決済手続き」タブをクリックします。
右上にある「＋」をクリックする事で、新たなレイアウトを追加することもできます。
レイアウトを特定のページやページタイプに関連付けるには、各レイアウトの横にある「歯車」ボタンをクリックして、各項目の値を変更します。
デフォルト
特定のレイアウトを編集すると、すべてのページが自動的に変更されます。
たとえば、商品のレイアウトを変更すると、ECサイトの全ての商品ページが影響を受けます。
ただし、同じレイアウトを持つ複数のページに対して、ブロックを個別に有効化・無効化することはできますので、異なる商品やカテゴリーで、異なるデザインにすることができます。
デフォルトのレイアウト
ECサイトには、必ずデフォルトのレイアウトが必要です。
レイアウトページのデフォルトは、ECサイトのトップページ、ヘッダー、フッターのレイアウトを決定づけ、他のレイアウトページにも継承されます。
また、デフォルトのレイアウトページは、独自のレイアウトページを持たないECサイトのデザインを決定します。
デフォルトのレイアウトページを選択するには、レイアウトページで「歯車」ボタンをクリックしてプロパティを編集するときに「デフォルト」チェックボックスをオンにします。
デフォルトのレイアウトページは、新しいデフォルトのレイアウトページを選択するまで削除できず、デフォルトのレイアウトページは1つしか選択できないので、新しいレイアウトページをデフォルトにすると、古いレイアウトページはデフォルトではなくなります。
レイアウトページの追加
レイアウトページを追加する場合には、「レイアウトページの追加」タブをクリックします。
新規レイアウトページ：一般
「新規レイアウトページ」がモーダルウィンドウで開きますので、新しい各項目を設定します。
- ディスパッチ：必須項目：レイアウトページのタイプを選択します。「カスタム」を選択して、パラメータ値を手動で設定することもできます。
ディスパッチパラメータの形式は以下のとおりです。[controller_name].[mode_name]- [controller_name]：PHPコントローラの名前。
- [mode_name]：コントローラが動作するモード。
この値は、index.php?dispatch=の後に追加され、特定のページを指します。
例えば、index.php?dispatch=checkout.cartは、カートのページを指し、index.php?dispatch=checkout.checkoutは、注文手続きのページを指します。
- 名前：必須項目：レイアウトページの名前です。
- ページタイトル：ブラウザのタイトルバーに表示されるページタイトルです。
- METAタグの説明文：ページのdescriptionです。
- METAタグのキーワード：ページのkeywordsです。
- カスタムHTMLコード：HTMLでページのヘッダーにカスタムコードを追加することができます。このHTMLは、タグの間に置かれます。
- デフォルト：ここにチェックを入れると、このレイアウトはデフォルトとして設定されます。その場合、トップパネルとフッターのコンテナがすべてのページで使用されます。
- ポジション：レイアウトページの表示位置です。
設定が完了したら、右下の「登録」ボタンをクリックして登録を行います。
カテゴリー
レイアウトの中には、ページ、カテゴリー、商品などのタブが追加されているものがあります。
これらのタブでは、特定のカテゴリー、商品、またはページにレイアウトを適用することができます。
レイアウトページの削除
レイアウトページの削除をするには、レイアウトページを選択し、削除したいレイアウトの横にある「歯車」アイコンをクリックします。
モーダルウィンドウが開いたら、左下にある「ゴミ箱」ボタンをクリック。
ポップアップウィンドウで「選択した操作を実行しますか?」が表示されますので、「OK」ボタンをクリックすると、レイアウトの削除が完了します。
ご注意：事前にこのレイアウトをエクスポートして保存をしておかない限り、このレイアウトを元に戻すことはできません。
レイアウトのインポートとエクスポート
レイアウトは、XMLファイルでインポートやエクスポートすることができます。
これは、レイアウトを他のECサイトにコピーする必要がある場合に便利です。
レイアウトページのエクスポートは、ECサイトのレイアウトに変更を加える前に行うことをお勧めします。
そうすれば、レイアウトをインポートすることで、いつでも元のレイアウトに戻すことができます。
レイアウトページのインポートおよびエクスポートでは、特定のオブジェクト（商品、カテゴリー、ページなど）に対するレイアウトページの状態は考慮されず、例えば特定のオブジェクトでブロックが無効になっている場合、インポートやエクスポートした場合に無効化はされません。
レイアウトのエクスポート
レイアウトをエクスポートするには、管理画面からの上部にあるメニューから「デザイン > レイアウト > レイアウト」をクリック。
次に、右上の「歯車」ボタンをクリックし、プルダウンメニューで「レイアウトのエクスポート」をクリック。
モーダルウィンドウで「レイアウトのエクスポート」が表示されますので、以下の項目を設定します。
- ページのレイアウト：エクスポートするレイアウトページを選択します。
- 出力方法：出力タイプを選択できます。
- 直接ダウンロード：XMLファイルがダウンロードされます。
- スクリーン：XMLが画面上に表示されます。
- ファイル名：エクスポートされるファイルの名前です。デフォルトでは、layouts_日付.xmlとなっています。
設定が完了したら、右下の「エクスポート」ボタンをクリックすると、XMLのダウンロードか表示を行います。
レイアウトのインポート
レイアウトをインポートするには、管理画面からの上部にあるメニューから「デザイン > レイアウト > レイアウト」をクリック。
次に、右上の「歯車」ボタンをクリックし、プルダウンメニューで「レイアウトのインポート」をクリック。
モーダルウィンドウで「レイアウトのインポート」が表示されますので、以下の項目を設定します。
- ファイルまたはURLを選択：インポートするファイルを選択するか、URLを入力します。
- レイアウトの新規登録
- 現在のレイアウトを更新
- インポート前に元のレイアウトをクリア：このチェックボックスをオンにすると、レイアウトページがすべて削除されます。
- ディスパッチによるレイアウトの上書き：このチェックボックスをオンにすると、インポートしたXMLのディスパッチが同じものは、インポートしたレイアウトに置き換えられます。その他のインポートされたレイアウトは単に追加されます。
設定が完了したら、右下の「インポート」ボタンをクリックすると、インポートができます。