PrestaShop 1.6.x. Как работать с модулем «TM Product Zoomer»

Crystal Taggart Март 7, 2017

Rating: 5.0/5. From 3 votes.

Please wait...

Наша Команда техподдержки рада представить Вам новый туториал, который покажет как работать с модулем «TM Product Zoomer» в наших шаблонах PrestaShop.

«TM Product Zoomer» позволяет выбрать один из трёх доступных вариантов (окно/лупа/внутренний) зума изображения с расширенными настройками плагина. Он доступен для тем Мода, Электроника, Запчасти, Мебель, Один товар.

Модуль устанавливается одновременно с шаблоном, так что стандартный эффект масштабирования товара отключен автоматически.

Стандартный эффект можно заново включить вручную (если необходимо) на вкладке Предпочтения (Preferences) > Товары (Products) > Включить JqZoom вместо Fancybox в разделе страницы товара (Enable JqZoom instead of Fancybox on the product page section).
Для того чтобы работать с Настройками TM Product Zoomer (TM Product Zoomer settings) на странице настройки. Перейдите на вкладку Админ панель > Модули (Modules) > Модули (Modules) > и введите TM Product Zoomer в поле поиска. Нажмите на кнопку Настроить (Configure).
По умолчанию, страница настроек отображает упрощенный набор настроек:
- «Живой» режим (Live mode) –модуль включен/отключен.
- Fancybox — отображать ли увеличенное изображение в Fancybox при нажатии.
- Переключаться на другое изображение при ховере (Change image on hover)- переключаться на главное изображение при наведении на миниатюру (по умолчанию задано значение «Переключаться при нажатии»).
- Адаптивный (Responsive) – позволяет использовать адаптивную функциональность для отображения плагина на мобильных устройствах.
- Тип масштабирования (Zoom Type) – выберите режим отображения увеличенного изображения.
  - Окно (window) — увеличенное изображение появляется рядом с основным изображением в одном из доступных (16) положений.
  - Лупа (lens) — изображение масштабируется в контейнере объектива поверх него.
  - Внутренний (inner) — изображение масштабируется внутри основного контейнера изображения, полностью закрывая его.
- Расширенные настройки (Extended settings) – включение расширенных настроек для опытных пользователей. Вы найдёте ссылку на официальную документацию для получения более детальной информации рядом с параметром.
Во второй половине станицы настройки модуля Вы можете изменить Расширенные настройки модуля (Extended module configuration):
1. Масштабирование при прокрутке (Scroll Zoom) – изменение масштаба при прокрутке мышкой (доступно для всех типов).
2. Курсор (Cursor) — тип курсора при наведении на увеличенное изображение. Доступны следующие настройки: по умолчанию, курсор, крестик (доступно для всех типов).
3. Настройки масштабирования (Zoom settings) – доступно для всех типов, если ‘Масштабирование при прокрутке’ включено.
  - Уровень масштабирования(Zoom Level) – начальный уровень масштабирования
  - Минимальный уровень масштабирования (Min Zoom Level) – минимальный уровень масштабирования
  - Уровень масштабирования (Max Zoom Level) – максимальный уровень масштабирования
  - Увеличение масштаба при прокрутке (Scroll Zoom Increment) – насколько увеличивается изображение при прокрутке
4. Ослабление (Easing) – эффект отображения увеличенного изображения (доступно для всех типов).
  - Ослабление при масштабировании (Zoom Easing) — включить/отключить эффект.
  - Значение ослабления (Easing Amount) — значение задержки эффекта.
5. Плавное затухание изображения (Image Crossfade) – основное изображение размыто вне области наведения (лупы) – доступно для окна, лупы.
6. Настройки окна увеличенного изображения (Magnified image window settings) – доступно для окна:
  - Ширина окна масштабирования (Zoom Window Width) – ширина окна в пикселях.
  - Высота окна масштабирования (Zoom Window Height) — высота окна в пикселях.
  - Отступ окна масштабирования по оси X (Zoom Window Offset X) – отступ окна по оси X.
  - Отступ окна масштабирования по оси Y (Zoom Window Offset Y) – отступ окна по оси Y
  - Позиция окна масштабирования (Zoom Window Position) – выбор позиции окна относительно основного изображения (доступные позиции представлены на изображении под этим полем).
  - Фоновый цвет окна масштабирования (Zoom Window Bg Color) – фоновое изображение окна (только для прозрачных изображений).
  - Постепенное появление окна масштабирования (Zoom Window Fade In) – эффект замедления появления окна.
  - Выцветание окна масштабирования (Zoom Window Fade Out) – эффект замедления исчезновения окна.
  - Размер границы (Border Size) – ширина границы окна в пикселях.
  - Цвет границы (Border Color) – цвет границы окна.
  Обратите внимание: разрешены только цифры:
7. Лупа масштабирования (Zoom Lens) – лупа масштабирования (доступны для окна, лупы).
  - Лупа масштабирования — включить/отключить.
  - Форма лупы (Lens Shape) – тип лупы. Параметр может иметь следующие значения: круглая/округлённая или квадратная/прямоугольная.
  - Цвет лупы (Lens Color) – цвет внутреннего фона лупы.
  - Прозрачность лупы (Lens Opacity) – прозрачность внутреннего цвета лупы.
  - Размер лупы (Lens Size) – размер лупы в пикселях.
  - Постепенное появление лупы (Lens Fade In) – скорость эффекта появления лупы.
  - Выцветание лупы (Lens Fade Out) – скорость эффекта исчезновения лупы.
  - Граница лупы (Lens Border) – ширина границы лупы.
  - Цвет границы лупы (Lens Border Color) – цвет границы лупы.
  - Ограничить масштабирование лупы (Contain Lens Zoom) – ограничение перекрытия лупой основного контейнера лупы.
8. Оттенок (Tint) — эффект тени на области вне объектива (доступно для окна).
  - Оттенок (Tint) — включение/отключение эффекта
  - Цвет оттенка (Tint Color) – цвет внешней области лупы
  - Прозрачность оттенка (Tint Opacity) – прозрачность внешней области лупы
  - Постепенное появление оттенка (Tint Fade In) — скорость эффекта появления
  - Выцветание оттенка (Tint Fade Out) – скорость эффекта исчезновения
  Если Вы переключаете тип масштабирования, набор расширенных настроек изменяется соответствующим образом, чтобы отображать только доступные параметры для выбранного типа.
  
  Будьте внимательны при редактировании расширенных настроек. Если настройки установлены неправильно, эффект может быть непривлекательным.
Не забудьте сохранить внесённые изменения и обновить сайт, для того чтобы просмотреть изменения на фронтенде сайта.