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

Шаблон "Fly"

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

Внимание

Шаблон "Fly" может быть установлен только на магазин версии 6.5.5 и выше. Если Ваш магазин версии ниже, пожалуйста, обновите магазин до версии 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".

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

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

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

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

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

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

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