Когда переносим наш дизайн в магазин мы занимаемся только стилизацией 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.
2). Перейдем к навигации nav с идентификатором top и удалим выбор валют.
3). Копируем nav id=top и добавляем под тег header.
Теперь сделаем верхнюю линию header.
Сверху логотип, посередине будет поиск и справа логин и телефон.
Под строкой row у тега header пишем новую разметку.
- Логотип занимает три колонки col-md-3. Вырезаем все, что от логотипа в коде и добавляем в нашу разметку.
- Во второй колонке col-md-5 разместим поиск.
- Копируем элемент списка li с логином в колонку и добавим ul div class=col-md-4. Перенесем телефон, копируем ссылку с телефоном в третью колонку.
1. Меню будет в колонке col-sm-8. Копируем в эту колонку nav id=menu, удаляем все внутри списка ul class=nav navbar-nav и добавляем вывод информации . Делаем по аналогии с файлом footer.tpl, выводится внизу информация, которая выводится из административной панели opencart в меню каталог статьи.
Информация не отобразится, будет ошибка. Устраняем ошибку созданием модификатора. Готовый файл с модификатором загружаем в проект. Как создать новый модификатор для шапки читать тут. В итоге сверху должна отобразиться информация с меню.
2. Переместим код корзины в col-sm-4
Код index.html.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<body class="<?php echo $class; ?>"> <header> <div class="container"> <div class="row"> <div class="col-md-3"> <div id="logo" class="logo"> <?php if ($logo) { ?> <a href="<?php echo $home; ?>"><img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" class="img-responsive" /></a> <?php } else { ?> <h1><a href="<?php echo $home; ?>"><?php echo $name; ?></a></h1> <?php } ?> </div> </div> <div class="col-md-5"> <?php echo $search; ?> </div> <ul div class="col-md-4"> <li class="dropdown"><a href="<?php echo $account; ?>" title="<?php echo $text_account; ?>" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $text_account; ?></span> <span class="caret"></span></a> <ul class="dropdown-menu dropdown-menu-right"> <?php if ($logged) { ?> <li><a href="<?php echo $account; ?>"><?php echo $text_account; ?></a></li> <li><a href="<?php echo $order; ?>"><?php echo $text_order; ?></a></li> <li><a href="<?php echo $transaction; ?>"><?php echo $text_transaction; ?></a></li> <li><a href="<?php echo $download; ?>"><?php echo $text_download; ?></a></li> <li><a href="<?php echo $logout; ?>"><?php echo $text_logout; ?></a></li> <?php } else { ?> <li><a href="<?php echo $register; ?>"><?php echo $text_register; ?></a></li> <li><a href="<?php echo $login; ?>"><?php echo $text_login; ?></a></li> <?php } ?> </ul> </li> <li class="phone"><a href="<?php echo $contact; ?>"><i class="fa fa-phone"></i></a> <span class="hidden-xs hidden-sm hidden-md"><?php echo $telephone; ?></span></li> </ul> </div> </div> </header> <nav id="top" class="top-menu"> <div class="container"> <div class="row"> <div class="col-sm-9 cart-wrapper"> <nav id="menu" class="navbar"> <div class="navbar-header"><span class="toggle-top-text hidden-lg hidden-md hidden-sm"><?php echo $text_information; ?>:</span> <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button> </div> <div class="collapse navbar-collapse navbar-ex1-collapse"> <?php if ($informations) { ?> <ul class="nav navbar-nav"> <?php foreach ($informations as $information) { ?> <li><a href="<?php echo $information['href']; ?>"><?php echo $information['title']; ?></a></li> <?php } ?> <li><a href="/skidki">Скидки</a></li> <li><a href="<?php echo $contact; ?>">Контакты</a></li> </ul> <?php } ?> </div> </nav> </div> <div class="col-sm-3 cart-wrapper"> <?php echo $cart; ?> </div> </div> </div> </nav> |
Стилизуем в файле стилей магазина stylesheet.sass.
В opencart, только дописываем свои стили, ничего из системного не переопределяем.
Это готовая система.
- Добавим стили к header отступ сверху padding: 10px 0 и серый фон.
- Чтобы стилизовать логотип добавим новый класс logo в html. Уменьшим размер логотипа.
- У поиска нет классов, просто стилизуем идентификатор #search. Добавим нужные свойства поиску, плюс при наведении и в фокусе будет другой фон. Чтобы поменять слово по умолчанию в поле поиска откроем файл по пути C:\OpenServer\domains\opencart.loc\catalog\language\ru-ru\common\search.php и отредактируем. Изменим кнопку с классом input-group-btn.
- Добавим обертке с классом dropdown для личного кабинета и телефона свойство display: inline-block.
- Для выпадающего меню dropdown-toggle зададим отступы, размер шрифта и цвет.
- Для фокуса, наведения мышкой и активного состояния меню личного кабинета убираем text-decoration: none
- Для dropdown-menu добавим рамку и ко всем элементам списка и ссылкам отступ. Будем менять стиль при наведении мышкой &:focus, &:hover.
- Чтобы стилизовать телефон, зададим новый класс в html phone, у телефона как и у личного кабинета добавим display: inline-block.
Добавляем стили для второй полосы с меню и корзиной.
- Для навигации с классом top-menu. Для главного меню navbar сделаем шрифт font-size: 1.4em. Цвет черный шрифта. Для всех ссылок у дочернего элемента меню &-nav сделаем отступ сверху top: 15px. При наведении уберем текст подчеркнутым и цвет меняется на синий.
- Корзина с идентификатором #cart. Внутри кнопка button, смотрим в браузере посмотреть код у элемента, поэтому к button пропишем свойства.
Код в main.sass.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
header background-color: #BA68C8 padding: 10px 0 .dropdown display: inline-block a transition: .3s &.dropdown-toggle color: blue font-size: 1.2em margin-top: 3px 0 0 padding: 8px 0 4px display: block &:hover, &:active, &:focus color: #fff text-decoration: none .dropdown-menu border: 3px solid #b641b0 border-radius: 0 > li > a padding: 10px 30px &:focus, &:hover background-color: blue color: #FFF .phone color: #fff display: inline-block float: right font-size: 1.1em padding-top: 12px padding-left: 10px .fa color: #fff font-size: 1.2em .logo width: 90% #search width: 100% .form-control padding: 5px 15px height: 35px border-radius: 15px background-color: #fff border: 3px solid blue font-size: 20px color: #b641b0 transition: .2s ease margin-top: 5px &:focus, &:hover background-color: #E1BEE7 .input-group-btn position: absolute right: 40px top: 5px .btn padding: 5px 15px background-color: transparent border: none color: #b641b0 font-size: 20px .top-menu .cart-wrapper .dropdown-menu padding: 15px width: 460px a color: #000 .navbar margin-bottom: 0 font-size: 1.4em color: #000 min-height: 40px .navbar-collapse padding: 0 &-nav > li > a padding: top: 15px bottom: 10px &:hover, &:focus background: none color: blue #cart button background-color: blue color: #fff border-radius: 0 padding-top: 15px padding-bottom: 10px border: none font-size: 1.2em text-align: left |
Делаем адаптивный дизайн магазина opencart.
Так как магазин opencart сделан на bootstrap, то проверим в браузере на всех разрешениях экрана, что сверстали.
