Шаблон "Fly"

В данной статье рассмотрим настройки и особенности шаблона "Fly".

• Особенности шаблона "Fly"
• Фиксированное меню
• Как найти статический блок
• Блоки под каруселью
• Анимация для блоков
• Блок "Успей купить"
• Блоки справа от "Успей купить"
• Блок Сертификата
• Новости
• Карточка товара
• Категории
• Преимущества магазина
• Изображения над блоком Новости

 

Внимание

Шаблон "Fly" может быть установлен только на магазин версии 6.5.5 и выше. Если Ваш магазин версии ниже, пожалуйста, обновите магазин до последней актуальной версии на момент установки шаблона.

 

Особенности шаблона "Fly"

Режим отображения главной страницы "Одна колонка", но тем не менее каталог может находится слева от карусели, как при отображении в 2 колонки (рис.1), если включить настройку "Отображать меню возле карусели на главной" в разделе "Дизайн" - "Параметры" - "Прочее" (рис.2).

Рисунок 1.

Рисунок 2.

В случае отключения карусели, меню лучше свернуть, отключив настройку "Отображать меню возле карусели на главной" (рис.3).

Рисунок 3.

Чтобы в меню категорий категории третьего уровня отображается третьим столбцом (рис.4), необходимо при редактировании категории первого уровня активировать функцию "Отображать в меню два уровня подкатегорий" - "Да", далее в разделе "Дизайн" - "Параметры" -"Основные"  выберать "Стиль отображения меню"-"Классический" (рис.5).

Рисунок 4.

Рисунок 5.

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

Список желания и сравнение выведены иконками справа от поиска (рис.6).

Рисунок 6.

В данном шаблоне 24 цветовых схемы и 17 фонов.

Эффект увеличения изображения при наведении на карточки товаров, категорий, новостей.

Новый стильный внешний вид маркеров (рис.7).

Рисунок 7.

 

Фиксированное меню

Верхнее главное меню, авторизация, корзина зафиксированы и двигаются с прокруткой экрана. Также на выбор двигается либо логотип (рис.8), либо каталог (рис.10).
Если включена настройка "Вывод меню в фиксированной шапке" (рис.9) (для включения настройки, перейдите в пункт меню "Дизайн" - "Параметры" -"Прочее" и поставьте галочку в поле "Вывод меню в фиксированной шапке"), то будет выводится именно каталог (рис.10) и фиксироваться в верхней строке прокрутки.
Если данная настройка отключена, то по умолчанию выводится логотип (рис.8).

Рисунок 8.

Рисунок 9.

Рисунок 10.

Внимание!

Фиксировать меню каталога удобно в том случае, если у вас небольшое количество категорий.

 

Как найти статический блок

Заметка

У каждого из статических блоков, которые относятся к данному шаблону, в названии указано "шаблон Fly"

Чтобы найти статический блок, следует перейти в раздел "Дизайн" - "Страницы и блоки" - "Блоки", далее в строке поиска необходимо ввести наименование блока, среди поисковой выдачи выбрать нужный и перейти к редактированию (рис.11).

Рисунок 11.

Далее открывается окно с кодом. Следует перейти в режим "Источник", проверить активность блока, внести необходимые корректировки и выполнить сохранение (рис.12).

Рисунок 12.

Ниже рассмотрим какие блоки представлены в шаблоне "Fly".

 

Блоки под каруселью

Рисунок 13.

За блоки под каруселью отвечает три статических блока: "Малый блок под каруселью 1 (Шаблон Fly)", "Малый блок под каруселью 2 (Шаблон Fly)" и "Малый блок под каруселью 3 (Шаблон Fly)"- это три статических блока равной ширины для баннеров под каруселью. Растягиваются в зависимости от количества выведенных (отображается только 1 – занимает 100% экрана, 2 – 50%, 3 – 33% от экрана).

 

Анимация для блоков

Анимация выглядит полупрозрачной заставкой идущей от углов к центру и наоборот (рис.14).

Рисунок 14.

Для того, чтобы у блоков была анимация, также данную анимацию можно прописать и в другие блоки, необходимо перейти в "редактор файла стилей" ("Дизайн" - "Параметры" - "CSS") (рис.15).

