Top panel and header

Следующим этапом будет создание создание и расположение блоков в Top panel and Header containers.

Будем изменять Layout по-умолчанию.

Правка Макетов (Layouts)

Поменяем блоки Currencies и Languages местами как на макете. Это можно сделать с помощью drag-and-drop, взять блок Languages и перетащить за Currencies.

Также нужно добавить блок о Доставке.

  1. Создадим grid шириной равное 3 и расположем его после grid c логотипом.

  2. Добавим в созданный grid HTML block.

  3. Добавим следующий код для блока:

    1
    2
    3
    <div class="ty-delivery">
        <i class="ty-delivery__icon"></i> Delivery 24/7
    </div>
    

Остальные блоки оставим как есть.

На макете не представлен функционал Профиль пользователя, но он важен для пользователя. Поэтому блок оставим как есть.

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

../../../_images/top_header.png

Создание стилей для Top panel and Header

В Cs-Cart для изменения фона container, цвет ссылок, текста используется Visual editor и Styles(ex. Presets).

Чтобы активировать Visual editor, на странице themes, рядом с темой нажмем кнопку Visual editor.

../../../_images/admin_themes.png

Для того, чтобы изменить background Top panel, в Customize выбирает Background, появится секция Top panel.

По макету цвет Top panel равен #573c27. Установим цвет для background равный #573c27. Для фона панели можно задать и градиент. Для этого нужно нажать на “шестеренку” и появятся дополнительные опции, такие как второй цвет для градиента, прозрачность и ширина панели.

Таким же образом изменим background для Header на #fbfbfb. Активируем настройку Full width, чтобы серый фон был на всю ширину экрана.

../../../_images/visual_editor.png

Добавление стилей CSS

Создадим отдельный файл custom.less в themes/tutorial/css/ и подключим его в themes/tutorial/templates/common/styles.tpl.

Будем добавлять в этот файлы наши стили.

Начнем с Валют(Currencies).

По-умолчанию, 3 валюты отображаются в ряд. С уменьшением экрана, появляется выпадающий список.

../../../_images/currencies.png

Чтобы сделать сразу выпадающий список, нужно в настройках блока для “Минимальное кол-во элементов для отображения в выпадающем списке.” (Minimal number if items to be placed in a dropdown list). поставить значение 1.

Название и символ валюты можно задать в настройках валюты Администрирование / Валюты(Administration / Currencies).

По макету символ валюты не выводится, его надо удалить из шаблона.

Быстрый способ найти шаблон, с помощью поиска по файлам классов, которые используются в разметке.

Определить, какие классы используются, можно с помощью DevTools для Chrome или Firebug для Firefox.

Примечание

CSS стили кэшируются. Чтобы кэш очищался автоматически, нужно включить настройку “Обновлять кэш автоматически” (Rebuild cache automatically) на странице Темы (Themes) в административной панели.

Будем искать по классу ty-select-block__a-item, он используется templates/common/select_object.tpl.

За вывод символа валюты отвечает код:

1
{if $items.$selected_id.symbol} ({$items.$selected_id.symbol nofilter}){/if}

Удалим его из шаблона.

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

Для Mакетов(Layouts) шаблоны расположены в templates/blocks. Для блока Валюты(Currencies) используется шаблон templates/blocks/currencies.tpl.

Подключение шаблона определяется в схеме app/schemas/block_manager/blocks.php

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
'currencies' => array(
    'content' => array (
        'currencies' => array (
            'type' => 'function',
            'function' => array('fn_block_manager_get_currencies'),
        ),
    ),

    ...

    'templates' => 'blocks/currencies.tpl',
    'wrappers' => 'blocks/wrappers',
),

За вывод валюты в выпадающем списке отвечает код:

1
 <div class="ty-select-wrapper">{include file="common/select_object.tpl" style="graphic" suffix="currency" link_tpl=$config.current_url|fn_link_attach:"currency=" items=$currencies selected_id=$secondary_currency display_icons=false key_name=$key_name}</div>

В котором подключается с помощью include файл common/select_object.tpl, в котором располагается символ валюты.

С настройками валюты закончили, добавим теперь стили.

Все ссылки в Top panel имеют белый цвет. Поэтому добавил для всех ссылок в Top panel стили:

1
2
3
.top-grid a {
    color: #fff;
}

top-grid - это пользовательский класс для grid(ссылка на документацию), который можно изменить в настройках grid.

Пользовательские классы для блоков(blocks) и гридов(grids) в своем названии не содержат префикса ty-, чтобы не путать с классами в шаблонах.

Текст валюты должен быть большими буквами. Если добавить стиль только для класса ty-select-block__a-item, то это будет не правильно, так как он используется для вывода еще языков.

Лучше использовать в селекторе класс блока, где расположен класс ty-select-block__a-item:

1
2
3
.top-currencies .ty-select-block__a-item {
    text-transform: uppercase;
}

Рассмотрим теперь блок с языками(languages).

Рядом с знаванием языка выводится “треугольник”, который не нужен. Можно поправить шаблон, но быстрее скрыть его через css:

