Moushe.ru
Работаем с шапкой магазина
OpenCart 3 дорабатываем шапку (2 часть)

CMS OpenCart 3.0 переделываем шапку магазина (2 часть)

Opencart

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

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

  1. Работаем с файлом header.twig (../catalog/view/theme/default/template/common/header.twig)
  2. Работаем с админкой магазина

Приступим:

1. Откроем файл header.twig и вместо этих строк (41-67):

<nav id="top">
  <div class="container">{{ currency }}
    {{ language }}
    <div id="top-links" class="nav pull-right">
      <ul class="list-inline">
        <li><a href="{{ contact }}"><i class="fa fa-phone"></i></a> <span class="hidden-xs hidden-sm hidden-md">{{ telephone }}</span></li>
        <li class="dropdown"><a href="{{ account }}" title="{{ text_account }}" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> <span class="hidden-xs hidden-sm hidden-md">{{ text_account }}</span> <span class="caret"></span></a>
          <ul class="dropdown-menu dropdown-menu-right">
            {% if logged %}
            <li><a href="{{ account }}">{{ text_account }}</a></li>
            <li><a href="{{ order }}">{{ text_order }}</a></li>
            <li><a href="{{ transaction }}">{{ text_transaction }}</a></li>
            <li><a href="{{ download }}">{{ text_download }}</a></li>
            <li><a href="{{ logout }}">{{ text_logout }}</a></li>
            {% else %}
            <li><a href="{{ register }}">{{ text_register }}</a></li>
            <li><a href="{{ login }}">{{ text_login }}</a></li>
            {% endif %}
          </ul>
        </li>
        <li><a href="{{ wishlist }}" id="wishlist-total" title="{{ text_wishlist }}"><i class="fa fa-heart"></i> <span class="hidden-xs hidden-sm hidden-md">{{ text_wishlist }}</span></a></li>
        <li><a href="{{ shopping_cart }}" title="{{ text_shopping_cart }}"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md">{{ text_shopping_cart }}</span></a></li>
        <li><a href="{{ checkout }}" title="{{ text_checkout }}"><i class="fa fa-share"></i> <span class="hidden-xs hidden-sm hidden-md">{{ text_checkout }}</span></a></li>
      </ul>
    </div>
  </div>
</nav>

вставим эти:

    <div class="container">
        {{ currency }}
        {{ language }}
        <div id="top-links">
            <div class="nav pull-left">
                <ul class="list-inline">
                    {{ head_contacts }}
                </ul>
            </div>
            <div class="nav pull-right">
                <ul class="list-inline">
                    <li><a href="{{ contact }}"><i class="fa fa-phone"></i></a> <span class="hidden-xs hidden-sm hidden-md">{{ telephone }}</span></li>
                    <li class="dropdown"><a href="{{ account }}" title="{{ text_account }}" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> <span class="hidden-xs hidden-sm hidden-md">{{ text_account }}</span> <span class="caret"></span></a>
                        <ul class="dropdown-menu dropdown-menu-right">
                            {% if logged %}
                            <li><a href="{{ account }}">{{ text_account }}</a></li>
                            <li><a href="{{ order }}">{{ text_order }}</a></li>
                            <li><a href="{{ transaction }}">{{ text_transaction }}</a></li>
                            <li><a href="{{ download }}">{{ text_download }}</a></li>
                            <li><a href="{{ logout }}">{{ text_logout }}</a></li>
                            {% else %}
                            <li><a href="{{ register }}">{{ text_register }}</a></li>
                            <li><a href="{{ login }}">{{ text_login }}</a></li>
                            {% endif %}
                        </ul>
                    </li>
                    <li><a href="{{ wishlist }}" id="wishlist-total" title="{{ text_wishlist }}"><i class="fa fa-heart"></i> <span class="hidden-xs hidden-sm hidden-md">{{ text_wishlist }}</span></a></li>
                    <li><a href="{{ shopping_cart }}" title="{{ text_shopping_cart }}"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md">{{ text_shopping_cart }}</span></a></li>
                    <li><a href="{{ checkout }}" title="{{ text_checkout }}"><i class="fa fa-share"></i> <span class="hidden-xs hidden-sm hidden-md">{{ text_checkout }}</span></a></li>
                </ul>
            </div>
        </div>
    </div>
</nav>

(P.S. — мы добавили в левую колонку верхнего меню наши контакты, созданные в прошлой статье)

Теперь работаем с центральной частью шапки (логотип, поиск, корзина), вместо этих строк (78-93):

<header>
    <div class="container">
        <div class="row">
            <div class="col-sm-4">
                <div id="logo">{% if logo %}<a href="{{ home }}"><img src="{{ logo }}" title="{{ name }}" alt="{{ name }}" class="img-responsive" /></a>{% else %}
                    <h1><a href="{{ home }}">{{ name }}</a></h1>
                    {% endif %}</div>
            </div>
            <div class="col-sm-4">{{ head_contacts }}</div>
            <div class="col-sm-4">
                {{ search }}
                {{ cart }}
            </div>
        </div>
    </div>
</header>

вставим эти:

