0

Товар успешно добавлен в корзину

Оформить заказ

Как создать собственную тему оформления для интернет-магазина ReadyScript?

“Насколько будет легко связать собственную верстку с движком?” – пожалуй, самый волнующий вопрос для разработчика при выборе той или иной CMS для интернет-магазина. Именно этому вопросу будет посвящена эта статья.

Мы выбрали самый распространенный случай и будем конструировать готовую тему оформления НЕ по сеточной модели. То есть мы не будем формировать сетку через конструктор в административной панели. А будем просто вставлять кусочки сверстанного HTML кода в шаблоны.

Что нам требуется для создания темы оформления?

  1. Установленная копия движка ReadyScript (можно trial, все равно на .local она работает без ограничений, вечно)
  2. Сверстанные макеты. Для примера, подготовлены 5 простых макетов, из которых нам предстоит собрать тему оформления.
  • index.html – главная страница
  • catalog.html – страница со списком товаров
  • product.html – страница просмотра товара
  • anytext.html – любая текстовая страница
  • 404.html – страница для ошибок

 

Отсюда можно скачать полный архив с демо-версткой.

Необходимо установить на время создания темы оформления следующие опции в разделе Управление->Настройки системы:

Коротко о теме оформления ReadyScript

Тема оформления в ReadyScript – это каталог с шаблонами, css-стилями, скриптами и изображениями, которые используются для формирования конечного HTML, отображаемого пользователю. В тему оформления можно вложить сразу несколько цветовых вариаций сайта, пользователю в этом случае будет предложен выбор цветовой схемы в момент установки темы оформления. Тема оформления легко переносится между копиями ReadyScript, для этого достаточно просто добавить в zip архив папку с темой, а в другой копии загрузить zip архив с темой оформления через административную панель.

Полная структура стандартных папок и файлов темы оформления:

  • LANG - каталог для языковых файлов. в этой статье использоваться не будет
  • MODULEVIEW – каталог для шаблонов модулей
  • RESOURCE
    • CSS – каталог для css
    • IMG – каталог для изображений
    • JS – каталог для JS-скриптов
  • layout.tpl – первично подключаемый шаблон.
  • exception.tpl – шаблон для ошибок, 404, 503, …
  • blocks.xml – используется для описания связей между типами страниц (Route_id) и шаблонами. Например, чтобы связать главную с шаблоном index.tpl, страницу со списком товаров с шаблоном catalog.tpl, и.т.д. Этот файл не нужно создавать вручную, его нужно сгенерировать через административную панель. В случае, когда применяется сеточная модель, в этом файле хранится гораздо больше сведений, но об этом не в этой статье.
  • theme.xml – используется для общего описания темы оформления.
  • preview.jpg или preview_SHADE-ID.jpg - картинки размером 220x154 px для предварительного просмотра темы оформления. Если используются цветовые вариации, то картинки должны быть созданы для каждой цветовой вариации.

Шаг 1. Создание пустышки

Для начала нам требуется создать "пустой" шаблон, чтобы можно было его выбрать в административной панели и дальше работать с ним в режиме реального времени.

Темы оформления в ReadyScript располагаются в папке /templates, соответственно создадим в ней каталог с нашей новой темой. Назовем его example.
Разместим там файлы:

  • theme.xml, следующего содержания:
  • layout.tpl, следующего содержания:
  • preview_black.jpg - скриншот темы в черном цвете
  • preview_green.jpg - скриншот темы в зеленом цвете

 

Примечание: Если в theme.xml отсутствует секция shades, то скриншот темы должен называться preview.jpg

Необходимо также сразу перенести картинки, css-стили, скрипты из каталога с версткой в соответствующие папки создаваемой темы. т.е. в resource/img, resource/css, resource/js.

Далее заходим в административную панель ReadyScript в раздел Веб-сайт -> Настройка сайта. Выбираем нашу тему оформления.

Тема установлена, можно переходить к её оформлению.

Шаг 2. Формируем block.xml или связываем страницы с шаблонами

Для этих целей в ReadyScript служит раздел: Веб-сайт -> Конструктор сайта. Заходим в него.

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

 

Прежде чем мы будем задавать страницам персональное отображение, стоит немного рассказать о ходе рендеринга страниц в ReadyScript.
Итак, если пользователь, например, открывает страницу с карточкой товара, в системе происходит следующее:

Техническая фаза

  1. По маске URL адреса, находится соответствующая страница(или если точнее маршрут).
  2. Вызывается Фронт-контроллер, соответствующий данному маршруту. (формирует всю информацию о товаре)
  3. Результат выполнения фронт контроллера сохраняется в системе под названием "главное содержимое страницы".

Фаза формирования отображения

  1. В "Конструкторе сайта" ищется "страница", которой задано отображение(имеется в виду, у которой указан либо шаблон отображения, либо создана сетка с блоками). Если "страница" не найдена, то используется отображение страницы "по-умолчанию"(она всегда присутствует в конструкторе сайта).
  2. Происходит рендеринг страницы, найденной в п.4.
 

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

Нажимаем на иконку "Настройки страницы"

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

Этот диалог поможет нам выбрать шаблон, а если его не существует, то создать. Не забываем нажать на кнопку "Сохранить", расположенную внизу страницы

В итоге у нас получится выбранное имя шаблона в диалоге редактирования страницы. После чего нажимаем "Сохранить" внизу страницы.

Доказательством того, что страница по-умолчанию связана с шаблоном является данная надпись

Теперь нам нужно создать страницу "главная страница" и по аналогии связать её с шаблоном index.tpl.

