Создание двух-колоночного шаблона
Как вы успели заметить мой сайт двух-колоночный и в этой статье я поделюсь как это делается. Обратите внимание, что руководство предназначено для Prestashop 1.5, если вы хотите попробовать в версии 1.4, не копируйте слепо код, а делайте все по аналогии.
Для того что бы попробовать этот способ предлагаю вам создать копию шаблона, который вы хотите сделать двух-колоночным. Так вы сохраните оригинал и в случае неудачной попытки повторить еще раз.
В Prestashop 1.5 появилась возможность создания новой темы прямо из бэк-офиса.
Настройки- >шаблоны->добавить новый(кнопка справа в виде плюсика). Название шаблона может быть произвольным, а в поле “тема по умолчанию для копирования недостающих файлов шаблона” выбираете шаблон над которым хотите поработать. Для примера я буду работать с шаблоном по умолчанию-default, а новую тему назову default_mod.
Все что будет описано ниже лучше всего проверять на локальном сервере. Перед изменениями файлов шаблона рекомендуется установить опцию “Рекомпилировать файлы шаблонов если файлы были обновлены” в Расширенные параметры->Производительность
Сохраняем и активируем вновь созданную тему.
Приступаем к изменениям файлов шаблона. Для создания двух колонок редактируем файл header.tpl в themes/default_mod/header.tpl
Я использую редактор Notepad++ . Открываем файл и находим строчки
|
1
2
3
4
5
6
7
|
<!-- Left -->
<div id="left_column" class="column grid_2 alpha">
{$HOOK_LEFT_COLUMN}
</div>
<!-- Center -->
<div id="center_column" class=" grid_5">
|
Скрываем левую колонку комментируя нужный участок кода Smarty используя теги {*код*}
|
1
2
3
4
5
6
7
|
<!-- Left -->
{*<div id="left_column" class="column grid_2 alpha">
{$HOOK_LEFT_COLUMN}
</div>*}
<!-- Center -->
<div id="center_column" class=" grid_7 alpha">
|
Обратите внимание что я изменил еще и класс центрально колонки изменив на grid_7 alpha.
Левая колонка на сайте у нас не будет видна пользователям, но модули расположенные в ней будут по прежнему активны, поэтому следует зайти в бэк-офисе Модули->Расположение модулей и удалить ненужные вам модули, а нужные перенести в правую колонку с помощью “Живого редактора”.
Обновляем страницу сайта и видим следующую картину
Необходимо поправить шаблон модуля homefeatured.
Внимание! Все файлы шаблонов и css модулей необходимо менять в папке вашей темы, в нашем случае default_mod. В противном случае при обновлении версии Prestashop вы потеряете все свои изменения.
Находим файл шаблона модуля популярные товары в директории themes/default_mod/modules/homefeatured/homefeatured.tpl
и изменяем строку
|
1
|
{assign var='nbItemsPerLine' value=4}
|
на
|
1
|
{assign var='nbItemsPerLine' value=5}
|
Теперь у нас будет выводиться 5 товаров в строке с необходимыми пробелами между блоками
Аналогичным способом можно подогнать и остальные модули на главной.
Продолжение следует…
До встречи на страницах https://webnewbie.ru/ и моего блога
Я редактирую метку
После редактирования — обратите внимание на изменения в классе! — она приобретает такой вид
Ну, а в остальном, как у Вас, более-менее…
Доброго времени суток. Спасибо вам, за подробную инструкцию, по создание двух-колоночного шаблона. Но у меня возникла проблема с Title к картинкам, в место букв, он стал выглядеть так: title=”Родная Моя”>Родная Моя с чем это может быть связано и как это поправить, я понимаю что нужно поменять кодировку, но не могу найти где, подскажите как это сделать, или может где нибудь скачать новый модуль?
Дополнение: вижу что у вас мои крикозябли стали отображаться правильно, тогда такой пример с тайтлом Р ;о ;д ;н
Изменение шаблона не может повлиять на кодировку шрифта, если в шаблоне не используется кириллица. Посмотрите в БД как там отображается title. Есть еще один вариант отображение юникода в денвере, но это проблема уже самого денвера.
Подскажите как сделать тоже самое, только оставить левую колонку и центральную, а правую удалить. Спасибо
для этого Вам необходимо редактировать файл footer.tpl
найдите строки [php]<!– Right –>
<div id="right_column" class="column grid_2 omega">
{$HOOK_RIGHT_COLUMN}
</div>
</div>[/php]
и закомментируйте их
Сделал, но не могу центральную колонку расширить, подскажите что делать?
Если вы все сделали как описано выше, то центральная колонка уже расширена на ширину боковой колонки. А если нужно модули подогнать под ширину центра, то править нужно стили этих модулей.
спасибо,
но методом “втыка” всетаки получилось это сделать,
надо было писать =_=
grid_7 alpha omega в свойствах центральной колонки
Здравствуйте.
Вот без этих двух слов: “alpha omega” после grid_7 центральная колонка не занимает полностью свою позицию. После добавления я сегодня исправил положение на своём сайте.
Осталось найти где поправить код для избранных товаров.
Спасибо Евгению за статью, и Катерине за такую важную мелочь.
С/у Владимир.