1
2
3
.top-languages .ty-select-block__arrow {
    display: none;
}

Для блока с ссылками добавим стили:

1
2
3
.top-quick-links .ty-text-links__a {
    font-size: 12px;
}

Рассмотрим теперь блок Delivery 24/7.

Для него нужно добавить иконку.

Будем использовать шрифтовые иконки как в Cs-Cart.

Для этого будем использовать сервис icomoon.io. Будем использовать иконку clock из набора IcoMoon. Сохраним шрифт в папке media/fonts/ темы.

../../../_images/icomoon.png

Из файла style.css, который находится со шрифтами, перенесем стили для иконок в custom.less файл и поправим пути до шрифтов.

 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
@font-face {
    font-family: 'tutorial';
    src:url('../media/fonts/tutorial.eot?-vagbvx');
    src:url('../media/fonts/tutorial.eot?#iefix-vagbvx') format('embedded-opentype'),
        url('../media/fonts/tutorial.woff?-vagbvx') format('woff'),
        url('../media/fonts/tutorial.ttf?-vagbvx') format('truetype'),
        url('../media/fonts/tutorial.svg?-vagbvx#tutorial') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="tt-icon-"], [class*=" tt-icon-"] {
    font-family: 'tutorial';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.tt-icon-clock:before {
    content: "\e601";
}

Примечание

При создании нового иконочного шрифта, нужно, чтобы названия классов иконок не совпадало с названием классов иконок в шаблоне. Т.е. .ty-icon- нельзя задавать.

Добавим класс tt-icon-clock для ty-delivery__icon блока Delivery.

Добавим стили, чтобы блок выглядел по макету.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
/* Delivery
   ========================================================================== */
.ty-delivery {
    color: #573c27;
    font-size: 12px;
}
.ty-delivery__icon {
    color: #8f979a;
    font-size: 21px;
    vertical-align: middle;
    margin-right: 8px;
}

Добавим стили для формы поиска. Разметка, которая есть в шаблоне править не надо. Изменим только стили.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
/* Search form
   ========================================================================== */
input.ty-search-block__input {
    border-color: #fad8d3;
    color: #979595;
    font-size: 12px;
    padding-right: 80px;
}
.ty-search-magnifier {
    height: auto;
    background: #e05b5b;
    color: #fff;
    top: 1px;
    right: -1px;
    width: 70px;
    bottom: 1px;
    font-size: 22px;
}

Добавим стили для меню. Править разметку не надо.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* Main menu
   ========================================================================== */
.ty-menu__items {
    background: none;
}
.ty-menu__item .ty-menu__item-link {
    padding: 8px 8px;
    color: #573c27;
    text-transform: uppercase;
    font-size: 13px;
    min-height: 0;
    margin-right: 10px;
}
.no-touch .ty-menu__item:hover .ty-menu__item-link,
.is-hover-menu .ty-menu__item-link,
.is-hover-menu.ty-menu__item-active .ty-menu__item-link {
    background: #e05b5b;
}
.ty-menu__submenu-items {
    margin-top: 3px;
    border-color: #e05b5b;
}

По макету для Header осталось изменить Корзину(Cart content).

Блок использует шаблон templates/blocks/cart_content.tpl

За вывод корзины отвечает следующий код:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<div id="sw_dropdown_{$dropdown_id}" class="ty-dropdown-box__title cm-combination">
    <a href="{"checkout.cart"|fn_url}">
        {hook name="checkout:dropdown_title"}
            {if $smarty.session.cart.amount}
                <i class="ty-minicart__icon ty-icon-basket filled"></i>
                <span class="ty-minicart-title ty-hand">{$smarty.session.cart.amount}&nbsp;{__("items")} {__("for")}&nbsp;{include file="common/price.tpl" value=$smarty.session.cart.display_subtotal}</span>
                <i class="ty-icon-down-micro"></i>
            {else}
                <i class="ty-minicart__icon ty-icon-basket empty"></i>
                <span class="ty-minicart-title empty-cart ty-hand">{__("cart_is_empty")}</span>
                <i class="ty-icon-down-micro"></i>
            {/if}
        {/hook}
    </a>
</div>

Изменим разметку на:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
 <div id="sw_dropdown_{$dropdown_id}" class="ty-dropdown-box__title cm-combination">
    <a href="{"checkout.cart"|fn_url}">
        {hook name="checkout:dropdown_title"}
            {if $smarty.session.cart.amount}
                <span class="ty-minicart-title"><i class="tt-icon-bag"></i><span class="ty-minicart-title__amount">{$smarty.session.cart.amount}</span></span>
                <span class="ty-minicart-title__price">{include file="common/price.tpl" value=$smarty.session.cart.display_subtotal}</span>
            {else}
                <span class="ty-minicart-title empty-cart"><i class="tt-icon-bag"></i></span>
            {/if}
        {/hook}
    </a>
</div>

Добавим разметку для Корзины:

 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
/* Cart content
   ========================================================================== */
.ty-minicart-title {
    padding: 5px 23px;
    background: #e05b5b;
    color: #fff;
    font-size: 22px;
    vertical-align: top;
    position: relative;
}
.ty-minicart-title__amount {
    position: absolute;
    position: top;
    top: -8px;
    right: -12px;
    font-size: 14px;
    color: #fff;
    background: #ed1c24;
    padding: 0 6px;
    border: 1px solid rgba(85, 32, 32, 0.4);
}
.ty-minicart-title__price {
    display: inline-block;
    vertical-align: top;
    padding: 11px 9px 10px;
    background: #e05b5b;
    color: #fff;
    font-size: 14px;
}
.top-cart-content .ty-dropdown-box__title {
    padding: 0;
}

С оформлением блоков закончили. Осталось только все поправить.

Добавим правильные отступы и стили при наведении для элементов.

Финальный custom.less для top panel и header:

  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
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
@font-face {
    font-weight: normal;
    font-style: normal;
    font-family: 'tutorial';
    src:url('../media/fonts/tutorial.eot?-vagbvx');
    src:url('../media/fonts/tutorial.eot?#iefix-vagbvx') format('embedded-opentype'),
        url('../media/fonts/tutorial.woff?-vagbvx') format('woff'),
        url('../media/fonts/tutorial.ttf?-vagbvx') format('truetype'),
        url('../media/fonts/tutorial.svg?-vagbvx#tutorial') format('svg');
}

[class^="tt-icon-"], [class*=" tt-icon-"] {
    text-transform: none;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    font-family: 'tutorial';
    line-height: 1;
    speak: none;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.tt-icon-bag:before {
    content: "\e600";
}
.tt-icon-clock:before {
    content: "\e601";
}

.top-grid a {
    color: #fff;
}
.top-grid .ty-select-block__a:hover,
.top-grid .ty-select-block__a.open {
    background: none;
    color: #fff;
}

.ty-select-block__a-item {
    font-size: 11px;
}

.top-currencies .ty-select-block__a-item {
    text-transform: uppercase;
}
.top-currencies .ty-select-block__arrow {
    color: #fff;
}

.top-languages .ty-select-block__arrow {
    display: none;
}


.top-quick-links .ty-text-links__a {
    font-size: 12px;
}


div.header-grid {
    padding-top: 22px;
}


/* Delivery
   ========================================================================== */
.ty-logo-container {
    margin-top: 15px;
}


/* Delivery
   ========================================================================== */
.ty-delivery {
    margin-top: 12px;
    color: #573c27;
    font-size: 12px;
}
.ty-delivery__icon {
    margin-right: 8px;
    color: #8f979a;
    vertical-align: middle;
    font-size: 21px;
}

/* Search form
   ========================================================================== */
input.ty-search-block__input {
    padding-right: 80px;
    border-color: #fad8d3;
    color: #979595;
    font-size: 12px;
    height: 42px;
}
.ty-search-magnifier {
    top: 1px;
    right: 1px;
    bottom: 1px;
    width: 70px;
    height: auto;
    background: #e05b5b;
    color: #fff;
    font-size: 22px;
}

.tygh-header {
    border-bottom: 3px solid #e05b5b;
}

/* Main menu
   ========================================================================== */
.top-menu-grid {
    padding-top: 50px;
}
.ty-menu__items {
    background: none;
}
.ty-menu__item .ty-menu__item-link {
    padding: 8px 8px;
    color: #573c27;
    text-transform: uppercase;
    font-size: 13px;
    min-height: 0;
    margin-right: 10px;
}
.no-touch .ty-menu__item:hover .ty-menu__item-link,
.is-hover-menu .ty-menu__item-link,
.is-hover-menu.ty-menu__item-active .ty-menu__item-link,
.ty-menu__item.ty-menu__item-active .ty-menu__item-link {
    background: #e05b5b;
    color: #fff;
}
.ty-menu__submenu-items {
    margin-top: 3px;
    border-color: #e05b5b;
}

/* Cart content
   ========================================================================== */
.ty-minicart-title {
    padding: 5px 23px;
    background: #e05b5b;
    color: #fff;
    font-size: 22px;
    vertical-align: top;
    position: relative;
}
.ty-minicart-title__amount {
    position: absolute;
    position: top;
    top: -8px;
    right: -12px;
    font-size: 14px;
    color: #fff;
    background: #ed1c24;
    padding: 0 6px;
    border: 1px solid rgba(85, 32, 32, 0.4);
}
.ty-minicart-title__price {
    display: inline-block;
    vertical-align: top;
    padding: 11px 9px 10px;
    background: #e05b5b;
    color: #fff;
    font-size: 14px;
}
.top-cart-content .ty-dropdown-box__title {
    padding: 0;
}

/* Account
   ========================================================================== */
.ty-account-info__title {
    font-size: 12px;
}
.ty-account-info__user-arrow {
    visibility: hidden;
}
.ty-dropdown-box__title:hover,
.ty-dropdown-box__title.open {
    background: none;
}