Макет¶

Настройки макета¶

У макета есть следующие настройки:

• scheme — текущая версия — 1.1. Она расширяет возможности макета. Вы можете указать edition (ULTIMATE, MULTIVENDOR) и build (RU, B2B) для элементов, и вам не нужно создавать несколько макетов для каждой версии продукта.

• edition — edition продукта для макета, например <layout edition="MULTIVENDOR">. В схеме 1.1 edition обычно не указывается.

• Grid columns — количество колонок в сетке (12 или 16). Сетка с 16 колонками предпочтительна и используется по умолчанию. Такая сетка позволяет построить больше комбинаций колонок: т.к. ширина каждой колонки меньше, количество колонок на сетке больше.

  В Bootstrap по умолчанию используется сетка с 12 колонками, на основе которой построено большое количество шаблонов. Используйте такую сетку, если на ее основе построен весь ваш макет, и вы хотите перенести его в CS-Cart.

  Важно

  Если вы хотите трансформировать сетку с 16 колонками в сетку с 12 колонками, значения ширины сетки будут изменены в Панели администратора несимметрично. Для покупателя ширина сетки не изменится, но вместо этого изменится ширина всего сайта. Вам придется изменить значение ширины сетки отдельно для каждой сетки.

• Layout width — выберите фиксированную ширину (Fixed), диапазон ширины (Fluid) или значение по ширине окна (Full width):

  • Если выбрано Fixed, вы можете указать ширину колонки в пикселях (px). Ширина колонки и интервал между колонками определяется в файле css/tygh/grid.less. Они определяются с помощью переменных @gridColumnWidth и @gridGutterWidth. По умолчанию эти значения равны 40px и 20px.
  • Если выбрано Fluid, вы можете определить минимальную и максимальную ширину страницы. Ширина колонки определяется в процентах (%). Ширина колонки и интервала между колонками определяется пропорционально в зависимости от значений переменных, используемых для страницы с фиксированной шириной.

  Примечание

  Вычислить максимальную ширину страницы можно с помощью формулы: (@gridColumns * @gridColumnWidth) + ((@gridGutterWidth * (@gridColumns - 1). Максимальная ширина по умолчанию равна 1175px.

  • Если выбрано Full width, ширина страницы будет адаптирована к полной ширине экрана.

Для изменения ширины блоков в зависимости от ширины экрана можно также использовать медиа-запросы.

Элементы макета¶

Контейнеры¶

Макет расположения состоит из 4 контейнеров: верхняя панель, заголовок, контент и подвал.

Контейнеры верхняя панель, заголовок и подвал определяются только для расположения По умолчанию.

В Bootstrap контейнеры имеют следующую структуру:

• Для макета с фиксированной шириной:

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

• Для макета с диапазоном ширины:

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

Контейнеры имеют следующие настройки:

• edition — edition продукта для контейнера, например <container edition="MULTIVENDOR" ... >.
• build — build продукта для контейнера, например <container build="B2B" ... >.

Сетки¶

Сетки располагаются в контейнерах. В Bootstrap сетка включает .span и .row. По умолчанию в CS-Cart используется сетка с 16 колонками.

Вы можете настроить следующие параметры сетки:

• edition — edition продукта для сетки, например <grid edition="MULTIVENDOR" ... >.
• build — build продукта для сетки, например <grid build="B2B" ... >.
• Width — количество колонок, используемое в контейнере. Для дочерних контейнеров это число не может превышать длину корневого контейнера. Данная настройка определяет .span, который будет использоваться для блока (.span1—.span16).
• Content alignment — положение контейнера внутри корневого (или родительского) контейнера:
  • Right — справа (добавляет класс ty-float-right).
  • Left — слева (добавляет класс ty-float-left).
  • Full Length — по длине.
• Offset — добавляет отступ блока слева. Использует те же значения, что и .span. Для сетки добавляется класс .offset.
• User-defined CSS-class — добавляет CSS-класс.

Экспорт / импорт макетов¶

Вы можете экспортировать макет в файл либо импортировать ранее созданный макет:

1. В Панели администратора перейдите в раздел Веб-сайт → Темы → Макеты.
2. Нажмите кнопку шестеренки в правом верхнем углу страницы.
3. Выберите желаемое действие.

При создании новой темы экспортируйте макет в папку layouts после подбора размера блоков (предварительно удалите предыдущие файлы). Этот макет будет применен автоматически при установке темы.

Файл экспорта / импорта включает следующее:

• Настройки макета.

• Структура и настройки контейнеров, сетки и блоков.

• Контент блоков. Оно определяется на вкладке Контент и зависит от типа блока. Но не во всех блоках есть контент.

  Например для блока HTML и HTML блок с поддержкой Smarty контентом является текст, введенный в текстовое поле.

  В таких блоках как Товары контентом является критерии отображения товаров (например, по новизне, недавно просмотренные).

Совместимость макетов¶

При разработке темы можно указать, будет ли конкретный макет работать с CS-Cart, Multi-Vendor или с ними обоими. Для этого:

1. Экспортируйте макет.
2. Откройте экспортированный файл.
3. Для атрибута edition добавьте элемент Layout, например:

<?xml version="1.0"?>
<block_scheme scheme="1.0">
    <settings>
        <default_language>en</default_language>
    </settings>
    <layout edition="MULTIVENDOR">
        <name>Main</name>
        <is_default>1</is_default>
        <width>16</width>
        <layout_width>fluid</layout_width>
        <min_width>280</min_width>
        <max_width>1200</max_width>
        <style_id>Modern</style_id>
    </layout>
</block_scheme>

Ниже указаны возможные значения атрибута edition:

• ULTIMATE — макет работает только с CS-Cart.
• MULTIVENDOR — макет работает только с Multi-Vendor.
• ULTIMATE/MULTIVENDOR — макет работает и с CS-Cart, и с Multi-Vendor.

При установке темы все макеты с подходящим значением edition будут установлены в папку layouts.

Для схемы 1.1

Схема 1.1 позволяет указывать edition (ULTIMATE, MULTIVENDOR) и build (RU, B2B) у любых элементов. При обработке layout элементы с этими атрибутами, не подходящие под edition или build продукта, будут удалены.

Макеты модулей¶

Модули могут добавлять собственные макеты. Это делается посредством файла layouts.xml, расположенного в папке модуля app/addons/[addon_name]/layouts.xml.

Темы могут переопределять макеты модулей. Если в каталоге темы есть файл layouts/addons/[имя_аддона]/layouts.xml, то эти макеты будут использоваться при установке модуля вместо макетов, которые устанавливаются вместе с модулем.