Перейти на сайт PHPShop
 
ГлавнаяДизайн
Шаблонизатор - информация для верстальщиков
В PHPShop используется собственный оригинальный шаблонизатор, позволяющий персонализировать дизайн сайта под любые задачи и разделять php код проекта от дизайна.

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

  • product - шаблоны товаров
  • catalog - шаблоны категорий
  • banner - шаблоны баннеров
  • news - шаблоны новостей
  • page - шаблоны страниц
  • php - код раширений дизайн-хуков
  • images - картинки, исползующиеся в шаблоне
  • style.css - файл CSS стилей шаблона

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

CSS стили оформления размещаются в /phpshop/templates/имя_шаблона/style.css. Для быстрого нахождения стиля шаблона рекомендуется к использованию утилита PHPShop Editor из комплекта EasyControl.

Список основных переменных

  • main/index.tpl - Скелет главной страницы
  • main/shop.tpl - Скелет остальных страниц
  • catalog/ - Шаблоны каталогов и подкаталогов
  • product/ - Шаблоны вывода товаров
  • selection/ - Шаблоны фильтров товаров
  • users/ - Шаблоны личного кабинета пользователей
  • order/ - Шаблоны формы заказа
  • search/ - Шаблоны поиск
  • news/ - Шаблоны новостей
  • gbook/ - Шаблоны отзывов
  • map/ - Шаблоны карты сайта
  • page/ - Шаблоны вывода страниц
  • banner/ - Шаблоны баннерной сети

Изменение шаблона

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

  • Берем за исходный шаблон с именем "aeroblue", расположенный в папке //phpshop/templates/aeroblue
  • Копируем его в ту же папку //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/icon/icon.gif
  • Изображения для шаблона хранятся в папке //phpshop/templates/my_template/images
    • //phpshop/templates/my_template/images - персональные изображения для шаблона
    • //phpshop/templates/my_template//phpshop/templates/phpshopwiki/images/shop - изображения для закрытых от редактирования функций.

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

Картинка

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

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

  • картинка.jpg - не правильно
  • my img.jpg - не правильно
  • my_img.jpg - верно
Слайдер на главной странице Как сменить логотип?
ГлавнаяДизайн