<header>
    <div class="container">
        <div class="row">
            <div class="col-sm-3">
                <div id="logo">{% if logo %}<a href="{{ home }}"><img src="{{ logo }}" title="{{ name }}" alt="{{ name }}" class="img-responsive" /></a>{% else %}
                    <h1><a href="{{ home }}">{{ name }}</a></h1>
                    {% endif %}</div>
            </div>
            <div class="col-sm-6">{{ search }}</div>
            <div class="col-sm-3">
                {{ cart }}
            </div>
        </div>
    </div>
</header>

(P.S. — мы вырезали контакты из центральной колонки, и немного изменили структуру шапки, теперь у нас идут: логотип, окно поиска, кнопка корзины)

Чистим все кеши и смотрим что же у нас с вами получилось:

Неплохо, правда информация в левой части верхнего меню идёт в столбик, не обращаем на это внимание (мы это исправим в админке), а  смотрим на правую часть, давайте вырежем из неё телефон, корзину и оформление заказа, а закладки переместим к кнопке в корзину?

Вместо этих строк (54-73):

<ul class="list-inline">
    <li><a href="{{ contact }}"><i class="fa fa-phone"></i></a> <span class="hidden-xs hidden-sm hidden-md">{{ telephone }}</span></li>
    <li class="dropdown"><a href="{{ account }}" title="{{ text_account }}" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> <span class="hidden-xs hidden-sm hidden-md">{{ text_account }}</span> <span class="caret"></span></a>
        <ul class="dropdown-menu dropdown-menu-right">
            {% if logged %}
            <li><a href="{{ account }}">{{ text_account }}</a></li>
            <li><a href="{{ order }}">{{ text_order }}</a></li>
            <li><a href="{{ transaction }}">{{ text_transaction }}</a></li>
            <li><a href="{{ download }}">{{ text_download }}</a></li>
            <li><a href="{{ logout }}">{{ text_logout }}</a></li>
            {% else %}
            <li><a href="{{ register }}">{{ text_register }}</a></li>
            <li><a href="{{ login }}">{{ text_login }}</a></li>
            {% endif %}
        </ul>
    </li>
    <li><a href="{{ wishlist }}" id="wishlist-total" title="{{ text_wishlist }}"><i class="fa fa-heart"></i> <span class="hidden-xs hidden-sm hidden-md">{{ text_wishlist }}</span></a></li>
    <li><a href="{{ shopping_cart }}" title="{{ text_shopping_cart }}"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md">{{ text_shopping_cart }}</span></a></li>
    <li><a href="{{ checkout }}" title="{{ text_checkout }}"><i class="fa fa-share"></i> <span class="hidden-xs hidden-sm hidden-md">{{ text_checkout }}</span></a></li>
</ul>

вставляем эти:

<ul class="list-inline">
    <li class="dropdown"><a href="{{ account }}" title="{{ text_account }}" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> <span class="hidden-xs hidden-sm hidden-md">{{ text_account }}</span> <span class="caret"></span></a>
        <ul class="dropdown-menu dropdown-menu-right">
            {% if logged %}
            <li><a href="{{ account }}">{{ text_account }}</a></li>
            <li><a href="{{ order }}">{{ text_order }}</a></li>
            <li><a href="{{ transaction }}">{{ text_transaction }}</a></li>
            <li><a href="{{ download }}">{{ text_download }}</a></li>
            <li><a href="{{ logout }}">{{ text_logout }}</a></li>
            {% else %}
            <li><a href="{{ register }}">{{ text_register }}</a></li>
            <li><a href="{{ login }}">{{ text_login }}</a></li>
            {% endif %}
        </ul>
    </li>
</ul>

а вместо этой строки (84):

{{ cart }}

вставляем эти:

{{ cart }}
<a href="{{ wishlist }}" id="wishlist-total" title="{{ text_wishlist }}"><i class="fa fa-heart"></i> <span class="hidden-xs hidden-sm hidden-md">{{ text_wishlist }}</span></a>

Чистим все кеши, проверяем результат:

Отлично, теперь давайте поработаем с контактами нашего магазина (в верхнем меню), переходим ко второму шагу нашей статьи.

2. Открываем админку и переходим: Система > Настройки > Редактировать > Магазин > Контакты в шапке и вместо этих строк (1-3):

<i class="fa fa-phone" aria-hidden="true"></i> Телефон<br>
<i class="fa fa-clock-o" aria-hidden="true"></i> часы работы<br>
<i class="fa fa-envelope" aria-hidden="true"></i> почта

вставляем эти:

<li><i class="fa fa-phone" aria-hidden="true"></i> Телефон</li>
<li><i class="fa fa-clock-o" aria-hidden="true"></i> часы работы</li>
<li><i class="fa fa-envelope" aria-hidden="true"></i> почта</li>

Чистим все кеши и проверяем результат:

По моему неплохо получилось, на сегодня всё, продолжим в следующей статье.

Живой пример (обновляется одновременно с выходом новых статей): https://about-all.ru

Метки
2

Рекомендуемые статьи

Оставить комментарий

Этот сайт защищен reCAPTCHA и применяются Политика конфиденциальности и Условия обслуживания применять.

Срок проверки reCAPTCHA истек. Перезагрузите страницу.

Меню навигации