Как вам помочь ?
Шаблон "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".
Другие статьи по теме
Тэги: шаблон, fly, флай, анимация, товары, дизайн,akfq