Top panel and header¶

Правка Макетов (Layouts)
Создание стилей для Top panel and Header
Добавление стилей CSS
Результат

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

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

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

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

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

Создадим grid шириной равное 3 и расположем его после grid c логотипом.
Добавим в созданный grid HTML block.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Чтобы сделать сразу выпадающий список, нужно в настройках блока для “Минимальное кол-во элементов для отображения в выпадающем списке.” (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.

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

{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

'currencies' => array(
    'content' => array (
        'currencies' => array (
            'type' => 'function',
            'function' => array('fn_block_manager_get_currencies'),
        ),
    ),

    ...

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

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

 <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 стили:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@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.

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

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

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

/* 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;
}

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

/* 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

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

<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>

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

 <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>

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

/* 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:

@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;
}

Top panel and header¶

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

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

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

Результат ¶

Содержание

Сейчас

Top panel and header¶

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

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

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

Результат¶

Содержание

Сейчас

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

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

Результат ¶