Wow Анимация для Блоков Документация

A) Установка – вверх

1. Загрузка

Скачайте модуль
Перейдите в Панель Администратора > Модули > Управление модулями
Нажмите на [+] чтобы открыть диалоговое окно загрузки
Выберите удобный для вас способ:
– Загрузить: zip архив храниться на вашем компьютере
– Сервер: zip архив храниться на вашем сервере
– URL: у вас есть прямая ссылка на zip архив
После того как вы выбрали zip архив для соответствующей версии CS-Cart, пожалуйста, нажмите кнопку Загрузить
Очистите кэш, выберите Администрирование > Хранилище данных > Очистить кэш

2. Активация

Откройте страницу настроек модуля Панель Администратора > Модули > Управление модулями >
[TH] Wow Анимация для Блоков
Во вкладке Активация введите Номер лицензии
Сохраните настройки и вернитесь на страницу Управление модулями
В строке с названием модуля, выберите Вкл.
Очистите кэш, выберите Администрирование > Хранилище данных > Очистить кэш

B) Изменение эффектов блока – вверх

Чтобы изменить эффект для конкретного блока: перейдите в Панель Администратора > Дизайн > Макеты
Выберите расположение этого блока
Нажмите [шестеренку], чтобы открыть модальное окно с параметрами блока
Выберите анимация в раскрывающемся списке Animated effect
Расширенные опции
- Duration – изменение длительности анимации. Например: 0.25s
- Delay – задержка перед началом анимации. Например: 300ms
- Offset – расстояние до начала анимации (связано с низом браузера). Например: 100
- Iteration – количество повторений анимации. Например: 3 или infinite
Нажмите Сохранить для сохранения изменений

C) Настройки – вверх

Чтобы изменить настройки надстроек: перейдите в Панель Администратора > Модули > Управление модулями
Нажмите [шестеренку] и выберите глобальные настройки

Общие

Show on mobile – включение / выключение модуля на мобильных устройствах
Grid – Анимация на продуктах для вида “Cетка”
List without options – Анимацая на продуктах для вида “Список без параметров”
Compact list – Анимация на продуктах для вида “Компактный список”

D) JavaScript – вверх

После установки модуля файлы JavaScript находятся в папке js/addons/ath_animate/

wow.min.js – плагин JavaScript parallax (прочитать подробнее тут)

E) Структура CSS – вверх

После установки модуля файлы CSS находятся в design/themes/[theme_name]/css/addons/ath_animate/

animate.min.css – библиотека CSS анимации (прочитать подробнее тут)

Изменить стили CSS

Файлы стилей не должен быть изменены, это может привести к некорректной работе модуля. Если необходимо переопределить или добавить стили, пожалуйста, используйте Редактор тем

Перейдите в Дизайн > Темы
Нажмите кнопку Редактор тем рядом с активным макетом
В новой вкладке, вы увидите свой магазин с панелью Редактор тем
В выпадающем списке РЕДАКТИРОВАТЬ выберете Пользовательские CSS
В текстовое поле вы можете добавить свои стили
После редактирования сохраните изменения, нажав Сохранить и нажмите [X] чтобы закрыть редактор

F) Шаблоны – вверх

После установки модуля шаблоны находятся в папке design/themes/[theme_name]/templates/addons/ath_animate/

views/block_manager/render

animate_wrapper.tpl – HTNL обертка для анимации

hooks/index/

styles.post.tpl – включает файлы CSS
scripts.post.tpl – включает скрипты инициализации и JS

hooks/products/

product_multicolumns_list.pre.tpl – открыть блок анимации продукта для вида “Сетка”
product_multicolumns_list.post.tpl – закрыть блок анимации продукта для вида “Сетка”
product_block.pre.tpl – открыть блок анимации продукта для вида “List without options”
product_block.post.tpl – закрыть блок анимации продукта для вида “List without options”
product_compact_list.pre.tpl – открыть блок анимации продукта для вида “Compact list”
product_compact_list.post.tpl – закрыть блок анимации продукта для вида “Compact list”

G) Другие файлы – вверх

App folder

В этой папке расположены настройки надстроек и основная логика

app/addons/ath_animate/addon.xml – основной файл для всех модулей. Тут параметры и настройки этого модуля. Формат Scheme 3.0 CS-Cart

app/addons/ath_animate/animate-config.json – список доступной анимации

app/addons/ath_animate/init.php – захват хуков ‘render_block_register_cache’, ‘render_block_content_after’

app/addons/ath_animate/func.php – содержат фактическую функцию для встраивания в хук

app/addons/ath_animate/controllers/backend/block_manager.pre.php – передает массив доступной анимации в админ панель

design/backend/templates/addons/ath_animate/hooks/block_manager/settings.post.tpl – настройки блока

Языковые файлы

Языковые пакеты находятся в var/langs. Значения берутся оттуда при установке модуля.
Чтобы добавить новые значения или изменить текущие: перейдите в Панель Администратора > Администрирование > Языки > Переводы

H) Источник – вверх

Я использовал следующие изображения, значки или другие файлы:

Значки от icon 54
Векторная браузерные презентации The Pixeden Team
Animate.css от Daniel Eden
WOW.js от Peter Sorensen

Список изменений

1.8 (21 Dec 2020)
Обновили модуль для совместимости с CS-Cart 4.12.1
Требуется переустановка модуля для CS-Cart Multivendor Ultimate
Добавили поддержку CS-Cart Multivendor Ultimate