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

Шаблон "Fly"

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

Внимание

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

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

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

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

Рисунок 1.

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

- Верхнее главное меню, логотип, авторизация и корзина (т.е. полностью верхняя строка) зафиксирована и двигается с прокруткой экрана (рис.2).

Рисунок 2.

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

Рисунок 3.

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

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

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

Рисунок 4.

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

Заметка

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

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

Рисунок 5.

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

Рисунок 6.

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

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

Рисунок 7.

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

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

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

Рисунок 8.

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

Рисунок 9.

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

.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 (рис.100).

Рисунок 10.

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

Рисунок 11.

При горизонтальном отображении занимает ¾ экрана и дает возможность расположить справа от себя блок с рекламным баннером.
При вертикальном занимает ¼ экрана и дает возможность расположить справа от себя блок с рекламным баннером или текстом.
При отображении нескольких акций с разным отображением блоки можно разграничить дополнительным статическим блоком с баннерами.

Можно создать новый дизайн блока "Успей купить" (если хотите, чтобы выглядело как на рис. 11).

Важно!

Для того, чтобы можно было создать дизайн акции с рис.11, обязательно необходимо купить модуль "Успей купить" и настроить согласно инструкции.

Обязательно в настройках выберите вывод на главной: горизонтально.

Далее в разделе «Текст акции на главной» выбрать стиль отображения «Источник» («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>

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

Рисунок 12.

Данный блок редактируется в статическом блоке "FlyBannerByIntimeSmall"

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

Рисунок 13.

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

Новости

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

Рисунок 14.

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

Рисунок 15.

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

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

Рисунок 16.

Категории

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

Рисунок 17.