Шаблон "Joy"

В данной статье мы рассмотрим особенности шаблона и оформление блоков на главной странице :

• Особенности шаблона
• Вывод меню в фиксированной шапке
• Горизонтальный блок слева от 'Успей купить' большой (Шаблон Joy)
• Вертикальный блок справа от 'Успей купить' малый (Шаблон Joy)
• Текст между товарами и новостями (Шаблон Joy)
• Блоки под каруселью
• Карточка товара
• Категории

Внимание!

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

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

Стильный и минималистичный дизайн.

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

Рисунок 1.

Рисунок 2.

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

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

Рисунок 3.

Новый внешний вид маркеров, "Добавить в сравнение" и "Избранное" выведено на карточке товара справа от фото (рис.4).

Рисунок 4.

Компактное отображение карточек товаров за счет скрытия кнопоки "Добавить в корзину", которая выводится при наведении (рис.5 п.1). Также есть возможность вывести в превью свойства (рис.5 п.2) и рейтинг (рис.5 п.3), для этого необходимо активировать настройки "Отображать свойства в представлении товара" и "Отображать рейтинг в представлении товара" в разделе "Дизайн" - "Параметры" - "Прочее" (рис.6).

Рисунок 5.

Рисунок 6.

Вывод меню в фиксированной шапке

Верхнее главное меню, авторизация, корзина зафиксированы и двигаются с прокруткой экрана. Также на выбор двигается либо логотип (рис.7), либо каталог (рис.9).
Если включена настройка "Выводить меню в фиксированной шапке" в разделе "Дизайн" - "Параметры" -"Прочее" (рис.8), то будет выводится именно каталог (рис.9) и фиксироваться в верхней строке прокрутки.
Если данная настройка отключена, то по умолчанию выводится логотип (рис.7).

Рисунок 7.

Рисунок 8.

Рисунок 9.

Горизонтальный блок слева от 'Успей купить' большой (Шаблон Joy)

Рисунок 10.

Для редактирования блока перейдите в раздел "Дизайн" - "Страницы и блоки" - "Блоки", найдите в списке блок с названием "Горизонтальный блок слева от "Успей купить" большой" с ключом доступа " JoyBannerByIntimeBig" (рис.11). 

Рисунок 11.

Перейдите в редактирование блока, далее режим "Источник" добавьте  код, заменив ссылку на изображение своей (рис.12).

<a href="#"><img src="Templates/Joy/images/7.jpg" style="border-radius: .25rem;" /></a>

Рисунок 12.

Вертикальный блок справа от "Успей купить" малый (Шаблон Joy)

Рисунок 13. 

Для редактирования блока перейдите в раздел "Дизайн" - "Страницы и блоки" - "Блоки", найдите в списке блок с названием "Вертикальный блок справа от 'Успей купить' малый (Шаблон Joy)" с ключом доступа "JoyBannerByIntimeSmall". В редактировании блока перйдите в режим "Источник" и произведите изменение изображения (рис.14 п.3) и ссылки для перехода при клике на изображение (рис.14 п.2).

Рисунок 14.

Текст между товарами и новостями (Шаблон Joy)

Рисунок 15.

Для редактирования блока перейдите в раздел "Дизайн" - "Страницы и блоки" - "Блоки", найдите в списке блок с названием "Текст между товарами и новостями (Шаблон Joy)" с ключом доступа "JoyOnMain" (рис. 7). В редактировании блока перйдите в режим "Источник" и произведите изменение изображения (рис.16 п.2) и ссылки для перехода при клике на изображение (рис.16 п.3).

Рисунок 16.

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

Рисунок 17.

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

При наведении на изображение блока есть анимация (полупрозрачная заставка идущая от углов к центру и наоборот).

Внимание

Если при редактировании блока  "Малый блок под каруселью 1 (Шаблон Joy)" удалить код из css стилей или отключить активность у блока, то анимация не будет работать на других изображениях в блоках.

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

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

Рисунок 18.

Рисунок 19.

Вместо стандартного символа валюты руб. можно вывести значок рубля (рис.20). Для этого необходимо в разделе "Дизайн" - "Параметры" -"Прочее" активировать настройку "Знак рубля в представлении и карточке товара" (рис.21).

Рисунок 20.

Рисунок 21.

Категории

Доступна возможность самостоятельно определять сколько категорий в меню будет выводится, для этого необходимо в настройках шаблона прописать количество (рис.22).

Рисунок 22.

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

Рисунок 23.

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