Рисунок 15.

И прописать следующий код:

@media (min-width: 768px){.fly-hover-animation{
position: relative;
transition: 0.5s;overflow: hidden;
}

.fly-hover-animation:before,.fly-hover-animation:after{
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
-webkit-transition: .6s;
-moz-transition: .6s;
-ms-transition: .6s;
-o-transition: .6s;
}


.fly-hover-animation:hover:before{
background: rgba(255, 255, 255, 0.5) none repeat scroll 0 0;
left: 51%;
right: 51%;
}

.fly-hover-animation:hover:after{
background: rgba(255, 255, 255, 0.5) none repeat scroll 0 0;
bottom:51%;
top: 51%;
}}

@media (max-width: 768px){
.col-xs-12.fly-hover-animation{
padding-left: 0;
padding-right: 0;
}

.text-on-main-bottom{
margin-top: 1.5rem;
}}

После чего сохранить изменения и в статическом блоке в режиме "Источник" добавить класс: fly-hover-animation (рис.16).

Рисунок 16.

 

Блок "Успей купить"

Рисунок 17.

При горизонтальном отображении занимает ¾ экрана и дает возможность расположить справа от себя блок с рекламным баннером.
При вертикальном занимает ¼ экрана и дает возможность расположить справа от себя блок с рекламным баннером или текстом.
При отображении нескольких акций с разным отображением блоки можно разграничить дополнительным статическим блоком с баннерами.

Можно создать новый дизайн блока "Успей купить" (если хотите, чтобы выглядело как на рис. 17).

Важно!

Для того, чтобы можно было создать дизайн акции с рис.17, обязательно необходимо купить модуль "Успей купить" и настроить согласно инструкции.

Обязательно в настройках выберите вывод на главной: горизонтально.

Далее в разделе "Текст акции на главной" выбрать стиль отображения "Источник" ("Source") и разместить следующий код:

<div class="buy-in-time-inner cs-br-2">
<div class="buy-in-time-content">
<figure class="buy-in-time-picture-block"><a href="#ProductLink#"><img
alt="#ProductName#" class="buy-in-time-picture" src="#ProductPictureSrc#" /></a>
<div class="buy-in-time-discount sticker-main">
<div class="buy-in-time-discount-number">#DiscountPercent#%</div>
<div class="buy-in-time-discount-text">скидка</div>
</div>
</figure>

<div class="buy-in-time-price-block">
<h3 class="buy-in-time-header">#ActionTitle#</h3>


<div class="buy-in-time-name"><a class="buy-in-time-name-link" href="#ProductLink#">
#ProductName#</a></div>

<div class="buy-in-time-price-default">Цена: <span class="price"><span
class="price-current"><span class="price-number">#OldPrice#</span> <span
class="price-currency">#CurrencyCode#</span></span></span></div>

<div class="buy-in-time-price-today">Цена: <span class="price"><span class="price-current"
><span class="price-number">#NewPrice#</span> <span class="price-currency">
#CurrencyCode#</span></span></span></div>

<div class="buy-in-time-button-block"><a class="btn btn-small btn-action btn-buy-in-time"
href="#ProductLink#">Экономия: #DiscountPrice# #CurrencyCode#</a></div>

<div class="buy-in-time-countdown-block">
<div class="buy-in-time-text">До конца распродажи:</div>
#Countdown#</div>
</div>
</div>
</div>
<style type="text/css">.buy-in-time-price-block { padding-left:10px; } </style>

 

Блоки справа от "Успей купить"

При включении модуля "Успей купить", в шаблоне появляется пустое пространство справа от модуля. Заполнить данное пространство можно с помощью статических блоков "Вертикальная карусель справа от "Успей купить" малая (Шаблон Fly)" и "Горизонтальный блок слева от "Успей купить" большой (Шаблон Fly)", нужный блок необходимо использовать в зависимости от горизонтального или вертикального отображения модуля "Успей купить".

Рисунок 18.

1. "Вертикальная карусель справа от 'Успей купить' малая (Шаблон Fly)" - данный блок предназначен для модуля "Успей купить" с выбранным горизонтальным отображением модуля.

