Структура файлов шаблона

Файлы шаблона сгруппированы в папки с именем шаблона в phpshop/templates/ и разделены на группы по имени применения:

• product - шаблоны товаров

• catalog - шаблоны категорий

• banner - шаблоны баннеров

• news - шаблоны новостей

• page - шаблоны страниц

• selection - шаблоны фильтров товаров

• ружим

• users - шаблоны личного кабинета пользователей

• order - шаблоны формы заказа

• search - шаблоны поиск

• gbook - шаблоны отзывов

• map - шаблоны карты сайта

• php - код раширений дизайн-хуков

• images - картинки, исползующиеся в шаблоне

• style.css - файл CSS стилей шаблона

Стили оформления CSS

CSS стили оформления размещаются в phpshop/templates/имя_шаблона/style.css. Цветовые темы стилей размещаются в phpshop/templates/имя_шаблонаcss/ в файлах формата bootstrap-theme-цвет.css.

Создание нового шаблона

Редактировать файлы шаблонов *.tpl можно в любом текстовом редакторе, поддерживающий разметку HTML. Для создания собственного шаблона под именем "my_template" нужно проделать следующие шаги:

• Берем за исходный шаблон с именем "bootstrap", расположенный в папке phpshop/templates/bootstrap

• Копируем его в ту же папку phpshop/templates/, но под именем phpshop/templates/my_template

• В панели управления Настройки - Основные выбираем шаблон с именем "my_template"

• Основные файлы, которые нужно править:

  • phpshop/templates/my_template/index.tpl - вид первой страницы сайта (имя_сайта/)

  • phpshop/templates/my_template/shop.tpl - вид всех остальных страниц (имя_сайта/shop/, имя_сайта/news/ и т.д.)

• Исходя из собственного дизайна, вносим изменения в верстку страницы phpshop/templates/my_template/index.tpl.

• После внесения изменений нужно нажать клавишу F5 для перезагрузки браузера.

• Такие же манипуляции проводим с файлом внутренних страниц phpshop/templates/my_template/shop.tpl

• Изображения для шаблона хранятся в папке phpshop/templates/my_template/images

  • phpshop/templates/my_template/images - персональные изображения для шаблона

  • phpshop/templates/my_template/images/shop - изображения для закрытых от редактирования функций.

Путь к изображению должен иметь вид:

img src="imagеs/my_pic.jpg" alt="Картинка">

При выводе дизайна, скрипт заменяет адрес imаges/my_pic.jpg на images/my_pic.jpg, что делает шаблон независимым от своего имени и расположения. Важно знать, что все вхождения пути imаges будут в дизайне и в скрипте заменены на images/. Особенно это правило нужно учитывать при создании раздела "Полезные ссылки", где прописываются коды кнопок-ссылок.

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

• картинка.jpg - не правильно

• my img.jpg - не правильно

• my_img.jpg - верно

Редактор шаблонов

Для редактирования дизайна из панели управления используется функция редактора в меню Настройки - Шаблоны дизайна. Он позволяет быстро находить нужный шаблон и подсвечивать переменные, доступные в нем. Для ознакомления со всеми возможностями редактора шаблонов следует запустить режим Обучение в выпадающем меню . Для перехода в продвинутый режим правки шаблонов с возможностью отображения реальных имен файлов служит опция "Расширенный режим".

Отладка шаблона

Для перехода в режим отладки шаблона следует в режиме правки шаблона кликнуть по одноименной кнопке. Режим отладки поддерживает шаблоны diggi, astero и spice. В режиме отладки подсвечиваются пунктирной линией участки кода, сформированные шаблонизатором. При наведении мышкой на такой элемент появляется подсказка Показать [Ctrl + ↵] с возможностью перехода в нужный файл шаблона по сочетанию клавиш Ctrl и Ввод, или Ctrl и клик мышкой. Переход происходит во внутренний редактор шаблонов в панели управления. Отладка позволяет быстро найти нужный шаблон и отредактировать его.

Схема шаблона

Интерактивная схема шаблона доступна в разделе Настройки - Шаблоны дизайна - Имя шаблона и предназначена для быстрого визуального восприятия шаблона и возможности быстро найти нужный элемент в нем. При наведении на каждый элемент показывается подсказка с описанием функции и ссылкой на редактирование файла в html редакторе.

PHP код

Поддерживается использование нативного php кода между тегами @php ..... php@, пример:

@php 
if(isset($_GET['v'])) 
  echo "Выбраны характеристики";
php@

Существует список разрешенных php-функций и условных выражений для использований в шаблонизаторе для предотвращения внедрения вируса на сайт. Доступные функции:

if
else
switch
for
foreach
echo
print
print_r
array
isset
empty
chr
str_replace
empty

Добавить новые функции можно через общий конфигурационный файл phpshop/inc/config.ini секция [function]:

[function]
guard = "true";
allowed = "leftCatal,isset,getElementById,empty,UserLogOut,exit,set,get";
deny = "include,include_once,require,require_once,file,chmod"; 

Защитник кода отключается параметром guard = "false"

Для использования переменных шаблонизатора @переменная@ в тегах @php .. php@ применяется глобальный массив $GLOBALS['SysValue']['other'][переменная] или PHPShopParser::get('переменная').

Существует возможность задавать условия вывода блоков с учетом наличия той или иной не пустой переменной, пример:

div class="@php __hide('now_buying'); php@"

К элементу div добавится класс hide при условии, что переменная @now_buying@ пустая, т.е. блок не выведется. Таким способом можно скрывать новости, если их нет и т.д.

Смотрите также: Управление разделителем между товарами, Описание Дизайн-хуков​