Нажимаем добавить страницу и по аналогии связываем её с шаблоном index.tpl.

Пишем в файле index.tpl строчку Hello world и Сохраняем изменения.

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

Чтобы обеспечить переносимость темы оформления на другой компьютер, нажимаем кнопку "Сохранить эталон темы" в правом углу, что приведет к созданию файла blocks.xml в каталоге нашей темы.

Теперь, если зайти на главную страницу нашего сайта, мы увидим надпись Hello World! А это означает, что можно двигаться дальше.

Шаг 3. Раскидываем HTML-верстку по tpl шаблонам

Так как у нас на главной странице и на всех стальных страницах имеются общие части(шапка, левая колонка, футер), то логично вынести их на уровень выше из шаблонов default.tpl и index.tpl. И пользоваться общей частью с помощью механизма наследования шаблонов Smarty3.

Назовем шаблон с общей частью - body.tpl. И запишем в него следующее содержимое:

Как видно, мы разметили разметили область "content", которую будут изменять наследники - default.tpl и index.tpl. А в местах, где должны отображаться блоки информации, связанные с базой, мы вставили конструкции по вызову блочных контроллеров. Кстати сказать, все блочные контроллеры в ReadyScript можно всегда найти в папках /modules/ИМЯ_МОДУЛЯ/Controller/Block/ИМЯ_БЛОКА. Если открыть класс блока, то в нем всегда можно увидеть его понятное название на Русском языке, описание и ожидаемые параметры.

Переходим к наполнению файла default.tpl. Записываем в него:

Специально для свободы действий разработчиков, фронт-контроллер главной страницы не возвращает ничего, т.е. "главного содержимого страницы" - не будет, соответственно мы должны позаботиться о том, чтобы в центральной колонке у нас отобразился блок "лидеры продаж". Теперь нам предстоит заполнить шаблон index.tpl. Заполняем:

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

Делается это с помощью папки moduleview, которую мы должны создать в каталоге с темой. Чтобы перегрузить, например, шаблон "blocks/topproducts/top_products.tpl" из модуля catalog, нам нужно создать файл по следующему пути moduleview/catalog/blocks/topproducts/top_products.tpl.
где:
moduleview - папка для перегрузки шаблонов модулей
catalog - имя модуля
blocks - указывает, что это папка для шаблонов блочных контроллеров
topproducts - имя блочного контроллера
top_products.tpl - имя шаблона

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

Узнать какой шаблон использует тот или иной блок можно также заглянув в класс подключаемого блок-контроллера.

Итак, для наших нужд нужно создать следующие шаблоны:

  • moduleview/main/blocks/logo/logo.tpl - шаблон отображения логотипа
  • moduleview/main/blocks/breadcrumbs/breadcrumbs.tpl - шаблон хлебных крошек
  • moduleview/menu/blocks/menu/hor_menu.tpl - шаблон отображения меню
  • moduleview/catalog/blocks/category/category.tpl - шаблон отображения списка категорий в левой колонке
  • moduleview/catalog/blocks/topproducts/top_products.tpl - шаблон Лидеров продаж
  • moduleview/catalog/list_products.tpl - шаблон просмотра категории. (его использует фронт контроллер, поэтому нет секции blocks)
  • moduleview/catalog/product.tpl - шаблон карточки товара
  • moduleview/article/blocks/lastnews/last_news.tpl - шаблон списка новостей в левой колонке
  • moduleview/article/view_article.tpl - шаблон просмотра новости

 

Существует 2 методики быстрой перегрузки шаблонов модулей:

1.С помощью модификации существующего шаблона. Т.е. сперва нужно найти шаблон в папке с модулем (Например: /modules/catalog/view/....) и скопировать его в соответствующую папку вашей темы (/templates/НАЗВАНИЕ ТЕМЫ/moduleview/catalog/...). А далее просто изменить HTML вокруг конструкций, возвращающих данные.

2. Создание с нуля. Т.е. можно сразу создать шаблон в папке с темой (/templates/НАЗВАНИЕ ТЕМЫ/moduleview/МОДУЛЬ/....). Заполнить его необходимым HTML-кодом, а далее заменять строки переменными. Здесь возникает логичный вопрос: "Как можно узнать доступные в шаблоне переменные?". Ответ очень прост, с помощью режима отладки. Нужно кликнуть на иконку "Информация о блоке", и в новом окне откроются доступные переменные в шаблоне.

Нажмите на иконку

В отдельном окне откроются все переменные, паредаваемые в шаблон

Также опытным пользователям, будет достаточно заглянуть в класс подключаемого блочного контроллера, чтобы понять какие переменные передаются в шаблон

Чтобы узнать более подробные сведения о переменной, в Smarty доступна конструкция {var_dump($var)}

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

Дело в том, что в отличие от других шаблонов темы оформления, этот шаблон не оборачивается стандартной шапкой и футером из тегов html, head, body, а возвращается как есть, поэтому мы должны позаботиться сами о подключении CSS файлов здесь.

Создание единого файла с темой оформления

Чтобы позволить другим пользователям устанавливать полученную тему оформления, нужно просто добавить в zip архив, папку с темой - example.

Для загрузки новой темы оформления в систему ReadyScript, нужно зайти в административную панель в раздел Веб-сайт -> Настройка сайта. Открыть диалог выбора темы оформления и нажать на кнопку "Выбрать zip-файл". После загрузки файла, тема станет доступна для выбора.

Заключение

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

Скачать итоговую тему оформления можно здесь


04 октября 2013 12:32, Артем Полторанин
Рассказать друзьям: