CS-Cart.jp開発者ドキュメント
  • はじめに
  • Getting Started
    • CS-Cart開発者向け注意事項
    • CS-Cartの構成
    • デバッグ方法
  • コア
    • Hooks
    • コントローラー
      • Pre&Post コントローラー
    • データベース
      • データベースの構造と命名規則
      • データベース・プレイスホルダー
      • 他のデータベースへの接続
    • ショップフロント
      • ブロック
      • blockメインスキーマ—
      • Dynamic Objects
      • ajaxリクエストの使用方法
      • 特別なCSSセレクター
      • マイクロフォーマット Microformats
      • 通知システム
      • ツールチップ
    • 設定
    • コア関数
    • イベントの通知
    • 言語変数
    • スキーマー
  • アドオン開発
    • フック
      • PHPフック
      • テンプレートフック
    • アドオンチュートリアル
      • 「Hello World」チュートリアル
      • Advanced Add-on チュートリアル
      • 商品リスト、詳細ページのカスタムテンプレートを作成
      • 支払方法の開発
    • アドオンの管理プロセス
    • Add-on スキーマー
      • アドオンの互換性
      • 他のアドオンとの競合・依存設定
    • APIの拡張
    • スキーマーの拡張
    • アドオンのディレクトリ構造
    • アドオンの言語変数
    • .poファイルによる言語ファイルの作成
  • テーマ開発
    • テーマ開発の概要
    • テーマの複製
    • レイアウトの管理
    • トップパネルとヘッダー
    • テーマを使用したショップの設定の変更
    • CSS
    • テーマの言語変数
    • メディアファイル
    • 親テーマ
    • スタイルとビジュアルエディター
    • レイアウトエディター
    • テンプレート
  • デバッグ
    • デバッガー
    • ファイルエディター
GitBook提供
このページ内
  • レイアウトの設定
  • Layout includes
  • Locations
  • コンテナ
  • グリッド
  • 画像
  • Blocks
  • ブロックの設定
  • レイアウトのエクスポート/インポート
  • エクスポート/インポートファイル:
  1. テーマ開発

レイアウトエディター

前へスタイルとビジュアルエディター次へテンプレート

最終更新 8 か月前

レイアウトは、ストアフロントのルック&フィールをカスタマイズする強力なツールです。

ドラッグアンドドロップだけでブロックの位置を変更することが出来ます。

レイアウトグリッドはCSSフレームワークである「Bootstrap 2.3」に準拠しています。 Bootstrapについての詳しい情報はをご確認ください。

CS-Cartの管理パネルのデザイン > レイアウトでレイアウトを管理できます。

レイアウトの設定

レイアウトには以下の設定があります:

  • Grid columns - グリッドは16列固定となりました(CS-Cart4.2.4) グリッド内にグリッドを配置することが出来ます。

  • Layout width - fixed、requidまたはfull-widthのレイアウトを選択

リキッドレイアウトに最小値と最大値のサイト幅を定義することができます。

全幅のレイアウトのサイトはフル画面の幅に適応します。

固定レイアウトを使用すると、ピクセル(px)で列幅を定義することができます。

1カラムの幅とそれらの間の間隔 はcss/tygh/grid.lessファイルに定義されています。 これらはLESSの変数で定義されています:@gridColumnWidth と @gridGutterWidth 。 デフォルトでは40pxと20pxに等しいです。

