Opencart 2.x - Переделываем Шапку

Тема в разделе "Шаблоны, дизайн и оформление магазина", создана пользователем admin, 22 мар 2017.

  1. TopicStarter Overlay
    Offline

    admin Команда форума Администратор

    Сообщения:
    2.726
    Симпатии:
    129.329
    Репутация:
    215
    Всем привет, из за высокой занятости и кое каких личных проблем не было возможности писать новые статьи, но сегодня появилась свободная “минутка” и я решил написать для вас статью о переделке стандартной, перегруженной шапки OcStore 2.x, в современную, в минималистичном стиле.

    header_23_03.png

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

    • 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 )
    До:

    2017-03-22_103058.png

    После:

    header_23_03.png
    Приступим:

    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 строки, чтобы она стала последней строкой в этом файле.

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

    2017-03-22_103120.png

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

    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;
    }
    }
    Результат:

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

    header_23_03.png

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

    2017-03-22_103154.png

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

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

    Код:
    $_['text_category']  = 'Категории';
    вставим эту:

    Код:
    $_['text_category']  = 'Меню';
    На этом всё.

    Надеюсь статья была вам полезна, следите за нашими новостями и до новых встреч.
     
    Ланита, king333, cssgnom и 2 другим нравится это.
  2. Offline

    Brainouts Пользователь

    Сообщения:
    65
    Симпатии:
    7
    Репутация:
    0
    Вот за это огромное спасибо! Чисто и искренне=)
     
  3. Offline

    dimon2490 Пользователь

    Сообщения:
    1
    Симпатии:
    0
    Репутация:
    0
    @admin, На Opencart 2.0 сработает?
     
  4. Offline

    кука Пользователь

    Сообщения:
    2
    Симпатии:
    0
    Репутация:
    0
    Помогите пожалуйста переделать шапку таким образом. У самого не получилось
     
  5. Offline

    Cthu Пользователь

    Сообщения:
    4
    Симпатии:
    0
    Репутация:
    0
    Менять надо не по строкам, а по содержимому. Тоесть если написано:

    ""вместо этих строк (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>""
    То не надо стирать то, что у тебя написано в строках 66-68. Надо искать код
    Код:
    <div class="col-sm-5"><?php echo $search; ?>
    </div>
    <div class="col-sm-3"><?php echo $cart; ?></div>
    и стирать этот код. У меня он был на других строках.
     
  6. Offline

    13bnj Пользователь

    Сообщения:
    34
    Симпатии:
    1
    Репутация:
    0
    Спасибо.
     
  7. Offline

    Bond Пользователь

    Сообщения:
    56
    Симпатии:
    1
    Репутация:
    0
    admin(на) - в президенты на следующих выборах в РФ!
     
  8. Offline

    Premium09 Пользователь

    Сообщения:
    9
    Симпатии:
    3
    Репутация:
    0
    Чёт не вышло
     
    Aytgormon нравится это.