+70 настроек для фото- и видеогалереи товаров

Дайте покупателям «лупу», чтобы разглядеть мельчайшие детали на фотографиях товаров

27 марта 2019, версия 0.2.7


Все мы знаем, что в Shop-Script, как в любом движке интернет-магазина, для товаров можно загружать фотографии. Как в любом хорошем движке, в нём можно загружать по несколько фотографий для каждого товара. И наконец, как в современном движке, кроме фотографий, в нём можно добавлять и видеоролики с описаниями товаров.

Круто? Можно ещё круче — если установить плагин «Галерея+».

Что умеет плагин

Плагин добавляет на страницу товара галерею фотографий и видеороликов.

Совет для начинающих пользователей: чтобы плагин начал работать, после установки включите флажок с надписью «Включить» в его настройках.

При просмотре фотографий можно увеличивать часть изображения с помощью «лупы» — вы наверняка видели такие в интернете: круглая область, которая появляется вместо курсора и позволяет рассмотреть мелкие подробности изображения.

Степень увеличения «лупы» можно изменять, для этого нужно покрутить колесом мыши. А в настройках можно изменить её форму, сделав квадратной вместо круглой.

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

Вместо «лупы» можно использовать другой способ увеличения части изображения — в настройках плагина оно называется «окно». На фотографии товара появляется затемнённая область, а рядом с фотографией — окошко для просмотра увеличенной версии того места, которое закрыто затемнением. Крутите колесом мыши — затемнённая область уменьшается, а справа становится видна её увеличенная версия. Чем меньше затемнённая область на фотографии, тем больше степень увеличения. Эту затемнённую область можно двигать и таким образом рассматривать разные части фотографии товара.

Есть ещё один способ увидеть увеличения изображения — он называется «внутри изображения». Если навести курсор на фотографию товара, вместо неё появляется увеличенный фрагмент этой фотографии. Водишь мышью в разные стороны, и как будто двигаешь увеличенное изображение под квадратным окошком, прорезанным прямо в веб-странице. Интересный эффект — попробуйте.

Немного неудобный момент состоит в том, что плагин автоматически не заменяет стандартную фотогалерею, которая наверняка уже есть в вашем магазине, а добавляет свою собственную дополнительно к стандартной. Видимо, технически это не так просто реализовать, поэтому придётся вручную один раз убрать код стандартной галереи из вашей темы дизайна — в описании плагина показано, как это сделать для нескольких популярных тем. Скорее всего, это легко сделать самому либо можно обратиться за помощью к автору плагина.

Кстати, в описании плагина есть отдельная страничка с описанием разных нюансов, связанных с его использованием: как что настроить, где включить, чтобы заработало, как вам надо. Обязательно прочитайте — и перед покупкой (чтобы лучше представлять себе возможности плагина) и перед использованием (чтобы быстрее всё настроить самому, не прибегая к помощи разработчика).

Загрузка видео

Ещё с помощью плагина «Галерея+» можно показать на странице товара несколько видеороликов из «Ютьюба». Загружать их нужно с помощью кнопки «Менеджер видео», которая появится на вкладке «Фото и видео» после установки и включения плагина.

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

  • миниатюры (для показа в виде кнопок в списке видеороликов на странице товара);
  • превью (для обычных экранов);
  • превью 2Х (для экранов с высокой плотностью пикселей).

Настройки фото- и видеогалереи

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

Что можно выбрать:

  • размеры изображений и их миниатюр (эскизов);
  • автоматическое пролистывание изображений (режим слайдшоу);
  • что должно происходить при щелчке по изображению;
  • как вписывать изображения с разными соотношениями сторон в область просмотра;
  • нужно ли продолжать просмотр сначала, когда пользователь доходит до конца списка изображений;
  • показывать ли наклейки товара на изображениях;
  • с какой стороны области просмотра показывать список миниатюр изображений;
  • как показывать полную версию изображения во всплывающем окне;
  • показывать ли описания изображений;
  • тип, форму и размер «лупы»;
  • цвета оформления видеопроигрывателя;
  • показывать ли похожие видео «Ютьюба»;
  • качество видео;
  • много других мелких, но безусловно полезных настроек, в том числе для адаптации внешнего вида галереи.

Кстати, можно не бояться испортить настройки своими экспериментами — есть возможность быстро восстановить стандартные настройки и начать всё с начала.

Размещение галереи на любой странице сайта

По умолчанию фото- и видеогалерея появляется только на страницах товаров. Но можно показать её где угодно в пределах сайта, работающего на основе Webasyst. Для этого нужно скопировать примеры кода Smarty из настроек плагина и добавить их в шаблон нужной страницы — причём не только страницы витрины магазина, но и, скажем, страницы «Сайта» или «Блога».

Такие дополнительные галереи могут содержать фото и видео одного товара или сразу нескольких товаров — при вставке кода в шаблон страницы надо перечислить идентификаторы таких товаров.

Впечатления

Человеку свойственно постоянно улучшать инструменты, с которыми он работает. И это совершенно оправданная склонность, потому что жизнь меняется, и нам нужно поспевать за новыми тенденциями и потребностями. Плагин «Галерея+» — прекрасный пример того, как можно улучшить — и как! — и без того отличную галерею изображений Shop-Script. Используйте эту возможность добавить в свой интернет-магазин новые функции просмотра изображений товаров. Как показывает практика, кто не двигается вперёд, тот в итоге отстаёт.

* * *

«Галерея+» в Магазине Webasyst: https://www.webasyst.ru/store/plugin/shop/galleryplus/