HTML Верстальщику

В PHPShop используется собственный шаблонизатор, позволяющий создавать дизайн под любые задачи. Код PHP отделен от HTML кода шаблонов.

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

🔦Шпаргалка по шаблонам

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

  • main - общие макеты главной и внутренних страни

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Макет главной и внутренних страниц

Шаблоны лежат в папке main, index.tpl - главная, shop.tpl - любая внутренняя, каталог, товар, страница. В shop.tpl метка @DispShop@ выводит внутреннее содержимое сайта, в зависимости от заданной страницы. Например, для каталога, @DispShop@ работает в шаблоне catalog/catalog_info_forma.tpl.

Редактирование карточки товара

Все шаблоны, связанные с выводом товаров, находятся в папке с именем product: phpshop/templates/имя шаблона/product/.

  • main_product_forma_1.tpl - вид краткого описания товара при выводе в 1 ячейку

  • main_product_forma_2.tpl - вид краткого описания товара при выводе в 2 ячейки

  • main_product_forma_3.tpl - вид краткого описания товара при выводе в 3 ячейки

  • main_product_forma_4.tpl - вид краткого описания товара при выводе в 4 ячейки

  • main_product_forma_full.tpl - вид подробного описания товара

  • product_page_list.tpl - вид списка товаров в формате сетки товаров

  • main_spec_forma_icon.tpl - вид краткого описания товара спецпредложений и новинок в боковой панеле

  • newtipIcon.tpl - вид лейбла новинок

  • specIcon.tpl - вид лейбла спецпредложений

  • product_odnotip_product_parent.tpl, product_odnotip_product_parent_one.tpl - вид подчиненных товаров

  • product_option_product.tpl - вид опций товара

Список меток

На примере шаблона UNIT. Для главной index.tpl:

Для всех внутренних shop.tpl

Для каталога товаров https://myphpshop.ru/katalog1.html + подкаталогов https://myphpshop.ru/katalog1-podkatalog1.html работает шаблон catalog/catalog_info_forma.tpl

Для каталогов страниц https://myphpshop.ru/page/temy1.html и текстовых страниц - https://myphpshop.ru/page/statya2.html, работает единый шаблон phpshop/templates/имя_шаблона/page/page_page_list.tpl

Стили 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 - изображения для закрытых от редактирования функций.

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

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

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

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

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

  • my_img.jpg - верно

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

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

Шаблон внешнего вида главной страницы находится в каталоге Основное - Главная страница, а всех остальных внутренних в Основное - Другие страницы. В эти 2 файла вносятся html-коды проверки сайта для Яндекса и Google, всевозможные счетчики и рейтинги. Правка остальных файлов шаблонов обычно не требуется.

Упрощенный режим редактора

Расширенный режим

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

Переключение режимов
Расширенный режим редактора

Перезагрузка шаблона

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

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

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

На mac os функция [Ctrl + ↵] работает только в браузере Firefox. В Сhrome, Safari не срабатывает переход.

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

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

Формы почтовых сообщений

Файл

Назначение

phpshop/lib/templates/order/usermail.tpl

Почтовая форма сообщения покупателю о заказе

phpshop/lib/templates/order/adminmail.tpl

Почтовая форма сообщения администратору о заказе

phpshop/lib/template/users/mail_admin_activation.tpl

Почтовая форма сообщения администратору о ручной активации нового пользователя

phpshop/lib/template/users/mail_admin_message.tpl

Почтовая форма сообщения администратору от пользователя из личного кабинета

phpshop/lib/templates/users/mail_notice_add.tpl

Почтовая форма заявки об уведомлении товара администратору

phpshop/lib/templates/users/mail_pricemail.tpl

Почтовая форма сообщения администратору о меньшей цене от пользователя

phpshop/lib/templates/users/mail_sendpassword.tpl

Почтовая форма сообщения пользователю восстановления пароля

phpshop/lib/templates/users/mail_user_activation.tpl

Почтовая форма сообщения пользователю активации

phpshop/lib/templates/users/mail_user_register_success.tpl

Почтовая форма сообщения пользователю об удачной регистрации

phpshop/lib/templates/order/status.tpl

Почтовая форма сообщения пользователю о смене статуса заказа

Формы печатных бланков

Файл
Назначение

phpshop/lib/templates/print/account.tpl

Печатная форма счета на оплату

phpshop/lib/templates/print/cart.tpl

Печатная форма предварительного заказа в корзине

phpshop/lib/templates/print/price.tpl

Печатная форма прайс-листа

phpshop/lib/templates/print/receipt.tpl

Печатная форма квитанция Сбербанка

phpshop/admpanel/order/forms/invoice.php

Печатная форма счета-фактуры

phpshop/admpanel/order/forms/order.php

Печатная форма бланка заказа

phpshop/admpanel/order/forms/receipt.php

Печатная форма товарного чека

phpshop/admpanel/order/forms/torg-12.php

Печатная форма ТОРГ-12

phpshop/admpanel/order/forms/warranty.php

Печатная форма гарантийного обязательства

Формы с галочками соглашения на обработку персональных данных

Файл
Назначение

phpshop/templates/имя_шаблона/forma/page_forma_list.tpl

Форма сообщения с сайта

phpshop/templates/имя_шаблона/modules/returncall/templates/returncall_window_forma.tpl

Форма модуля обратного звонка

phpshop/templates/имя_шаблона/modules/oneclick/templates/oneclick_window_forma.tpl

Форма модуля быстрый заказ

phpshop/templates/имя_шаблона/order/main_order_forma.tpl

или

phpshop/templates/имя_шаблона/order/main_order_forma_no_auth.tpl

Форма заказа

phpshop/templates/имя_шаблона/gbook/gbook_forma_otsiv.tpl

Форма отзыва

phpshop/templates/имя_шаблона/users/register.tpl

Форма регистрации пользователя

Для снятия проставленной галочки следует удалить из элемента <input type="checkbox" name="rule"> атрибут checked="".

Изменение языкового файла

Все надписи в шаблонах имеют вид {строка} и перед выводом проходят обработку через библиотеку локализации. Вывод данных зависит от выбора языка в настройках дизайна.

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

Например, если стоит язык по умолчанию русский, то файл перевода внешней части витрины находится по ссылке: /phpshop/locale/russian/shop.ini, а внутренней панели управления: /phpshop/locale/russian/admin.ini

Перевод JavaScript сообщений витрины находится в файле /phpshop/locale/russian/template.js, а внутренней /phpshop/locale/russian/gui.js

Добавления языка

Для добавления нового языка следует скопировать папку /phpshop/locale/russian_utf/ в /phpshop/locale/newlang/ и перевести содержимое описанных выше файлов через любой онлайн переводчик (Google Переводчик или Яндекс Переводчик). Кодировка файлов в папке с новым языком должна быть UTF-8.

Выбрать новый язык в настройках панели управления Настройки - Основные.

PHP код

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

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

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

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

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

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

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

Дополнительные параметры аргументов функции __hide(name, type, class)

  • name - имя переменной для проверки

  • type = parser - проверка переменной шаблона, используется по умолчанию.

  • type = cookie - проверка переменной куки

  • type = session - проверка переменной сессии PHP $_SESSION

  • type = global - проверка глобальной переменной PHP $GLOBALS

  • type = requet - проверка переменной PHP $_REQUEST

  • type = isset - проверка наличия переменной шаблона

  • type = empty - проверка на не пустую переменную шаблона

  • class - имя класса для вывода в случаи срабатывания условия, используется по умолчанию hide d-none

Last updated