Шаблон "Fly"

Внимание

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

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

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

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

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

Рисунок 1.

Рисунок 2.

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

Рисунок 3.

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

Рисунок 4.

Рисунок 5.

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

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

Рисунок 6.

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

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

- Новый стильный внешний вид маркеров (рис.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.

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

.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%;
}

После чего сохранить изменения и в статическом блоке в режиме "Источник" добавить класс: 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>

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

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

Рисунок 18. Блок FlyBannerByIntimeSmall

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) и добавить локализацию "Categories.More" = "Больше категорий" (рис.25). Для того, чтобы добавить локализацию, необходимо перейти в пункт меню "Настройки" - "Системные настройки" (рис.24), вкладка "Локализация" и нажмите на кнопку "Добавить локализацию", откроется окно, вписываете ключ:Categories.More и значение:Больше категорий (рис.25).

 

Рисунок 23.

Рисунок 24.

Рисунок 25.

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

Рисунок 26.

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

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

Рисунок 27.

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