Как работать с кодом шаблона?
Доступ к коду шаблона:
По ссылке ваш-магазин.ru/manager/page/Template
- Браузерный интерфейс для редактирования разметки, css, js, картинок
- И ftp доступ для прямого редактирования
Страницы:
Разметка шаблона (tpl)
Принцип прост.«tpl файлы» - это HTML код отдельных частей шаблона, с вставками тегов в {фигурных скобках}, на место тегов в отображении подставляется динамическое содержимое. Если нужно вставить НЕпеременную с фигурными скобками (например скрипт, содержащий фигурные скобки), то этот код надо окружить тегами {literal} здесь ваш код {/literal}.
Основные теги которые могут вам понадобится:
{$название переменной} список переменных
- Подставляет на место тега значение соответствующей переменной шаблна .
{if (условие)} 111 {/if}
- Выводит 111 если выполняется условие
{if (условие)} 111 {else} 222 {/if}
- Выводит 111 если выполняется условие, 222 если оно не выполняется.
Вот и вся основная информация по управлению разметкой.
- Head.tpl - код раздела Head (если есть необходимость, создаёте файл в таком формате и заливаете на фтп);
- Код раздела Body (index.tpl) - (отвечает за содержимое верхней, боковых, нижней части шаблона)
- Каталог (products.tpl) - (отвечает за содержимое категорий товаров: блоки товара, фильтр товара, навигационные кнопки страниц, описание категории)
- Главная страница (start_page.tpl) - (отвечает за содержимое главной страницы: блоки товаров, описание главной страницы)
CSS
- Хранит в себе файлы стилевых описаний HTML тегов (т.е через .css мы редактируем все элементы сайта, меняем их внешний вид -размер, цвет, шрифт и т.д.)
Чтобы отредактировать карточку товара или любой другой блок, закрытый для прямого редактирования - смотрим её css стил в permanent.css и переносим этот код, с изменением в style.css
Картинки
- Папка с графическими элементами дизайна (логотипы, кнопки, и др.)
- URL адрес до папки картинок «ваш-сайт.ру/design/images/ваша-картинка»
Как найти код элемента?
В каждом браузере присутствует функция «Просмотр кода элемента»: (*название может отличаться для каждого браузера)
Для того, чтобы найти код конкретного элемента - кликаем по эл-ту (прим. картинке), и в открывшемся окне кода у нас будет выделен блок с данным эл-том
- Таким образом мы видим что данное фото находится в .tpl файле в блоке (3) «<div class=«photo-big»…>» и в таблице стилей .css (4) - «.photo-big { width:267…}»
В этих же окошках можем менять, добавлять параметры (изменения происходят в реальном времени).
После того, как подогнали параметры их нужно перенести в соответствующий файл сайта.
Переходим в менеджер-панель > открываем соответствующий файл > находим нужный блок > меняем параметры > сохраняем:
