Создание шаблона (темы) для 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, изображений, сценариев JavaScript. Папка «modules» будет содержать замещающие файлы модулей (подробней о них будет рассказано позже). За исключением папки «modules» остальные папки можно назвать как угодно. В общем-то, за исключением папок «modules» и «lang» вам вообще не обязательно использовать папки – вы просто можете сложить все файлы темы в корень папки «newtheme». Они используются исключительно для организации файлов.

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

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

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

<?php   header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GMT");   header("Cache-Control: no-store, no-cache, must-revalidate"); header("Cache-Control: post-check=0, pre-check=0", false); header("Pragma: no-cache");   header("Location: ../"); exit; ?>

Подсказка! Вы можете просто скопировать его из стандартной темы Prestashop

Напишите ваш макет в 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-файл

Давайте создадим index.html и поместим его в корень папки «newtheme». Теперь скопируйте следующий html-код в этот файл:

<link rel="stylesheet" type="text/css" href="css/global.css" media="screen, projection">   <div id="wrapper">   <div id="header"> presta header </div> <!-- End header -->   <div id="left"> left column </div> <!-- End left-->   <div id="main"> </div> <!-- End main --> main column <div id="footer"> footer </div> <!-- End footer -->   </div> <!-- End Wrapper -->

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

<link rel="stylesheet" type="text/css" href="css/global.css" media="screen, projection">

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

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

Создайте новый текстовый файл в папке «css» (которую мы создали ранее) нашей темы («newtheme»), и сохраните его под именем «global.css». Откройте его, и вставьте следующий код:

#wrapper { width: 960px margin:0 auto; }   #header { background:#666; height: 80px; } #nav { background:#c99; }   #left { background:#c9c; width:250px; float:left; }   #main { background:#9c9; width: 710px; float:right; }   #footer { background:#cc9; clear:both; }

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

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

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

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

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

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

Первый файл, к которому обращается Prestashop, когда начинает работу (т.е. когда кто-то заходит на любую из страниц сайта) это «index.php». Если мы посмотрим на содержимое этого файла (а он находится в корневой папке Prestashop), то увидим следующий код:

Index.php

<?php   include(dirname(__FILE__).'/config/config.inc.php');   if(intval(Configuration::get('PS_REWRITING_SETTINGS')) === 1) $rewrited_url = __PS_BASE_URI__;   include(dirname(__FILE__).'/header.php');   $smarty->assign('HOOK_HOME', Module::hookExec('home')); $smarty->display(_PS_THEME_DIR_.'index.tpl');   include(dirname(__FILE__).'/footer.php');   ?>

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

include(dirname(__FILE__).'/header.php');

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

$smarty->display(_PS_THEME_DIR_.'header.tpl');

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{$lang_iso}">   <head>   <!-- Include CSS Files (in particular our global.css file --> {foreach from=$css_files key=css_uri item=media} <link href="{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" /> {/foreach} <!-- End Include CSS Files -->     <!--Include the Hook Header. This is the area where modules in the hook known as header are outputed --> {$HOOK_HEADER} <!-- End Include Hook Header -->   </head>   <body>   <div id="wrapper"> <div id="header"> presta header <!--Include the Top Hook. This is the area where modules in the hook known as top are outputed --> {$HOOK_TOP} <!-- End Include Top Hook --> </div> <!-- End header -->   <div id="left"> left column <!--Include the Left Hook. This is the area where modules in the hook known as left are outputed --> {$HOOK_LEFT_COLUMN} <!-- End Include left Hook --> </div> <!-- End left column Div-->

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

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

Первая часть. Объявление типа документа (Document Type Declaration).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{$lang_iso}">

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

{$lang_iso}

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

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

<head>   <!-- Include CSS Files (in particular our global.css file --> {foreach from=$css_files key=css_uri item=media} <link href="{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" /> {/foreach} <!-- End Include CSS Files -->     <!--Include the Hook Header. This is the area where modules in the hook known as header are outputed --> {$HOOK_HEADER} <!-- End Include Hook Header -->   </head>

Вот эти строки:

{foreach from=$css_files key=css_uri item=media} <link href="{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" /> {/foreach}

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

<!--Include the Hook Header. This is the area where modules in the hook known as header are outputed --> {$HOOK_HEADER} <!-- End Include Hook Header -->

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

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

<div id="wrapper"> <div id="header"> presta header <!--Include the Top Hook. This is the area where modules in the hook known as top are outputed --> {$HOOK_TOP} <!-- End Include Top Hook --> </div> <!-- End header -->

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

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

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

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

<div id="left"> left column <!--Include the Left Hook. This is the area where modules in the hook known as left are outputed --> {$HOOK_LEFT_COLUMN} <!-- End Include left Hook --> </div> <!-- End left column Div-->

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

Вторая часть. Основной контент в файле Index.tpl

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

$smarty->assign('HOOK_HOME', Module::hookExec('home')); $smarty->display(_PS_THEME_DIR_.'index.tpl');

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

{$HOOK_HOME}

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

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

Третья часть. Завершение страницы с помощью файла footer.tpl

Этот файл сложнее чем index.tpl, но проще, чем header.tpl. Он закрывает нижнюю часть html-страницы, и добавляет хук «footer»:

{$HOOK_FOOTER}

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

</div> <!-- END center_column -->   <!-- Footer --> {$HOOK_FOOTER} </div> <!-- END footer_column -->   </div> <!-- END page -->     </body> </html>

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

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

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

Создайте пустой файл preview.jpg в вашем любимом графическом редакторе (напр. Photoshop) и сохраните его в корневой папке вашей темы («newtheme»). Как правило, этот файл представляет собой скриншот подключенной темы, и в идеале должен быть размера 150х150 пикселов. Но, так как наша тема пока выглядит далеко не впечатляюще, мы используем либо пустой файл, либо заранее подготовленный (ссылка), который можно увидеть ниже:

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

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

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

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

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

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

Он выглядит настолько ужасно, что я даже не знаю, с чего начать! Что ж, давайте поработаем над шапкой сайта – это будет самое логичное место для начала работы. Давайте зайдем в настройки расположения модулей позиции «Top of pages» (т.е. шапки сайта), чтобы убедится, что наши модули подключены и расположены в верном порядке. Чтобы ваш сайт визуально соответствовал этому руководству, ваша позиция модулей «Top of pages» должна выглядеть так же:

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

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

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

#header { background: #666 url("../img/header_bg.png"); height: 125px; padding: 5px; }

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

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

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

#searchbox{ background: url("../img/block_search_bg.png") scroll right top #E5E6E7; height: 50px; width: 310px; float: right; border: 1px solid #333; }   #search_block_top input#search_query { margin-left: 5px; margin-top: 3px; width: 15em; height: 1.5em;   } #search_block_top .button { background: none repeat scroll 0 0 transparent; border: 0 none; color: #FFFFFF; margin-top: 5px; }

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{$lang_iso}">   <head>   <!-- Include CSS Files (in particular our global.css file --> {foreach from=$css_files key=css_uri item=media} <link href="{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" /> {/foreach} <!-- End Include CSS Files -->     <!--Include the Hook Header. This is the area where modules in the hook known as header are outputed --> {$HOOK_HEADER} <!-- End Include Hook Header -->   </head>   <body>   <div id="wrapper"> <div id="header"> <div id="logo"> <h1 id="logo"><a href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}"> <img src="{$img_ps_dir}logo.jpg" alt="{$shop_name|escape:'htmlall':'UTF-8'}" /></a></h1> </div> <!--End Logo Div --> <!--Include the Top Hook. This is the area where modules in the hook known as top are outputed --> <div id="inner_header"> {$HOOK_TOP} <!-- End Include Top Hook --> </div> </div> <!-- End header -->   <div id="left"> left column <!--Include the Left Hook. This is the area where modules in the hook known as left are outputed --> {$HOOK_LEFT_COLUMN} <!-- End Include left Hook --> </div>

Теперь сохраните его и откройте файл «global.css», чтобы добавить (но не заменить) в него этот код:

#header_user{ float: right; margin: 0; }   #header_links{ float: right; margin: 0; margin-top: 15px; padding: 0; }   #header_links li, a { text-decoration: none; color: white; }   #languages_block_top { float: right; color: white; margin: 0; padding: 0; }   #currencies_block_top{ float: right; color: white; margin: 0; padding: 0; }   #currencies_block_top p{ float: left; }   #currencies_block_top a ,li{ text-decoration: none; color: white; list-style-type: none; display: inline; }     #inner_header { float: left; text-align: right; width: 85%; font-size: .8em; }

Теперь снова откройте страницу вашего магазина, и сможете увидеть примерно следующее:

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

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

Чтобы шапка нашего сайта выглядела ещё лучше, нам придется поработать над внешним видом некоторых модулей позиции «top of pages». Мы собираемся вид двух модулей шапки сайта. Для начала займемся модулем «blockcurrencies», который выводит на вашу страницу переключатель отображаемой валюты.

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

<!-- Block currencies module --> <div id="currencies_block_top"> <form id="setCurrency" action="{$request_uri}" method="post">   <input type="hidden" name="id_currency" id="id_currency" value=""/> <input type="hidden" name="SubmitCurrency" value="" />     <ul> {l s='Currency' mod='blockcurrencies'} {foreach from=$currencies key=k item=f_currency} <li {if $id_currency_cookie == $f_currency.id_currency}class="selected"{/if}> <a href="javascript:setCurrency({$f_currency.id_currency});" title="{$f_currency.name}">{$f_currency.sign}</a> </li> {/foreach} </ul>   </form> </div> <!-- /Block currencies module -->

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

<!-- Block user information module HEADER --> <div id="header_user">   <ul id="header_nav"> {l s='Welcome' mod='blockuserinfo'}, {if $logged} <span>{$customerName}</span> (<a href="{$base_dir}index.php?mylogout" title="{l s='Log me out' mod='blockuserinfo'}">{l s='Log out' mod='blockuserinfo'}</a>) {else} <a href="{$base_dir_ssl}my-account.php">{l s='Log in' mod='blockuserinfo'}</a> {/if} <li id="shopping_cart"> <a href="{$base_dir_ssl}order.php" title="{l s='Your Shopping Cart' mod='blockuserinfo'}">{l s='Cart:' mod='blockuserinfo'}</a> <span class="ajax_cart_quantity{if $cart_qties == 0} hidden{/if}">{$cart_qties}</span> <span class="ajax_cart_product_txt{if $cart_qties != 1} hidden{/if}">{l s='product' mod='blockuserinfo'}</span> <span class="ajax_cart_product_txt_s{if $cart_qties < 2} hidden{/if}">{l s='products' mod='blockuserinfo'}</span> {if $cart_qties > 0} <span class="ajax_cart_total{if $cart_qties == 0} hidden{/if}"> {if $priceDisplay == 1} {convertPrice price=$cart->getOrderTotal(false, 4)} {else} {convertPrice price=$cart->getOrderTotal(true, 4)} {/if} </span> {/if} <span class="ajax_cart_no_product{if $cart_qties > 0} hidden{/if}">{l s='(empty)' mod='blockuserinfo'}</span> </li> <li id="your_account"><a href="{$base_dir_ssl}my-account.php" title="{l s='Your Account' mod='blockuserinfo'}">{l s='Your Account' mod='blockuserinfo'}</a></li> </ul> </div> <!-- /Block user information module HEADER -->

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

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