Moushe.ru

Блог обо всём

OpenCart 2.3 переделываем шапку



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

Список задач на сегодня:

  • 1. Работаем с header.tpl ( ../catalog/view/theme/default/template/common )
  • 2. Работаем с stylesheet.css ( ../catalog/view/theme/default/stylesheet )
  • 3. Работаем с header.php ( ../catalog/language/ru-ru/common )

До:

После:

Приступим:

1. Откроем файл header.tpl и вместо этих строк (108-126):

<?php foreach ($categories as $category) { ?>
<?php if ($category['children']) { ?>
<li class="dropdown"><a href="<?php echo $category['href']; ?>" class="dropdown-toggle" data-toggle="dropdown"><?php echo $category['name']; ?></a>
<div class="dropdown-menu">
<div class="dropdown-inner">
<?php foreach (array_chunk($category['children'], ceil(count($category['children']) / $category['column'])) as $children) { ?>
<ul class="list-unstyled">
<?php foreach ($children as $child) { ?>
<li><a href="<?php echo $child['href']; ?>"><?php echo $child['name']; ?></a></li>
<?php } ?>
</ul>
<?php } ?>
</div>
<a href="<?php echo $category['href']; ?>" class="see-all"><?php echo $text_all; ?> <?php echo $category['name']; ?></a> </div>
</li>
<?php } else { ?>
<li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>
<?php } ?>
<?php } ?>

вставим эти:

<li><a href="<?php echo $home; ?>" title="<?php echo $text_home; ?>"><i class="fa fa-home"></i> <?php echo $text_home; ?></span></a></li>
<li><a href="<?php echo $wishlist; ?>" id="wishlist-total" title="<?php echo $text_wishlist; ?>"><i class="fa fa-heart"></i> <?php echo $text_wishlist; ?></span></a></li>
<li><a href="<?php echo $shopping_cart; ?>" title="<?php echo $text_shopping_cart; ?>"><i class="fa fa-shopping-cart"></i> <?php echo $text_shopping_cart; ?></span></a></li>
<li><a href="<?php echo $checkout; ?>" title="<?php echo $text_checkout; ?>"><i class="fa fa-share"></i> <?php echo $text_checkout; ?></span></a></li>

(P.S.вместо категорий мы вставили в синее меню свои ссылки: главная, закладки, корзина покупок, оформление заказа)

удалим эти строки (50-77):

<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>
<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><a href="<?php echo $wishlist; ?>" id="wishlist-total" title="<?php echo $text_wishlist; ?>"><i class="fa fa-heart"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $text_wishlist; ?></span></a></li>
<li><a href="<?php echo $shopping_cart; ?>" title="<?php echo $text_shopping_cart; ?>"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $text_shopping_cart; ?></span></a></li>
<li><a href="<?php echo $checkout; ?>" title="<?php echo $text_checkout; ?>"><i class="fa fa-share"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $text_checkout; ?></span></a></li>
</ul>
</div>
</div>
</nav>

(P.S.это верхнее меню, переключение валюты, языка и т.д.)

удалим лишние строки:

  • 72 - <?php if ($categories) { ?>
  • 87 - <?php } ?>

вместо этих строк (66-68):

<div class="col-sm-5"><?php echo $search; ?>
</div>
<div class="col-sm-3"><?php echo $cart; ?></div>

вставим эти:

<div class="col-sm-4 head_info">
<i class="fa fa-phone" aria-hidden="true"></i> +7 (925) 206-20-98<br>
<i class="fa fa-envelope-o" aria-hidden="true"></i> hruhru.87@mail.ru<br>
<i class="fa fa-clock-o" aria-hidden="true"></i> ПН-СБ: с <b>10:00</b> до <b>20:00</b>
</div>
<div class="col-sm-4">
<?php echo $cart; ?>
<?php echo $search; ?>
</div>

(P.S.Знатоки в комментариях как всегда изойдутся на г*вно, что нужно вставлять с помощью php с заполнением данных через админку и т.д. – статья по этой теме уже была, если вы часто меняете инфу в шапке и номер телефона, без проблем — делайте)