Если данный блок отсутсвует, его необходимо добавить.

Пример содержимого для статического блока "Вертикальная карусель справа от "Успей купить" малая (Шаблон Fly)":

<div class="carousel">
<div class="carousel-inner">
<div class="carousel-main-list text-static" data-auto="true" data-auto-pause="5000" data-carousel="" data-carousel-class="carousel-small-b" data-dots="true" data-dots-class="ng-hide" data-dots-item-class="cs-bg-i-1 carousel-small-b-dots-item" data-next-class="icon-right-open ng-hide" data-prev-class="icon-left-open ng-hide" data-speed="500" data-stretch="false" data-visible-max="1">
<div class="carousel-main-item fly-hover-animation"><a class="carousel-main-link" href="#"><img alt="" src="Templates/Fly/80s/v1.jpg" /> </a></div>
<div class="carousel-main-item fly-hover-animation"><a class="carousel-main-link" href="#"><img alt="" src="Templates/Fly/80s/v2.jpg" /> </a></div>
</div>
</div>
</div>

Не забудьте поменять ссылки внутри содержимого блока, а так же картинки на подходящие для вашего магазина.

При неактивном модуле "Успей купить", либо при выбранном вертикальном отображении модуля, блок будет занимать 25% (¼) экрана и справа будет пустое пространство. Рекомендуется отключить данный блок и использовать блок "Горизонтальный блок слева от "Успей купить" большой (Шаблон Fly)".

2. "Горизонтальный блок слева от 'Успей купить" большой (Шаблон Fly)" - предназначен для модуля "Успей купить" с выбранным вертикальным отображением модуля.

Если данный блок отсутсвует, его необходимо добавить.

Пример содержимого для статического блока "Горизонтальный блок слева от "Успей купить" большой (Шаблон Fly)":

<a class="carousel-main-link" href="#"><img alt="" src="Templates/Fly/pictures/carousel/slide(3).jpg" /></a>

Не забудьте поменять ссылки внутри содержимого блока, а так же картинки на подходящие для вашего магазина.

При неактивном модуле "Успей купить" либо выбранном горизонтальном отображении модуля блок будет занимать 75% (¾) ширины экрана и справа будет пустое пространство. Рекомендуется отключить данный блок и использовать "Вертикальная карусель справа от "Успей купить" малая (Шаблон Fly)".

 

Блок Сертификата

Рисунок 19.

Данный блок редактируется в статическом блоке "Доп.блок для пользовательского сертификата на главной (Шаблон Fly)", при активации статического блока стандартный блок с сертификатом отображаться не будет.

 

Новости

Изменилось представление подборки новостей (рис.20).

Рисунок 20.

Также изменилось внешнее представление подписки на новости (рис.21).

Рисунок 21.

 

Карточка товара

Изменился внешний вид карточки товара и увеличена фотография товара (рис.22).

Рисунок 22.

 

Категории

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

Рисунок 23.

Тогда в меню будет выведено заданное количество категорий, остальные будут скрыты, отобразятся по клике "Все категории" (рис.24).

Рисунок 24.

 

Преимущества магазина

Преимущества магазина выведены в статическом блоке "Преимущества магазина (Шаблон Fly)" (рис.25).

Рисунок 25.

Изображения над блоком Новости

Так же есть возможность разместить изображения над блоком Новости. Отображение на витрине будет следующим образом (рис.26).

Рисунок 26.

Для настройки в статическом блоке "Текст между товарами и новостями (осн. вид)" нужно добавить в режиме "Источник" следующий код:

<div class="row" style="padding-bottom:1rem">
<div class="col-xs fly-hover-animation"><a href="#"><img src="userfiles/1.jpg" /></a></div>
<div class="col-xs fly-hover-animation"><a href="#"><img src="userfiles/2.jpg" /></a></div>
</div>

Здесь "userfiles/1.jpg" и "userfiles/2.jpg" - путь до картинок, предварительно загруженных в магазин. О том, как загрузить картинки, можно посмотреть в статье Визуальный редактор. Рекомендуемый размер для изображений данного блока 600 x 150 px.

Готово. В данной инструкции мы рассмотрели основные настройки шаблона "Fly".