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

Шаблон "Fly"

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

Внимание

Шаблон "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”

Чтобы найти статический блок, следует перейти в раздел CMS -> Статические блоки, далее в строке поиска необходимо ввести наименование блока, среди поисковой выдачи выбрать нужный и перейти к редактированию (рис.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>

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

При включении модуля "Успей купить", в шаблоне появляется пустое пространство справа от модуля. Заполнить данное пространство можно с помошью статических блоков FlyBannerByIntimeSmall и FlyBannerByIntimeBig, нужный блок необходимо использовать в зависимости от горизонтального или вертикального отображения модуля "Успей купить".

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

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

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

Пример содержимого для статического блока "FlyBannerByIntimeSmall":

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

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

2. FlyBannerByIntimeBig - предназначен для модуля "Успей купить" с выбранным вертикальным отображением модуля.

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

Пример содержимого для статического блока "FlyBannerByIntimeBig":

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

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

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

Рисунок 19.

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

Новости

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

Рисунок 20.

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

Рисунок 21.

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

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

Рисунок 22.

Категории

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

Рисунок 23.

Рисунок 24.

Рисунок 25.

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

Рисунок 26.

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

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

Рисунок 27.

Блоки на главной между товарами и новостями

Два информационных блока на главной странице перед новостями (рис.28) находятся в статическом блоке "TextOnMain2" (Текст между товарами и новостями (осн. вид)) (рис.29)

Рисунок 29.

В статическом блоке можете заменить ссылку на свою и загрузить свое изображение.

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

Если хотите отключить анимацию, то в статическом блоке в режиме "источник" удалите класс "fly-hover-animation".

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

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

Открыть онлайн чат? Открыть

Статья оказалась полезной? Да Нет

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

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

Проблема в

А именно с

Комментарий

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

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