レイアウトエディター

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

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

レイアウトグリッドはCSSフレームワークである「Bootstrap 2.3」に準拠しています。 Bootstrapについての詳しい情報は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ブロックはテキストエリアに含まれるテキストです。

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

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

警告

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

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

最終更新