августа 22, 2013

Создание шаблона для модуля PrestaShop.

В предыдущем уроке на блоге web-esse.ru мы установили модуль PrestaShop, но никакую информацию он пока что не выводит. В сегодняшнем уроке мы устраним этот пробел и создадим страницу шаблона для нашего модуля.

Урок 4

1. Размещаем tpl файл шаблона в папке хуков (/views/templates/hook/), сам файл называем так же как модуль. Если предполагается использовать несколько хуков с разными шаблонами, например, выводить информацию в левую колонку и шапку – то для файла даём составное название: модуль_хук.tpl
Наш файл будет содержать следующий код:

<div id="simple" class="block">
{$simpl_var}<br />
{$simple_message}<br />
<a href="{$simple_link}" title="Click this link">Click me!</a>
</div>

Для написания кода шаблона следует использовать SMARTY синтаксис. Если говорить кратко о этой технологии: движок парсит шаблон, находит динамические элементы и заменяет их статичными аналогами (т.е делает все вычисления и подстановки) и только после этого передаёт результат браузеру. Динамические элементы всегда заключаются в фигурные скобки {}. В нашем примере: {$simpl_var}, {$simple_link}, {$simple_message} – смарти объекты.

PrestaShop позволяет использовать заранее заданные глобальные переменные:
img_ps_dir – путь до общей папки изображений.
img_cat_dir\img_lang_dir\img_prod_dir\img_manu_dir\img_ship_dir – путь к папке изображений категорий \ переводов \ товаров \ производителей \ курьеров
img_dir – папка с темами
css_dir\js_dir – стили \ скрипты текущей темы
modules_dir \ mail_dir \ tpl_dir- путь к папке модулей \ писем \ текущей теме
lang_iso – ISO code выбранного языка.
come_from – URL откуда пришёл посетитель.
shop_name – название магазина
cart_qties – количество товара в корзине.
currencies – массив текущих переменных
logged – индикатор залогинености пользователя (true если залогинен)
page_name – имя страницы (index – главная, product – товар и т.п)
customerName – имя залогиненного клиента

Для добавления комментария нужно так же использовать фигурные скобки: {* текст комментария *}

2. Сообщаем PrestaShop, что нам нужно вывести шаблон для левой колонки, для этого используем специальный метод.
public function hookDisplayLeftColumn($params){} – метод в бутстрап файле модуля, который “отвечает” за работу с шаблоном модуля

Вся информация в шаблон модулю передаётся с помощью специального метода assign. В нашем случае мы передаём в шаблон строковые значения переменных, но мы можем передавать и более сложные сущности: массив продуктов, результат выборки из БД и т.п

		$this->context->smarty->assign(
				array(
						'simpl_var' => Configuration::get('SIMPL_VAR'),
						'simple_message' => $this->l('This is a simple text message'),
						'simple_link' => $this->context->link->getModuleLink('simple', 'display'),
					)
		);

Название шаблона передаётся методу display() – именно поэтому использование имени файла имеет только рекомендательный характер. Поиск шаблона автоматически производится в папке /views/templates/hook/

return $this->display(__FILE__, 'simple.tpl');

3.Для того чтоб модуль можно было перекидывать между колонками – добавим поддержку хука правой колонки:

public function hookDisplayRightColumn($params)
{
  return $this->hookDisplayLeftColumn($params); // Метод hookDisplayRightColumn возвращает результат выполнения описанного ранее метода LeftColumn
}

4. Если модуль будет использовать собственную таблицу стилей, то добавляем сам файл в папку стилей, а его вызов в соответствующий хук Header:

public function hookDisplayHeader()
{
  $this->context->controller->addCSS($this->_path.'css/simple.css', 'all');
}

Для примера так же пропишем простенький стиль в файле:

#simple{
	border: 1px solid red;
}

5. В нашем случае не нужно подключать скрипт, но нужно отметить, что это делается тут же

 $this->context->controller->addJS($this->_path.'js/simple.js', 'all');

Подведу итог урока: теперь наш модуль имеет собственный шаблон и таблицу стилей, мы можем вывести любую нужную нами информацию. Но эту информацию приходится по прежнему менять вручную в шаблоне, как вывести отдельные текстовые поля в админке, я расскажу на следующем уроке.


Комментарии

  • megawolder

    Спасибо за инструкцию! Вывел на страницу текст через собственный модуль, теперь редактировать гораздо удобнее )