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

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

1. Загрузка

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

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

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


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

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

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


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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

  1. Перейдите в Дизайн > Темы
  2. Нажмите кнопку Редактор тем рядом с активным макетом
  3. В новой вкладке, вы увидите свой магазин с панелью Редактор тем
  4. В выпадающем списке РЕДАКТИРОВАТЬ выберете Пользовательские CSS
  5. В текстовое поле вы можете добавить свои стили
  6. После редактирования сохраните изменения, нажав Сохранить и нажмите [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) Источникивверх

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


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

2.12 (18 Jul 2019)
Исправление для 4.10.x
Добавлена поддержка UniTheme2						
5% Discount
No prize
Next time
Almost!
10% Discount
15% Discount
No Prize
No luck today
Almost!
50% Discount
No prize
Unlucky
Get your chance to win a price!
Enter your email address and spin the wheel. This is your chance to win amazing discounts!
Our in-house rules:
  • One game per user
  • Cheaters will be disqualified.