Prestashop. От новичка новичку.

Это руководство поможет создать новую тему или изменить уже существующую (например, стандартную) тему вашего магазина Prestashop. Впрочем, это руководство будет вам полезно только в том случае, если вы, как и я, мало что смыслите в php, smarty и css. Но оно совершенно точно поможет вам разобраться в самом устройстве шаблонов Prestashop и получить опорную точку для изучения этого вопроса.

Это руководство - мой перевод поста с англоязычного блога. Адрес источника: http://www.techietips.net/creating-prestashop-13-theme.html

Требования: К этому руководству нет требований, тем не менее, я рекомендую вам установить Prestashop на свой домашний компьютер (или хостинг), чтобы учится на практических шагах. Для редактирования файлов лучше использовать не классический Блокнот (Notepad), а любой другой удобный и простой текстовый редактор, такой как Notepad++.

Создайте макет вашего дизайна

Прежде чем вы сможете создать щаблон Prestashop, вам нужно создать макет этого шаблона (темы). Используйте для этого любой удобный вам графический редактор, будь это Photoshop или Paint. Можете нарисовать макет на листке бумаге, главное – визуализировать то, что вы хотите реализовать. Автор оригинала этой статьи использовал Linkscape, в котором и создал макет, от которого мы будем отталкиваться:

Довольно простой макет, который красят только изображения. Но наше руководство и должно быть как можно проще, чтобы вы могли усвоить сами принципы создания шаблонов. Итак, у нас есть шапка сайта и зона из двух колонок. Левая колонка содержит навигацию и другие блоки, а правая, более широкая - контент (товары). В шапке сайта отображается название нашего магазина, строка поиска и несколько опций. Итак, у нас есть цель – создать шаблон для Prestashop этого макета.

Создание папки темы с необходимой структурой

Создайте папку темы (шаблона) в папке «themes». Например, если вы установили Prestashop в корень вашего сервера Apache, адрес будет выглядеть примерно так «C:\ server\www\themes». Одним словом это подпапка корневой папки вашего Prestashop. Назовём её «newtheme». А в ней создадим ещё 5 подпапок «css», «img», «js», «lang» и «modules». В результате вы должны получить подобную папку:

• Папка «css» - содержит css-файлы вашего шаблона
• Папка «img» - содержит любые изображения, такие как кнопки и фоновые рисунки.
• Папка «lang» - содержит все языки и переводы, которые должна использовать ваша тема.
• Папка «js» - содержит все сценарии JavaScript, такие как jquery и т.д.
• Папка «modules» - специальная папка, в которую вы помещаете файлы шаблона, использующиеся для кастомизации модулей (т.е. изменения внешнего вида модулей под ваш шаблон). Внесение файлов шаблона в эту папку заставит Prestashop заместить (т.е. игнорировать) стандартный шаблон модуля. Вам может и не понадобится эта папка, но это вы решите позже.

Создайте файл index.php

Напишите ваш макет в HTML

Prestashop для построения страницы по шаблону использует систему Smarty. Эта система разработана для облегчения создания тем и шаблонов сайтов. Эти файлы тем похожи на HTML-файлы, различие лишь в том, что они содержат дополнительный smarty-код. Страница темы Prestashop в своей базовой форме состоит из трёх отдельных частей шаблона smarty. Шапки (header), зоны контента (content) и подвала (footer). Они управляются файлами шаблона smarty: «header.tpl», «index.tpl» и «footer.tpl». Поэтому тема prestashop в самой базовой форме выглядит так:

Создать эти три части и заставить их работать в одном шаблоне может быть довольно непросто. Чтобы облегчить эту задачу, я собираюсь шаблон в html-файле под названием index.html. После этого я могу разбить его на три части шаблона: «header.tpl», «index.tpl» и «footer.tpl».

Создайте html-файл

Как видите, это набор div-тегов CSS, который разделяет страницу. Обратите внимание на DIV без комментариев с ID «wrapper», который содержит другие DIV-ы. Этот DIV выполняет функцию контейнера для DIV-ов нашего шаблона. Ещё одна строка без комментариев:

Эта строка указывает браузеру использовать файл global.css для конфигурации стилей страницы. Поэтому теперь мы создадим этот файл.

Создайте файл global.css

Сохраните этот файл и откройте файл «index.html» в своём браузере. Вы должны увидеть страницу наподобие этой:

В это с трудом вериться, но именно этот шаблон будет использовать ваша тема для Prestashop. И теперь, когда у нас есть базовые файлы html и css, мы, наконец, можем начать создание своей темы для Prestashop.

Если вам понятны все описанные шаги, вы можете скачать все созданные файлы одним архивом: Создание шаблона Prestashop. Шаг 1.

Конвертирование нашего базового html-шаблона в шаблон Prestashop

Мы уже создали базовый шаблон, который назвали index.html. Теперь нам нужно добавить в него составные части Prestashop, чтобы создать из него работоспособную тему.