теперь эту строку (77):

</header>

вставим после 91 строки, чтобы она стала последней строкой в этом файле.

Смотрим на результат:

Отлично, здесь мы всё сделали, переходим к файлу стилей.

2. Откроем файл 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 {
background: #ddd;
padding-top: 10px;
margin-bottom: 20px;
}

вместо этих строк (199-205):

#menu {
background-color: #229ac8;
background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
background-repeat: repeat-x;
border-color: #1f90bb #1f90bb #145e7a;
min-height: 40px;
}

вставим эти:

#menu {
background-color: #229ac8;
border-color: #1f90bb #1f90bb #145e7a;
min-height: 40px;
border-radius: 7px 7px 0 0;
margin-bottom: 0px;
}

в самый конец файла (или в другое место) вставим эти строки:

.head_info .fa {
color: #229ac8;
font-size: 18px;
}
.head_info {
color: #000;
font: 15px Verdana;
line-height: 30px;
}
@media (max-width: 768px) {
#logo, .head_info {
margin-left: 33%;
padding-bottom: 10px;
}
}

Результат:

На полной версии сайта:

На мобильной версии сайта:

Теперь осталось поправить 1 строку в файле перевода (на мобильной версии сайта слово категории изменить на слово меню)

3. Откроем файл header.php и вместо этой строки (6):

$_['text_category']      = 'Категории';

вставим эту:

$_['text_category']      = 'Меню';

На этом всё.

Надеюсь статья была вам полезна, следите за нашими новостями и до новых встреч.

P.S. — Если вы не планируете использовать модули такого плана — https://opencartforum.com/files/file/2878-vitrina-kategorii-tovary-brendy/ то в одной из следующих статей я покажу вам как сделать вывод категорий в верхнем меню только в мобильной версии сайта.

