CS-Cartでは、ホームページや商品、カテゴリー、注文手続きなどのレイアウトを個別に管理画面から編集することができます。

また、レイアウトをXMLでインポートやエクスポートすることもできます。

レイアウトを編集するには、管理画面からの上部にあるメニューから「デザイン > レイアウト > レイアウト」に移動します。

レイアウトの編集

レイアウトには、各タイプのページ(商品詳細、カテゴリーなど)や機能を持ったページ(注文手続き、カートなど)があります。

上部のタブには、以下のレイアウトが用意されています。

  • デフォルト
  • ホームページ
  • 商品
  • カテゴリー
  • カート
  • 決済手続き
  • 認証
  • プロフィール
  • 登録成功
  • 注文完了
  • ページ
  • ギフト券
  • 404
  • ブログ
  • 検索結果

例えば、決済手続きページを編集するには、上部にある「決済手続き」タブをクリックします。

決済手続き:レイアウトの編集
決済手続き:レイアウトの編集

右上にある「+」をクリックする事で、新たなレイアウトを追加することもできます。

レイアウトの編集:トップパネル
レイアウトの編集:トップパネル

レイアウトを特定のページやページタイプに関連付けるには、各レイアウトの横にある「歯車」ボタンをクリックして、各項目の値を変更します。

デフォルト

デフォルト
デフォルト

特定のレイアウトを編集すると、すべてのページが自動的に変更されます。

たとえば、商品のレイアウトを変更すると、ECサイトの全ての商品ページが影響を受けます。

ただし、同じレイアウトを持つ複数のページに対して、ブロックを個別に有効化・無効化することはできますので、異なる商品やカテゴリーで、異なるデザインにすることができます。

デフォルトのレイアウト

ECサイトには、必ずデフォルトのレイアウトが必要です。

レイアウトの編集:Main
レイアウトの編集:Main

レイアウトのデフォルトは、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のディスパッチが同じものは、インポートしたレイアウトに置き換えられます。その他のインポートされたレイアウトは単に追加されます。

設定が完了したら、右下の「インポート」ボタンをクリックすると、インポートができます。