марта 12, 2012

PrestaShop: создание шаблона. Практика.

Создание шаблона для PrestashopУже около года лежит в черновиках статья полезная для новичков, которую я обещала опубликовать ещё в конце 2010 года. Исправляюсь, публикую.
Приступаем к практической части, напомню, теоретическая статья о хуках, ранее опубликована на блоге web-esse.ru: “Создание шаблона для PrestaShop. Теория.”.

Краткая подготовительная инструкция по рутинной работе при создании шаблона PrestaShop.
1 Копируем файлы из дефолтного в папку с нашей темой, если картинки будут все свои – не забываем почистить images и css стили.
2 Меняем preview (180×220) – чтоб можно было переключиться на новую тему в админке
3 Включаем тему: “Модули -> Темы” (Modules – Themes)
4 Меняем позиции для модулей в админке, например, переносим корзину. Добиваемся того, чтоб все блоки вывелись в нужных местах. Если не знаете как переместить модуль PrestaShop из одного блока в другой – читаем по ссылке инструкцию (правда этот пост писался для версии 1.3, но механизм переноса не изменился)

На данном этапе работы необходимо добиться того чтоб модули были расставлены по своим блокам.

Часто бывает, что разработчики не предусмотрели возможность переноса модуля в один из хуков. Например, Корзину нельзя перенести в HOOK_TOP.
Исправляется это легко, но потребуется поработать с основным php файлом вашего модуля – название файла такое же как и папки, поэтому найти его не сложно.
Продолжая аналогию с корзиной: /modules/blockcart/blockcart.php

function hookTop($params){
return $this->hookLeftColumn($params); – эта строка копирует общее правило из кода модуля.
}

Вместо hookLeftColumn вписываем то, что поддерживает изначально редактируемый модуль – грубо говоря тот хук куда он помещается при установке.

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

	function hookLeftColumn($params)
	{
		return $this->display(__FILE__, 'blockpermanentlinks.tpl');
	}
	function hookTop($params)
	{
		return $this->display(__FILE__, 'blockpermanentlinks-header.tpl');
	}

Создание нового хука. Иногда бывает, что не хватает существующих хуков для вывода модуля, тогда поступаем следующим образом (если вы новичёк в веб-разработке, лучше перепланируйте расположение модулей и задействуйте существующие, т.к некорректные действия могут привести к неработоспособности магазина):
1. Добавляем запись в БД – таблица ps_hook
2. Редактируем classes/FrontController.php
public function displayHeader() – добавляем ‘HOOK_top_level2′ => Module::hookExec(‘top_level2′)
теперь хук можно вставлять на страницу
3. Добавляем в новь созданный хук нужные модули через админку, не забудьте добавить поддержку этого хука в классе модуля – см. инструкцию выше.

Как видите создание шаблона для prestashop на такое уж и сложное занятие, главное быть знакомым с основами вёрстки и интересоваться новым..


Комментарии

  • Tim olien

    Добрый день! спасибо за статьи. Но не могу разобраться как добавить правую колонку в шаблон? 

    • В дефолтном шаблоне она есть по умолчанию, просто скопируйте код от туда (файл footer.tpl)

  • Milansa

    Здравствуйте. Очень полезная информация. Только не нашла нигде как поменять цвет меню шаблона и картинки..

    • цвет меню очень расплывчатое понятие)
      цвет текста или фон? картинок тоже много.

      • Milansa

         цвет фона (кнопочек, панелей) картинки – в шапке сайта (логотип, слайдеры с рекламой) .. я новичок

  • Korso

    А вот такой вопрос по поводу корзины: как корзину из левой части перенести в правую чтобы она как-бы приклеилась возле правой части экрана. Например вот так: http://livedemo00.template-help.com/opencart_40287/index.php

    • Сам модуль можно не переносить в правую колонку, “приклеивание” можно сделать через стиль position: fixed.