Октябрь 2017
Автор: Рубрика: Магазин opencart Комментариев нет

Посадка своего дизайна на страницу opencart, верхнее меню


Посадка своего дизайна на страницу opencart

Когда переносим наш дизайн в магазин мы занимаемся только стилизацией cms opencart.

Весь функционал есть.

Расширять функционал можно модулями.

Наши действия это брать файлы из темы по умолчанию default и копировать их в нашу тему.

Если мы хотим переопределить корзину это файл cart.tpl, мы копируем его в нашу тему и в sublime text делаем изменения.

Начнем делать изменения в нашем шаблоне, для этого запустим gulp.

Откроем шапку магазина в файле header.tpl, который мы скопировали в свою тему my из темы по умолчанию.

Файл лежит у нас в папке виртуального сервера openserver, как его установить читаем тут.

Полный путь к файлу C:\OpenServer\domains\opencart.loc\catalog\view\theme\my\template\common\header.tpl.

Откроем файл в программе sublime tex, с правильными настройками для работы.

Редактируем header.tpl в opencart.

1). Изначально проверяем все пути к файлам.

Меняем папку /default/ на нашу папку с темой /my/.

Нажимаем сочетание клавиш ctrl+h и в поле найти find пишем папку default, в нижнем поле указываем нашу папку my.

Нажимаем клавишу replace all.

Нажимаем сочетание клавиш ctrl+h и в поле найти find пишем папку default

2). Перейдем к навигации nav с идентификатором top и удалим выбор валют.

nav с идентификатором top и удалим выбор валют

3). Копируем nav id=top и добавляем под тег header.

Теперь сделаем верхнюю линию header.

Сверху логотип, посередине будет поиск и справа логин и телефон.

Под строкой row у тега header пишем новую разметку.

  1. Логотип занимает три колонки col-md-3. Вырезаем все, что от логотипа в коде и добавляем в нашу разметку.
  2. Во второй колонке col-md-5 разместим поиск.
  3. Копируем элемент списка li с логином в колонку и добавим ul div class=col-md-4. Перенесем телефон, копируем ссылку с телефоном в третью колонку.

Сделаем вторую линию nav id=top с меню и корзиной.

1. Меню будет в колонке col-sm-8. Копируем в эту колонку nav id=menu, удаляем все внутри списка ul class=nav navbar-nav и добавляем вывод информации . Делаем по аналогии с файлом footer.tpl, выводится внизу информация, которая выводится из административной панели opencart в меню каталог статьи.
Информация не отобразится, будет ошибка. Устраняем ошибку созданием модификатора. Готовый файл с модификатором загружаем в проект. Как создать новый модификатор для шапки читать тут. В итоге сверху должна отобразиться информация с меню.

Делаем по аналогии с файлом footer.tpl

2. Переместим код корзины в col-sm-4

Код index.html.

Стилизуем в файле стилей магазина stylesheet.sass.

В opencart, только дописываем свои стили, ничего из системного не переопределяем.

Это готовая система.

  1. Добавим стили к header отступ сверху padding: 10px 0 и серый фон.
  2. Чтобы стилизовать логотип добавим новый класс logo в html. Уменьшим размер логотипа.
  3. У поиска нет классов, просто стилизуем идентификатор #search. Добавим нужные свойства поиску, плюс при наведении и в фокусе будет другой фон. Чтобы поменять слово по умолчанию в поле поиска откроем файл по пути C:\OpenServer\domains\opencart.loc\catalog\language\ru-ru\common\search.php и отредактируем. Изменим кнопку с классом input-group-btn.
  4. Добавим обертке с классом dropdown для личного кабинета и телефона свойство display: inline-block.
  5. Для выпадающего меню dropdown-toggle зададим отступы, размер шрифта и цвет.
  6. Для фокуса, наведения мышкой и активного состояния меню личного кабинета убираем text-decoration: none
  7. Для dropdown-menu добавим рамку и ко всем элементам списка и ссылкам отступ. Будем менять стиль при наведении мышкой &:focus, &:hover.
  8. Чтобы стилизовать телефон, зададим новый класс в html phone, у телефона как и у личного кабинета добавим display: inline-block.

Добавляем стили для второй полосы с меню и корзиной.

  1. Для навигации с классом top-menu. Для главного меню navbar сделаем шрифт font-size: 1.4em. Цвет черный шрифта. Для всех ссылок у дочернего элемента меню &-nav сделаем отступ сверху top: 15px. При наведении уберем текст подчеркнутым и цвет меняется на синий.
  2. Корзина с идентификатором #cart. Внутри кнопка button, смотрим в браузере посмотреть код у элемента, поэтому к button пропишем свойства.

Добавляем стили для второй полосы с меню и корзиной

Код в main.sass.

Делаем адаптивный дизайн магазина opencart.

Так как магазин opencart сделан на bootstrap, то проверим в браузере на всех разрешениях экрана, что сверстали.

 магазин сделан на bootstrap

Комментариев нет