42 Comments

  1. Спасибо, вставка контактов в шапку для меня сейчас актуально.

  2. Денис

    24.03.2017 at 14:01

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

  3. Владислав, очень полезная статья. Подскажите, что нужно поменять, чтобы вместо ( Личный кабинет Мои Закладки (0) Корзина покупок Оформление заказа) отображались Информация (Информация
    О нас Информация о доставке Политика Безопасности Условия соглашения ).

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

  5. Вот это самое то.

  6. Хочу выразить благодарность за проделанную работу, многими рекомендациями воспользовался. Спасибо !

  7. Спасибо!!! Весь день был проведен в муках поиска и только эта статья помогла!

  8. Здравствуйте.
    Вроде бы все сделал как в статье. Но не получилось. (((
    Опять же не ясно что за класс fa fa … и где его надо прописать? В файле стилей не нашел. И что дает опция arya hidden?

    Попробую завтра на свежую голову повторить…

    PS
    а вот артикулы встали на карточку товара без проблемм! Спасибо!

    • Статья написана самым подробным образом, если что-то не получилось: сравнить код в статье и своих файлах, поменять текстовый редактор на notepad++, чистить кеш опена и браузера.

    • Все встало.
      Но есть два замечания:
      1. Файл header.tpl надо править по адресу \system\storage\modification\catalog\view\theme\default\template\common\header.tpl
      Вероятно это сделано для того, чтобы наши изменения не пропали при апгрейде темы.
      2. Сам файл header надо сохранять в формате UTF8/ В противном случае дни недели в тексте рабочие часы не будут показаны правильно.

      3/ И не забывать чистить кеш

      автору статьи — Спасибо.

      PS
      Эта статья открыла для меня font awesome )))

    • 1 — Править нужно по адресу в статье, а так как у вас стоят ocmod’ы то после правки файлов шаблона нужно чистить кеш модификаторов! Не вводите людей в заблуждение. 🙂
      2 — Если правите нормальным текстовым блокнотом notepad++ и т.д. они не меняют исходную кодировку файла.
      3 — Это да.

  9. Владислав, здравствуйте!
    Вы можете помочь привести шапку на моем сайте к представленному в данной статье виду (не бесплатно).
    Я пробовал все сделать по инструкции, но у меня едет верстка, так как ранее я вносил изменения в дефолтный шаблон и так как я не очень силен в этом деле, у меня не получается привести все в полный порядок.

  10. Александр

    24.04.2017 at 16:25

    Здравствуйте, на ocstore не совсем подходит это описание. Кто менял шапку на ocstore?

  11. Добрый день!
    Очень рад что встретил Ваши статьи и эту в том числе…
    Все очень подробно и грамотно…
    Именно по этой статье у меня вопрос…
    Как вот теперь в это поле, которое вместо меню с категориями пришли эти ссылки вставить ссылки другие: например, «контакты»-«каталог» и прочее?
    Заранее огромнейшее спасибо…

    • Просто прописать html ссылками, если не понятно пишите мне в ВК или на почту в Контактах и то и то прописано.

  12. Здравствуйте, Владислав!
    Ваш материал по работе с OpenCart 2.3 пришелся очень кстати.
    Раздел по изменению шапки сайта особенно.
    Сделал все было написано. Результат получил такой, как и написано. Спасибо.

    Но есть одно но.
    Теперь в мобильной версии нажатие на «кнопку с тремя полосками» приводит к выпадению менюшки слева…но только не с категориями товаров как раньше, а того же содержания, что и в шапке. Получается категории стали вообще недоступны в мобильной версии.

    Подскажите пожалуйста, как это можно поправить.

    • Код категорий не вырезайте — будут категории.

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

    • Максим

      10.08.2017 at 14:51

      Доброго дня!
      Цитата:
      Теперь в мобильной версии нажатие на «кнопку с тремя полосками» приводит к выпадению менюшки слева…но только не с категориями товаров как раньше, а того же содержания, что и в шапке. Получается категории стали вообще недоступны в мобильной версии.
      Конец цитаты…
      Вы обещали статью по этому поводу чтобы мобильнаая версия не становилась бесполезной.

    • Да будет. Просто я обычно использую на сайтах модуль стена категорий и на главной вс выглядит замечательно — opt-electrick.ru

    • Максим

      12.08.2017 at 20:46

      дайте пжлст ссылку на модуль

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

    • А кеш чищен? Модификаторов, системы, браузера, ширина кнопки становится меньше (где нарисована иконка поиска)

  14. Кеш почищен, но ничего не изменилось. Я в среду программирования окунулся всего пару недель назад, поэтому Сори, если туплю. Посмотрите сами: chelcoff.ru

  15. В каком файле? В Stylesheet и bootstrap.min вроде бы везде поменял btn-lg на btn-default.

    • Зачем??? Я же написал в одном из двух файлов!!! header.tpl или search.tpl — всего в одном месте!!!
      Если не понятно напишите мне на почту или в ВК — объясню подробнее — а то в комментариях и мне не удобно отвечать и чистить потом от такого чата то ещё удовольствие.

      vk — vk.com/mag1987
      @ — hruhru.87@mail.ru

  16. Сори за невнимательность, час ночи сказывается. Всё исправил, сейчас всё встало на свои места.
    Спасибо огромное!
    Если будут вопросы можно будет обратиться за помощью, но только в крайнем случае?

    • Если вопрос по теме статьи — без проблем, по остальным вопросам — тематические форумы или по прайс-листу.

  17. Доброго времени!
    Шапка встала нормально, однако в мобильной версии информация расположена не по центру как в образце, а смещена в право. Не могу понять что править, подскажите пжлста. Спасибо!

  18. Роман

    05.06.2017 at 18:49

    Добрый день!
    У меня вопрос. Если вся информация по этому методу переносится с верху в низ где должно быть основное меню, то логично вопрос а куда девается основное меня и где оно будет распологатся после этих манипуляций?

    • Нигде, многие ставят дополнительные модули категорий, думаю сделаю статью на эту тему, когда буду посвободнее — сильный завал на работе.

Добавить комментарий

Your email address will not be published.

*

CAPTCHA image
*

 для диалога необходимо принять правила конфиденциальности и пользовательского соглашения *

© 2017 Moushe.ru При копировании материалов, ссылка на нас обязательна!

Вверх ↑



Яндекс.Метрика