Версия: 2.0.4
Конструктор сайта

В разделе "Конструктор сайта" задаются правила отображения каждой страницы интернет-магазина. Список страниц в системе предопределен установленными модулями. Например, страницами считаются: главная страница, страница со списком товаров, страница с карточкой товара, страница сравнения товаров, страница пункта меню, страница со списком статей, страница просмотра статьи и т. д.

Если для страницы уже заданы правила отображения, то она будет присутствовать в списке страниц. В случае, если страницы нет в списке, для ее отображения будут использоваться параметры страницы "по умолчанию". Чтобы добавить персональное отображение для страницы, нажмите на кнопку Добавить страницу.

pages.png
Конструктор сайта. Список страниц.

Конструктор сайта позволяет:

  • Связать страницу с шаблоном отображения Smarty. В этом случае верстка и вставка необходимых блоков должны быть реализованы в шаблоне.
  • Настроить страницу по сеточной модели. Этот вариант предусматривает сборку страницы, основываясь на трех понятиях: Контейнер, Секция, Блок.

В случае сборки сайта по сеточной модели страница делится на 12 или 16 колонок равной ширины (это происходит внутри Контейнера). Стандартной шириной рабочей области (в которой располагается весь контент) считается 960 px, однако это значение может быть и другим. Внутри рабочей области могут располагаться Секции, ширина которых измеряется количеством колонок, занимаемых секцией. Внутри секций можно расположить Блоки.

Контейнер - это корневой элемент для секций, создает рабочую область. Имеет настройки:

  • Ширина - указывает какое количество колонок должно быть на странице. Возможные варианты 12 или 16 колонок.
  • CSS класс - CSS класс, который будет приписан HTML-элементу данного контейнера.
  • Название - любое название, характеризующее содержимое контейнера.
  • CSS класс оборачивающего блока - CSS класс HTML-элемента, располагающегося на уровень выше.
  • Внешний элемент - HTML-тег, оборачивающий элемент с контейнером.
  • Внешний шаблон - произвольный шаблон, выводящий HTML контейнера через переменную $wrapped_content. Вокруг этой переменной можно добавить любой HTML-код.
  • Внутренний шаблон - произвольный шаблон, выводящий HTML секций через переменную $wrapped_content. Вокруг этой переменной можно добавить любой HTML-код.
container.png
Параметры контейнера

Чтобы добавить секцию в контейнер или настроить параметры контейнера, необходимо воспользоваться меню контейнера.

container_menu.png
Меню контейнера

Если говорить о практике использования контейнеров, то обычно шапку, центральную часть, футер помещают в отдельные контейнеры.

Секция - область внутри контейнера, имеющая определенную ширину. Основное предназначение секции - это удерживание содержимого в пределах своей области. Имеет настройки:

  • Название секции для автоматической вставки модулей - возможные значения: "Не указано", "Левая колонка", "Правая колонка", "Центральная колонка", "Другое". Используется во время установки новых модулей, для автоматического размещения Блоков.
  • Ширина - ширина секции, указывается в количестве колонок, которое должна занимать секция.
  • Внутреннее выравнивание - возможные значения: на всю ширину, слева, справа. Устанавливает, как должны горизонтально выравниваться Блоки внутри секции.
  • Префикс - отступ слева внутри секции (padding-left). Задается в количестве колонок. Увеличивает ширину секции.
  • Суффикс - отступ справа внутри секции (padding-right). Задается в количестве колонок. Увеличивает ширину секции.
  • Сдвиг влево - сдвигает секцию влево, при этом секция может накладываться на другую (position:relative; left:-n).
  • Сдвиг вправо - сдвигает секцию вправо, при этом секция может накладываться на другую (position:relative; left:+n).
  • Пользовательский CSS класс - CSS класс, который будет присвоен HTML-элементу секции.
  • Внутренний шаблон - произвольный шаблон, выводящий HTML блоков через переменную $wrapped_content. Вокруг этой переменной можно добавить любой HTML-код.

Параметры префикс (prefix), суффикс (suffix), сдвиг влево (pull), сдвиг вправо (push) полностью соответствуют понятиям, принятым в CSS-фреймворке GS960.

section.png
Параметры секции

Каждая секция имеет собственное меню, действия которого описаны в изображении ниже.

section_menu.png
Меню секции

Если внутри секции размещен хотя бы один блок, то создать вложенную секцию уже невозможно.

Если внутри секции размещена хотя бы одна секция, то размещение блока допускается только во вложенной секции.

Блок - видимая часть модуля, в которой отображается определенная информация. Блок размещается внутри секции. Каждый модуль может иметь неограниченное число блоков. Например, модуль "Каталог" содержит в себе следующие блоки: "Последние просмотренные товары", "Список категорий", "Рекомендуемые товары".

Чтобы добавить блок, в меню требуемой секции следует нажать на иконку "Добавить модуль". Откроется окно со списком доступных блоков, распределенных по модулям.

block_dialog.png
Диалог выбора блока

В случае, если блок имеет обязательные настройки, после выбора блока откроется диалог установки параметров блока. Например, блок "Список категорий" имеет две настройки:

  • Шаблон, который используется для отображения блока;
  • Корневая директория, с помощью которой можно ограничить список отображаемых категорий.
block_settings.png
Настройки блока

Отдельно стоит сказать про блок Главное содержимое страницы. Он принадлежит Системному модулю. Этот блок содержит основной HTML, который был подготовлен фронт-контроллером для открытой пользователем страницы. То есть данный блок должен присутствовать на каждой странице. Исключением может быть главная страница, фронт-контроллер которой ничего не возвращает.

При создании новых страниц имеется возможность наследования контейнеров со страницы по умолчанию. Например, с помощью этого механизма можно единожды определить на странице по умолчанию контейнеры "шапка", "центральный", "футер" и менять состав только центрального контейнера на различных страницах.

inheritance.png
Наследование контейнеров

Вся информация в конструкторе сайта тесно связана с текущей темой оформления, установленной в настройках сайта. Во время установки темы загружаются полные сведения обо всех страницах и расположенных на них контейнерах, секциях, блоках. Это можно использовать, чтобы привести отображение всех страниц к виду по умолчанию, достаточно заново установить тему оформления.

Секции и блоки можно перемещать, используя технологию drag&drop (то есть с помощью мыши).

dragdrop.png
Перемещение блоков

Темы оформления, использующие адаптивные (отзывчивые) к различным устройствам технологии, иногда не поддерживают перемещение секций и блоков из-за того, что разработчиками темы заложен жесткий порядок элементов. Не рекомендуется перемещать местами секции в идущей в комплекте с коробочными версиями ReadyScript теме оформления.

В верхней части "Конструктора сайта" располагаются кнопки для быстрого импорта/экспорта структуры блоков через xml-файл:

  • Сохранить эталон темы - позволяет сохранить все сведения о страницах в файле blocks.xml темы оформления.
  • Экспорт - позволяет скачать xml-файл со всеми сведениями о страницах.
  • Импорт - позволяет загрузить сведения о страницах из xml-файла.
topbuttons.png
Кнопки конструктора сайта