Эффекты для Изображений Продукта Документация

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

1. Загрузка

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

2. Активация лицензии

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

B) Использование – вверх

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

Изображения, которые отображаются в блоке товара, являются основным изображением товара и первым из дополнительных изображений.

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

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

Effects – выберите один из эффектов, который будет применен ко всем предварительным просмотром продукта. Пример эффектов можно посмотреть здесь
Images – существует два варианта отображения
- two_image – два последовательных изображения
- only_one_image – одно статическое изображение без эффекта
Speed – скорость анимации. Установить в миллисекундах
Hover – выберите, когда вызвать эффект
- Parent – карточка товара
- Image – изображение продукта
Show in mobile – включите дополнительные эффекты для мобильных устройств. Разрешение экрана меньше 767px. (По Умолчанию: Off)
Global Scope – для этих областей можно отключить надстройку
- Grid
- List without options
- Compact list
- Template Products
- Template Links thumb
- Template Scroller
- Template Small items
- Detail page

Просто выберите анимацию в блоках и индивидуально для продукта

Приоритет отображения идет от глобального окружения к Продукту > Блоку или понизьте установки приоритета глобального окружения

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

Для изменения эффектов для определенного блока: перейдите в Панель Администратора > Дизайн > Макеты
Выберите расположение этого блока
Нажмите [шестеренку], чтобы открыть модальное окно с параметрами блока
Нажмите Настройки
Выберите анимацию в выпадающем списке Effect for Two image
Нажмите Сохранить

E) Изменение эффектов на продукте – вверх

Для изменения эффектов для определенного блока: перейдите в Панель Администратора > Продукты > Продыкту
Выберите Продукт в списке
Выберите вкладку Модули
Выберите анимацию в выпадающем списке Effect for Two image
Нажмите Сохранить

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

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

Все файлы в формате .less (подробнее об этом формате читайте здесь)

styles.less – основной файл, где находятся основные стили дополнения
mixins.less – дополнительные примеси и функции, используемые в других файлах
В папке effects расположены файлы эффектов

Изменение стилей

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

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

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

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

common/

image_effects.tpl – отображение изображений продуктов с различными эффектами в соответствии с настройками модуля

hooks/

index/
- styles.post.tpl – включает файлы стилей и инициализирует некоторые .less переменные
products/
- product_block_image.override.tpl
- product_scroller_list.override.tpl
- product_icon.override.tpl
Файлы выше это хуки которые меняют способ вывода
Пример работы хука products:product_block_image

{include
            file="common/image.tpl"
            image_width=$settings.Thumbnails.product_lists_thumbnail_width
            obj_id=$obj_id_prefix
            images=$product.main_pair
            image_height=$settings.Thumbnails.product_lists_thumbnail_height
}

изменен на

{include
      file="addons/ath_prod_image_effects/common/image_effects.tpl"
      ath_image_width=$settings.Thumbnails.product_lists_thumbnail_width
      ath_image_height=$settings.Thumbnails.product_lists_thumbnail_height
      include_from="list"
}

product_compact_list.override.tpl
product_small_item.override.tpl
product_thumbnail_list.override.tpl
image_wrap.override.tpl

Файлы выше используются как хуки, для замены места, где отображаются изображения
Пример работы хука products:product_compact_list

<div class="ty-compact-list__image">
          <a href="{"products.view?product_id=`$product.product_id`"|fn_url}">
              {include file="common/image.tpl"
                      image_width=$image_width
                      image_height=$image_height
                      images=$product.main_pair
                      obj_id=$obj_id_prefix}
          </a>
          {assign var="discount_label" value="discount_label_`$obj_prefix``$obj_id`"}
          {$smarty.capture.$discount_label nofilter}
</div>

изменен на

<div class="ty-compact-list__image">

    {hook name="products:product_compact_list__image"}
    <a href="{"products.view?product_id=`$product.product_id`"|fn_url}">
        {include file="common/image.tpl"
                image_width=$image_width
                image_height=$image_height
                images=$product.main_pair
                obj_id=$obj_id_prefix}
    </a>
    {/hook}

    {assign var="discount_label" value="discount_label_`$obj_prefix``$obj_id`"}
    {$smarty.capture.$discount_label nofilter}
</div>

При необходимости все вышеперечисленные файлы можно отредактировать в соответствии с темой. Главное не ломайте логику.

Следующие файлы используются хуки для изменения выходного файла изображения на image_effects.tpl

product_compact_list__image.override.tpl
product_small_item__image.override.tpl
product_thumbnail_list__image.override.tpl

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

App folder

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

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

app/addons/ath_prod_image_effects/schemas/block_manager/templates.post.php – добавляет опции для доп. картинок

Например, этот блок кода подключает дополнительные изображения продуктов для продуктов scroller при выборе соответствующих параметров

if ( $addons['ath_prod_image_effects']['blocks_products_scroller_tpl'] == 'Y' ) {
    $schema['blocks/products/products_scroller.tpl']['bulk_modifier']
                   ['fn_gather_additional_products_data']['params']['get_additional'] = true;
}

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

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

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

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

Эффекты от dsathiyaraj
Векторные браузерные презентации от The Pixeden Team

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

2.19 (23 Aug 2024)
- Улучшен центр обновлений 
- Исправления в скриптах

2.18 (10 Dec 2023)
Обновлена лицензионная система
Небольшие исправления

2.17 (29 Oct 2021)
Улучшили совместимость UniTheme2
Исправления в стилях
Обновлена иконка

2.16 (10 Mar 2021)
Интегрировали систему обновления через Центр Обновлений

2.15 (07 Dec 2020)
Обновили модуль для совместимости с CS-Cart 4.12.1
Требуется переустановка модуля

2.14 (16 Apr 2020)
Добавили исправления для UniTheme2

2.13 (20 Feb 2020)
Исправление лейблов (Бесплатная доставка)
Исправления для ThinTheme
Обновлена лицензионная система
Обновлены языковые переменны

2.12 (18 Jul 2019)
Исправление для 4.10.x
Добавлена поддержка UniTheme2