レイアウトエディター

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

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

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

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

レイアウトの設定

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

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

  • Layout width - choose the Fixed, Fluid, or Full width layout.
    固定流体またはフル幅のレイアウトを選択

          For the Fluid layout you can define the min and max site width.
流体レイアウトに最小値と最大値のサイト幅を定義することができます。

          With the Full width layout the site will be adapted to the full screen width.
フル幅のレイアウトのサイトはフル画面の幅に適応します。

With the Fixed layout you can define the column width in pixels (px).
固定レイアウトを使用すると、ピクセル(px)で列幅を定義することができます。

One column width and the gutter between them are defined in the css/tygh/grid.less file.
One column widthとそれらの間の溝は、css/tygh/grid.lessファイルに定義されています。

They are defined with the LESS variables: @gridColumnWidth and @gridGutterWidth. As default they equal 40px and 20px.
これらはLESSの変数で定義されています:@gridColumnWidth@gridGutterWidth 。デフォルトでは40pxと20pxに等しいです。

With the following equation (@gridColumns @gridColumnWidth) + ((@gridGutterWidth (@gridColumns - 1)
以下の(@gridColumns
@gridColumnWidth) + ((@gridGutterWidth (@gridColumns - 1)

it is easy to find out the site max width (1175px by default).
サイトの最大幅を探すのは簡単です。(デフォルトでは1175px)

You can also use Media queries to change the blocks width depending on the screen width.
また、画面の幅に応じてブロックの幅を変更するには、メディアクエリを使用することができます。

In the Fluid layout the column width is defined in percents (%).
流体レイアウトでは列幅はパーセント(%)で定義されている。

One column width and gutter width are defined proportionally according to the values of the variables used for the Fixed layout.
One column widthと溝幅は固定レイアウトのために使われる変数の値に応じて比例的に定義されています。

Layout includes

Locations

Location defines the certain page appearance. When adding a location, set:
ロケーションは、特定のページの外観を定義します。場所を追加する場合は、設定:

  • Name - location name.
    ロケーション名

  • Dispatch - specific page or page type that the location is associated with.
    特定のページやロケーションが関連しているページタイプ

       The dispatch parameter has the following format: [controller_name].[mode_name], where [controller_name] - is the name of the controller, and [mode_name] - is the mode in which the controller works.
ディスパッチパラメーターには以下の形式があります:[controller_name].[mode_name]:[controller_name]はコントローラーの名前、[mode_name]はコントローラーが作動するモードの名前

  
This value is added to index.php?dispatch= part of the page and points to a specific location.
この値はindex.php?dispatchに追加されます=特定のロケーションへのぺーじと位置の一部

       For example, index.php?dispatch=checkout.cart points to the cart contents page while index.php?dispatch=checkout.checkout points to the checkout page.
例えば、index.php?dispatch=checkout.cartはカートのコンテンツを示しますが、一方で、index.php?dispatch=checkout.checkoutはチェックアウトページを示します。

       You can choose the predefined values from the drop-down list.
ドロップダウンリストから定義済みの値を選択することができます。

Such site elements as header and footer are usually identical for every page.
ヘッダーやフッターのようなサイトの要素は、通常すべてのページで同様です。

Not to duplicate this content for each page, use the Default location.
各ページにこのコンテンツを複製するのではなく、デフォルトのロケーションを使用します。

Default location is not attached to some page but defines the common locations appearance.
デフォルトのロケーションはいくつかのページに添付されていますが、共通のロケーションの外観は定義していません。

Default location must be always defined. To make a location default, choose the Default checkbox in the location settings.
デフォルトのロケーションは常に定義されています。ロケーションのデフォルトを作るには、ロケーション設定のデフォルトチェックボックスを選択します。

Containers

Location layout consists of 4 containers: top panel, header, content, and footer.
ロケーションのレイアウトは4つのコンテナで構成されています:トップパネルヘッダーコンテンツフッター

834

The top panel, header, and footer containers are defined only for the Default location.
トップパネルヘッダー及びフッターデフォルトロケーションでのみ定義されます。

In bootstrap containers have the following structure:
ブートストラップコンテナはいかの構造をもっています;

For the Fixed layout:
固定レイアウト:

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

For the Fluid layout:

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

Grids

Grids are placed in containers. In Bootstrap grid includes .span and .row. As the default, the 16-column grid is used in CS-Cart.
グリッドはコンテナに位置しています。ブートストラップのグリッドは.span と .row. を含んでいます。結果的に、16列のグリッドがCS-Cartで使用されます。

画像

You can define the following parameters for a grid:
以下のパラメーターをグリッドに定義することができます:

  • Width - number of columns used in the container. For child containers, this number cannot exceed the the length of the root container.
    コンテナに使用される列の数。子コンテナの場合、この番号はルートコンテナの長さを超えることができない。

     This setting defines .span to be used for a block (.span1-.span16).
この設定はブロックに使用する.span を定義します。(.span1-.span16)

  • Content alignment - container position inside the root (or parent) container: Right, Left or Full Length.
    ルートコンテナ内のコンテナの位置:右、左、全長

            Adds the ty-float-left class for the left alignment and the ty-float-right class for the right alignment.
左揃えにするためにty-float-leftを追加し、右揃えにするためにty-- float-rightを追加します。

  • Offset - adds the block shift from the left side. Uses the same values as .span. The .offset class is added for grid.
    左側からブロックリストを追加します。.spanと同じ値を使用します。.offset クラスはグリッドに追加されます。

  • User-defined CSS-class - used to add a CSS-class.
    CSSクラスを追加するために使用する

Blocks

Block is a separate box which represents a particular storefront component. Blocks are added in grids.
ブロックは特定のストアフロントの一部を表す独立したボックスです。ブロックはグリッドに追加されます。

They are created based on schemas. Schema is a file where all blocks, their settings and templates are defined.
スキーマを基にして作成されます。スキーマは全てのブロックにあるファイルで、設定やテンプレートは定義されます。

The path to the blocks schema file: app/schemas/block_manager/blocks.php
ブロックスキーマへのパスは:app/schemas/block_manager/blocks.php

Block settings:

  • Name - block name.
    ブロック名

  • Template - template (.tpl) defined for a block. Block templates are stored in the templates/blocks/ directory.
    ブロックごとに定義されたテンプレート。ブロックテンプレートはtemplates/blocks/ ディレクトリにあります。

  • Wrapper - template to include content. Wrappers are stored in the /templates/blocks/wrappers/ directory.
    コンテンツを含んだテンプレート。ラッパーは/templates/blocks/wrappers/ディレクトリにあります。

  • User-defined CSS-class - used to add a CSS-class.
    CSSクラスを追加するために使用する

👍

If you need to place a block in the top panel, header, or footer (containers that are used only in the Default location) for a certain page, use the HTML block with Smarty support.
特定のページにトップパネルやヘッダー、フッター(デフォルトのロケーションのみで使用されるコンテナ)を置く必要がある場合は、Smarty supportでHTMLブロックを使用します。

In this block use the $runtime.controller and $runtime.mode variables to define the current page.
このブロックでは現在のページを定義するために$runtime.controller$runtime.mode変数が使用されます。

例;

To display some text in the header of the Categories page:
カテゴリーページのフッターにテキストを表示するには:

Create the HTML block with Smarty support block in the header container.

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

In the block write the following code:

  • ブロックに以下のコードを書きます:
{if $runtime.controller == "categories" && $runtime.mode == "view"}
        <p>Categories page</p>
{/if}

Layout Export/Import

You can export the created layout to a file of import previously created layout.
作成したレイアウトを以前レイアウト作成しインポートしたファイルにエクスポートすることができます。

To do it, in the Design > Layouts section of the administration panel click the gear button in the right upper corner of the page and choose the desired action.
それを行う為には、管理パネルのDesign > Layouts セクションに移動し、ページの右上隅のギアボタンをクリックします、そして、目的のアクションを選択します。

When creating the new theme, export layout to the layouts directory after adjusting blocks (remove the old files previously).
新しいテーマを作成する場合は、ブロックを調子した後レイアウトをレイアウトディレクトリへエクスポートします。

This layout will be authomatacally enabled when installing a theme.
このレイアウトはテーマをインストールすると自動的に有効になります。

Export/Import file includes:
エクスポート/インポートファイル:

Layout settings.

  • レイアウトの設定

Containers, grids, and blocks structure and settings.

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

Blocks content. It is defined in the Content tab and depents on the block type.

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

For example, for the HTML block and HTML block with Smarty support blocks it is text included in the text area.
例えば、HTMLブロックSmarty supportでのHTMLブロックはテキストエリアに含まれるテキストです。

In the block of the Products type the criteria of products display (newest, recently viewed) and their settings are defined.
製品タイプのブロックでは製品表示の基準(最新、最近表示した)と設定は定義されています。

But not all the blocks have content.
全てのブロックがコンテンツを持つわけではない。

❗️

Layout is installed only when you install a theme.
レイアウトはテーマがをインストールする時のみインストールされます。

If you install a theme and then switch to another one, the Layout of the latest installed theme will be active.
もしテーマをインストールし他のものに切り替える場合、インストールされたテーマの最新のレイアウトは有効です。