以下の(@gridColumns _ @gridColumnWidth) + ((@gridGutterWidth (@gridColumns - 1) サイトの最大幅を探すのは簡単です。(デフォルトでは1175px)

また、画面の幅に応じてブロックの幅を変更するには、メディアクエリを使用することができます。 リキッドレイアウトでは列幅はパーセント(%)で定義されている。

One column widthと溝幅は固定レイアウトのために使われる変数の値に応じて比例的に定義されています。

Layout includes

Locations

ロケーションは、特定のページの外観を定義します。場所を追加する場合は、 設定

  • Name - ロケーション名

  • Dispatch - 特定のページやロケーションが関連しているページタイプ

ディスパッチパラメーターには以下の形式があります:[controller_name].[mode_name]:[controller_name]はコントローラーの名前、[mode_name]はコントローラーが作動するモードの名前

この値は_index.php?dispatch_に追加されます=特定のロケーションへのぺーじと位置の一部

例えば、_index.php?dispatch=checkout.cart_はカートのコンテンツを示しますが、一方で、_index.php?dispatch=checkout.checkout_はチェックアウトページを示します。

ドロップダウンリストから定義済みの値を選択することができます。

ヘッダーやフッターのようなサイトの要素は、通常すべてのページで同様です。

各ページにこのコンテンツを複製するのではなく、デフォルトのロケーションを使用します。

デフォルトのロケーションはいくつかのページに添付されていますが、共通のロケーションの外観は定義していません。

デフォルトのロケーションは常に定義されています。ロケーションのデフォルトを作るには、ロケーション設定のデフォルトチェックボックスを選択します。

コンテナ

ロケーションのレイアウトは4つのコンテナで構成されています:トップパネル、ヘッダー、コンテンツ、フッター

<画像>

トップパネル、ヘッダー及びフッターはデフォルトロケーションでのみ定義されます。

ブートストラップコンテナはいかの構造をもっています;

固定レイアウト:

<div class="container">...</div>

Fluid layout:

<div class="container-fluid">...</div>

グリッド

グリッドはコンテナに位置しています。ブートストラップのグリッドは.span と .row. を含んでいます。結果的に、16列のグリッドがCS-Cartで使用されます。

画像

以下のパラメーターをグリッドに定義することができます:

  • Width - コンテナに使用される列の数。子コンテナの場合、この番号はルートコンテナの長さを超えることができない。 この設定はブロックに使用する.span を定義します。(.span1-.span16)

  • Content alignment - ルートコンテナ内のコンテナの位置:右揃え、左揃え、全幅 左揃えにするためにty-float-leftを追加し、右揃えにするためにty-- float-rightを追加します。

  • Offset - 左側からブロックリストを追加します。.spanと同じ値を使用します。.offset クラスはグリッドに追加されます。

  • User-defined CSS-class - CSSクラスを追加するために使用する

Blocks

ブロックは特定のストアフロントの一部を表す独立したボックスです。ブロックはグリッドに追加されます。

スキーマを基にして作成されます。スキーマは全てのブロックにあるファイルで、設定やテンプレートは定義されます。

ブロックスキーマへのパスは:app/schemas/block_manager/blocks.php

ブロックの設定

  • Name - ブロック名

  • Template ブロックごとに定義されたテンプレート。ブロックテンプレートはtemplates/blocks/ディレクトリにあります。

  • Wrapper コンテンツを含んだテンプレート。ラッパーは/templates/blocks/wrappers/ディレクトリにあります。

  • User-defined CSS-class - CSSクラスを追加するために使用する

HINT

特定のページにトップパネルやヘッダー、フッター(デフォルトのロケーションのみで使用されるコンテナ)を置く必要がある場合は、Smarty supportでHTMLブロックを使用します。このブロックでは現在のページを定義するために$runtime.controller と $runtime.mode変数が使用されます。

例;

カテゴリーページのフッターにテキストを表示するには:

  • ヘッダーのコンテナにHTML block with Smarty supportブロックを作成します。

  • ブロックに以下のコードを書きます:

{if $runtime.controller == "categories" && $runtime.mode == "view"}
        <p>Categories page</p>
{/if}

レイアウトのエクスポート/インポート

作成したレイアウトを以前レイアウト作成しインポートしたファイルにエクスポートすることができます。

それを行う為には、管理パネルの_Design > Layouts_ セクションに移動し、ページの右上隅のギアボタンをクリックします、そして、目的のアクションを選択します。

新しいテーマを作成する場合は、ブロックを調子した後レイアウトをレイアウトディレクトリへエクスポートします。

このレイアウトはテーマをインストールすると自動的に有効になります。

エクスポート/インポートファイル:

  • レイアウトの設定

  • コンテナ、グリッド及びブロックの構造と設定

  • ブロックのコンテンツ。コンテンツタブに定義さており、ブロックのタイプによ異なります。

例えば、HTMLブロック と Smarty supportでのHTMLブロックはテキストエリアに含まれるテキストです。

製品タイプのブロックでは製品表示の基準(最新、最近表示した)と設定は定義されています。

全てのブロックがコンテンツを持つわけではありません。

警告

レイアウトはテーマがをインストールする時のみインストールされます。もしテーマをインストールし他のものに切り替える場合、インストールされたテーマの最新のレイアウトは有効です。

Bootstrap公式サイト