Создание шапки (header) страницы, с помощью файла header.tpl

Из этого кода видно, что «index.php» открывает другой файл – «header.php», что ясно по этой строке:

Поэтому давайте посмотрим, что делает файл «header.php». Взглянув внутрь файла, мы понимаем что он мало что делает в отношении шаблона, но ключевой нужный нам момент состоит в том, что он вызывает первую часть шаблона, файл «header.tpl» (в последней строке кода). Что это значит? Как мы упоминали выше, Prestashop использует систему шаблонов под названием «Smarty». Эта строка сообщает системе smarty поискать в папке используемой на данный момент темы Prestashop файл «header.tpl» и отобразить его на странице.

Этот код как бы говорит: «Smarty $smarty , пожалуйста отобрази -> display файл header.tpl, который находится в моей папке текущей темы Prestashop _PS_THEME_DIR_ ). Из этого понятно, что Prestashop ожидает увидеть в папке своей темы файл header.tpl, поэтому нам нужно его создать. Давайте сделаем это в корневой папке нашей темы. Создадим текстовый файл, и сохраним его под названием «header.tpl», после чего впишем в него следующий код:

Какие функции выполняет header.tpl?

Это очень важный файл нашей темы. Поэтому давайте прервемся и объясним, в состоят его задачи. Эта информация крайне полезна для создания собственных шаблонов Prestashop.

Это обычное объявление типа документа, которое может содержать любая html-страница. Она используется браузером для определения версии языка разметки, из которого состоит страница. Больше об этом вы можете узнать на сайте www.w3.org/, однако эта информация вряд ли будет вам особо полезна. Единственный специфический для Prestashop элемент объявления это

Это переменная шаблона smarty, которая позволит браузеру определить язык страницы в зависимости от настроек вашего Интернет-магазина. Таким образом, если настройки вашего магазина будут утверждать, что он использует английский язык, элемент будет заменён параметром EN, и только после этого отправлен браузеру.

Следующая важная часть это секция «head» - отрывок которой приведён ниже:

говорят smarty вывести ссылки к каждому css-файлу, находящемуся в папке нашей темы, в том числе в подпапках. Это «подключает» все css-файлы ко всем html-страницам. Следующая часть секции «head» это строка < $HOOK_HEADER >, которая говорит smarty отобразить все модули, расположенные в позиции хука "header" нашего магазина.

Поначалу это может сбить вас с толку, ведь хук header на самом деле не относится к шапке страницы, в которой отображается название магазина, строка поиска и переключатель языка, а влияет лишь на секцию . Но это полезно для тех модулей, которые требуют присутствия своего кода в этой секции. Узнать больше о секции вы можете по этому адресу: http://www.w3.org/TR/html401/struct/global.html.

Теперь перейдём к html-зоне файла «header.tpl». У нас есть наш первый DIV, который мы используем в качестве контейнера всей нашей страницы. Поэтому мы и назвали его «wrapper» (т.е. упаковка, обертка). Внутри этого DIV-а находится второй DIV, под названием «header». На это стоит обратить внимание, ведь в нём находится ещё одни хук Prestashop, под названием «».

Любые модули, добавленные в позицию «top of the pages» (т.е. шапка страниц). Эта позиция и ассоциированные с ней модули (привязанные к ней), отображаются в этой части панели управления магазина (т.е. его «админка», back office):

В стандартной теме магазина в эту позицию входят строка поиска, переключатель языка и несколько других элементов (смотрите изображение ниже).

На этом заканчивается DIV «header». Теперь мы сможем корректно отобразить модули, предназначенные для шапки страниц сайта.

Просмотрим файл «header.tpl» ниже, и увидим левую колонку шаблона:

Здесь мы расположим наш хук для левой колонки сайта, под названием «left column». Думаю, вы уже догадались, что здесь будут отображаться модули, предназначенные для левой колонки. Например, модуль категорий. На этом файл «header.tpl» заканчивается. Это весьма важный файл, так как он отображает три важных зоны модулей: «hook_header», «hook_top» и «hook_left_column». По идее, вы уже можете понять, как именно он это делает.

говорит нам о том, что файл index.php хочет открыть файл index.tpl. Поэтому давайте заглянем в файл index.tpl стандартной темы prestashop. Он гораздо проще файла header.tpl и содержит лишь одну простую строку, с командой для системы smarty.

Как вы уже догадались, этот код отобразит все модули, привязанные к позиции «Homepage content», то есть к позиции контента главной страницы. По умолчанию это содержит модули «Home text editor» и «Featured Products on the homepage» (во всяком случае, на время написания статьи). Поэтому давайте просто скопируем файл index.tpl в папку нашей собственной темы, «newtheme», чтобы он тоже содержал команду .

Теперь давайте перейдём к последней секции страницы – футеру (или подвалу) страницы, т.е. файлу footer.tpl.

