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

   

Мобильная версия:

Живой пример: http://about-all.ru
Список задач на сегодня:

  • 1. Удалим лишний язык (Админка)
  • 2. Удалим лишние валюты (Админка)
  • 3. Удалим верхнюю панель (.TPL)
  • 4. Поработаем со стилями (.CSS)
  • 5. Поработаем с шапкой (.TPL)
  • 6. Поработаем со стилями (.CSS)

Приступим:

1. Заходим в админку нашего магазина и переходим:

Админка > Система > Локализация > Языки > Ставим галочку напротив English > Нажимаем кнопку Удалить

2. Заходим в админку нашего магазина и переходим:

Админка > Система > Локализация > Валюты > Ставим галочки против Euro и US Dollar > Нажимаем кнопку Удалить

3. Откроем файл ../catalog/view/theme/default/template/common/header.tpl и удалим эти строки (50-60):

<nav id="top">
<div class="container">
<?php echo $currency; ?>
<?php echo $language; ?>
<div id="top-links" class="nav pull-right">
<ul class="list-inline">
<li><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>
</nav>

Если вы устанавливали Ocmod’ы то чистим кеш модификаторов (Админка > Дополнения > Менеджер дополнений > Обновить)

4. Откроем файл ../catalog/view/theme/default/stylesheet/stylesheet.css и после этих строк (1-8):

body {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
color: #666;
font-size: 12px;
line-height: 20px;
width: 100%;
}

добавим эти:

header {
padding-top: 22px;
}

(P.S.Теперь логотип не прижимается к верхней панели браузера)

вместо этих строк (747-771):

/* Header menu Fix */
@media (min-width: 768px) {
.menu-header {
border: none !important;
background: #fff !important;
}
.menu-header ul li a {
font-size: 14px !important;
color: #263238 !important;
text-transform: uppercase;
font-weight: 500;
}
.menu-header ul li a:hover {
color: #00BCD4 !important;
}
.menu-header ul li+li:after {
content: '';
display: block;
position: absolute;
top: 14px;
width: 0px;
height: 20px;
border-right: 1px solid #DDD;
}
}

вставим эти:

/* Header menu Fix */
@media (min-width: 768px) {
.menu-header {
border: none !important;
background: #fff !important;
padding-top: 1px;
}
.menu-header ul li a {
font-size: 14px !important;
color: #263238 !important;
text-transform: uppercase;
font-weight: 500;
margin-top: -2px;
}
.menu-header ul li a:hover {
color: #00BCD4 !important;
}
.menu-header ul li+li:after {
content: '';
display: block;
position: absolute;
top: 14px;
width: 0px;
height: 18px;
border-right: 1px solid #DDD;
}
}

(P.S.Теперь ссылки в шапке расположены симметрично)

Вот что у нас получилось:

Продолжаем, вместо этих строк (89-91):

#top .container {
padding: 10px 0;
}

вставим эти:

#top .container {
padding: 10px 0 0 0;
}

(P.S.Мы убрали у панели навигации лишний отступ вниз)

Смотрим что получилось:

Как видим кнопка категорий выступает влево, выглядит некрасиво, поэтому переделаем наш код, вместо этих строк (89-91):

#top .container {
padding: 10px 0 0 0;
}

вставим эти:

#top .container {
padding-top: 10px;
}

Отлично, кнопка заняла нужное место, теперь нужно поправить кнопку корзины, вместо этих строк (143-145):

#cart {
margin-bottom: 10px;
}

вставим эти:

#cart {
margin-bottom: 10px;
margin-left: 15px;
}

Красота:

На экранах с большим разрешением (1200px по ширине и выше) шапка выглядит шикарно, но на экранах с низким разрешением – телефонах, планшетах, стареньких мониторах сайт выглядит печально, будем исправлять.

5. Откроем файл ../catalog/view/theme/default/template/common/header.tpl и вместо этих строк (84-120):

<nav id="top">
<div class="container">
<?php if ($categories) { ?>
<div class="btn-group category-header col-sm-3 col-xs-12">
<button type="button" class="btn btn-navbar" data-toggle="dropdown"><span><?php echo $text_category; ?> <i class="fa fa-bars"></i></span></button>
<ul class="dropdown-menu nav col-sm-12 col-xs-12">
<?php foreach ($categories as $category) { ?>
<li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>
<?php } ?>
</ul>
</div>
<?php } ?>
<div class="col-sm-5 col-xs-12"><?php echo $search; ?></div>
<div class="col-sm-2 col-xs-12 panel-links">
<a href="<?php echo $account; ?>" title="<?php echo $text_account; ?>" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> <span class="caret"></span></a>
<ul class="dropdown-menu">
<?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>
<li><a href="<?php echo $shopping_cart; ?>"><?php echo $text_shopping_cart; ?></a></li>
<li><a href="<?php echo $checkout; ?>"><?php echo $text_checkout; ?></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>
<a href="<?php echo $wishlist; ?>" id="wishlist-total" title="<?php echo $title_wishlist; ?>"><i class="fa fa-heart"></i> <span class="total"><?php echo $text_wishlist; ?></span></a>
<a href="<?php echo $compare; ?>" id="compare-total" title="<?php echo $title_compare; ?>"><i class="fa fa-exchange"></i> <span class="total"><?php echo $text_compare; ?></span></a>
</div>
<div class="col-sm-2 col-xs-12">
<?php echo $cart; ?>
</div>
</div>
</nav>

вставим эти:

<nav id="top">
<div class="container">
<?php if ($categories) { ?>
<div class="btn-group category-header col-xs-12 col-sm-6 col-md-6 col-lg-3">
<button type="button" class="btn btn-navbar" data-toggle="dropdown"><span><?php echo $text_category; ?> <i class="fa fa-bars"></i></span></button>
<ul class="dropdown-menu nav col-sm-12 col-xs-12">
<?php foreach ($categories as $category) { ?>
<li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>
<?php } ?>
</ul>
</div>
<?php } ?>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-5"><?php echo $search; ?></div>
<div class="panel-links col-xs-12 col-sm-6 col-md-6 col-lg-2">
<a href="<?php echo $account; ?>" title="<?php echo $text_account; ?>" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> <span class="caret"></span></a>
<ul class="dropdown-menu">
<?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>
<li><a href="<?php echo $shopping_cart; ?>"><?php echo $text_shopping_cart; ?></a></li>
<li><a href="<?php echo $checkout; ?>"><?php echo $text_checkout; ?></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>
<a href="<?php echo $wishlist; ?>" id="wishlist-total" title="<?php echo $title_wishlist; ?>"><i class="fa fa-heart"></i> <span class="total"><?php echo $text_wishlist; ?></span></a>
<a href="<?php echo $compare; ?>" id="compare-total" title="<?php echo $title_compare; ?>"><i class="fa fa-exchange"></i> <span class="total"><?php echo $text_compare; ?></span></a>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-2">
<?php echo $cart; ?>
</div>
</div>
</nav>

Вроде всё получилось. Переходим к правке стилей.

6. Откроем файл ../catalog/view/theme/default/stylesheet/stylesheet.css и в конец файла добавим эти строки:

/* fix header bug */
@media (max-width: 1200px) {
#search {
padding-left: 15px;
margin-right: -15px;
}
}
@media (max-width:768px) {
.category-header {
padding: 0 15px;
}
#search {
padding: 10px 0;
margin: 0;
}
#cart {
padding: 10px 0;
margin: 0;
}
}

Чистим все кеши и смотрим на результат нашей работы:

с компьютера:

с телефона:

На сегодня всё, следите за нашими новостями, скоро будут новые материалы по OpenCart и OcStore.