Как вам помочь ?

Шаблон "Fly"

Статья актуальна для версии магазина: 10.0 | 8.0 | 7.0-6.5

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

 

Внимание

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

 

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

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

Шаблон "Fly" - 1412
Рисунок 1.

Шаблон "Fly" - 9387
Рисунок 2.

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

Шаблон "Fly" - 1604
Рисунок 3.

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

Шаблон "Fly" - 9767
Рисунок 4.

Шаблон "Fly" - 1083
Рисунок 5.

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

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

Шаблон "Fly" - 3603
Рисунок 6.

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

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

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

Шаблон "Fly" - 2457
Рисунок 7.

 

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

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

Шаблон "Fly" - 2052
Рисунок 8.

Шаблон "Fly" - 9279
Рисунок 9.

Шаблон "Fly" - 5088
Рисунок 10.

Внимание!

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

 

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

Заметка

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

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

Шаблон "Fly" - 9039
Рисунок 11.

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

Шаблон "Fly" - 5729
Рисунок 12.

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

 

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

Шаблон "Fly" - 3371
Рисунок 13.

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

 

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

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

Шаблон "Fly" - 9951
Рисунок 14.

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

Шаблон "Fly" - 4243
Рисунок 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).

Шаблон "Fly" - 2621
Рисунок 16.

 

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

Шаблон "Fly" - 5197
Рисунок 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)", нужный блок необходимо использовать в зависимости от горизонтального или вертикального отображения модуля "Успей купить".

Шаблон "Fly" - 6796
Рисунок 18.

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

Если данный блок отсутсвует, его необходимо добавить в разделе Дизайн - Страницы и блоки - Блоки. Ключ доступа данного блока - FlyBannerByIntimeSmall.

Пример содержимого для статического блока "Вертикальная карусель справа от "Успей купить" малая (Шаблон 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/images/v1.jpg" /> </a></div>
<div class="carousel-main-item fly-hover-animation"><a class="carousel-main-link" href="#"><img alt="" src="Templates/Fly/images/v2.jpg" /> </a></div>
</div>
</div>
</div>

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

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

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

Если данный блок отсутсвует, его необходимо добавить в разделе Дизайн - Страницы и блоки - Блоки. Ключ доступа для данного блока FlyBannerByIntimeBig.

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

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

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

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

 

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

Шаблон "Fly" - 7266
Рисунок 19.

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

 

Новости

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

Шаблон "Fly" - 5918
Рисунок 20.

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

Шаблон "Fly" - 7058
Рисунок 21.

 

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

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

Шаблон "Fly" - 7034
Рисунок 22.

 

Категории

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

Шаблон "Fly" - 3479
Рисунок 23.

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

Шаблон "Fly" - 1566
Рисунок 24.

 

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

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

Шаблон "Fly" - 9672
Рисунок 25.

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

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

Шаблон "Fly"
Рисунок 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".

Другие статьи по теме

Статья оказалась полезной?
Благодарим за отзыв.

Как мы можем улучшить статью?

Не нашли нужную статью? Предложить свою тему

Не нашли нужную статью?

Благодарим за отзыв.

Тэги: шаблон, fly, флай, анимация, товары, дизайн,akfq

Мы используем cookies. Подробнее...