В этом хуке отображаются все модули, связанные с позицией «Footer». Поэтому давайте создадим файл под названием footer.tpl в корневой папке нашей темы «newtheme», и вставим в него следующие команды:

Это завершит наш шаблон. Тем не менее, это самый минимум, необходимый для темы Prestashop. Теперь мы должны включить использование нашей темы в панели управления магазина (админке), и начать работать над тем, чтобы заставить её красиво выглядеть.

Если вам понятны все проделанные шаги, вы можете скачать все созданные на текущий момент файлы одним архивом: Создание шаблона Prestashop. Шаг 2.

Создание изображения preview.jpg и подключение темы

Просто сохраните этот файл в корневую папку вашей темы «newtheme». К этому времени она должна выглядеть примерно так:

Теперь вернитесь в админку вашего сайта, выберите вкладку «Preferences», в которой выберите вкладку «Appearance». В отобразившемся окне настроек выберите нашу тему «newtheme».

Раскрашиваем и украшаем!

В этом с трудом можно узнать магазин Prestashop. Поэтому настало время сделать его приятней на вид с помощью CSS.

С чего начать?

Теперь я собираюсь загрузить собственный логотип. Я буду использовать этот логотип, поэтому вы можете взять его же. Для этого сохраните его на своём компьютере, и загрузите на сайт с помощью административной панели.

Теперь, после загрузки логотипа, нам нужно изменить шапку с помощью CSS и изображения градиентного фона.

Поэтому сохраните это изображение в подпапку «img» папки вашей темы «newtheme». Его мы и будет использовать для шапки нашего магазина. Для этого нам нужно изменить наш файл «global.css». Откройте его и замените секцию, помеченную как «header», этим кодом:

Теперь ваш магазин в браузере должен выглядеть немного лучше, примерно так:

И раз уж мы создаем фоны, давайте сделаем один для нашей поисковой формы. Готовый рисунок можно скачать здесь.

Скопируйте этот файл, «block_search_bg.png», в папку «img» вашей темы. Теперь добавьте следующий код в наш файл «global.css».

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

Вот только находится она совершенно не в том месте! Давайте исправим это. Для начала я хочу заключить все свои модули позиции «top of pages» в DIV под названием "inner_header". Это поможет мне управлять шапкой сайта (к слову, я далеко не эксперт в области HTML и CSS, поэтому, возможно, существуют куда лучшие возможности управления видом страницы). Давайте добавим этот DIV в файл «header.tpl». Откройте этот файл и замените его содержимое этим кодом:

А это уже выглядит гораздо лучше, чем то, с чего мы начинали!

Замещение внешнего вида модуля

Чтобы настроить внешний вид этого модуля, мы можем поступить двумя способами. Мы можем пойти прямо в папку «modules», расположенную в корневой папке Prestashop, и из неё зайти в папку нужного нам модуля (в данном случае – «blockcurrencies») и изменить находящийся в ней .tpl файл (в данном случае – «blockcurrencies.tpl»). Или мы можем пойти более правильным путём, и заместить стандартный модуль, создав в подпапке «modules» нашей темы (т.е. папки «newtheme») папку «blockcurrencies». В итоге мы получим папку с таким путём: «корневая-папка-prestashop/themes/newtheme/modules/blockcurrencies». Причина, по которой мы будем делать это более «правильным» способом замещения заключается в том, что если мы захотим изменить наш магазин в будущем, нам не придется беспокоиться о том, что мы изменили «ядро» Prestashop. Все наши изменения останутся в папке нашей темы, и не затронут стандартные файлы. После этого создайте в этой папке файл под названием «blockcurrencies.tpl» и вставьте в него html и smarty код, приведённый ниже. Это слегка модифицированная версия кода из стандартного файла модуля (т.е. из файла «корневая-папка-prestashop /modules/blockcurrencies.tpl»). Мы немного изменили его для того, чтобы он лучше подходил к нашей теме (и чтобы продемонстрировать, что такое замещение модуля).

Теперь проделайте то же самое с модулем blockuserinfo – создайте папку «blockuserinfo» в папке «modules» вашей темы, а в ней – файл «blockuserinfo.tpl». После этого вставьте в него следующий код:

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

На этом, пожалуй, стоит закончить. Мы получили сносно выглядящую шапку и поняли, что внешний вид сайта по большей части контролируется с помощью файлов .tpl (являющихся, по сути, помесью html и smarty) и CSS. Поэтому вам стоит немного изучить CSS – самостоятельно, или с помощью знающих людей на форумах и в различных сообществах. Я надеюсь, что эта статья позволит вам взглянуть на стандартную тему Prestashop совершенно в новом свете, и вы научитесь понимать, что стоит за картинкой, которую вы перед собой видите. А если вы хотите продолжить работу над нашей темой «newtheme» - вы можете скачать её одним архивом.