Смена главного изображения при выборе цвета товара в virtuemart 3

Смена главного изображения товара при выборе цвета еще одна любопытная функция, улучшающая юзабилити интернет-магазина.

В это статье я рассмотрю простой плагин Dropbox with image picker, с помощью которого возможно реализовать данный функционал в virtuemart.

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

Установка плагина Dropbox with image picker

Плагин устанавливается стандартно через менеджер расширений.

После установки в Расширения->Менеджер плагинов активируем VMCustom - Dropbox with Image picker.

Первоначальная настройка VMCustom - Dropbox with Image picker

После установки и активации необходимо создать новое настраиваемое поле в Virtuemart->Товары->Настраиваемые поля.

• Тип поля - Плагины
• Опубликовано - Да
• Атрибут корзины - Да
• По умолчанию - dropboximage
• Выберите плагин - VMCustom - Dropbox with image picker

Остальные настройки оставляем по умолчанию.

После выбора плагина внизу появятся его настройки. Здесь задаются настройки плагина по умолчанию.

Оставим их пока пустыми и более детально разберем при добавлении к конкретному товару.

Добавление выбора цвета к конкретному товару

Теперь можно добавлять цвета к конкретному товару.

В админке в карточке товара переходим во вкладку Настраиваемые поля и в выпадающем списке выбираем созданное ранее поле.

После этого у нас появится окно настроек. Разберем их подробнее.

• Пользовательский заголовок Dropbox - Заголовок, который будет отображен на сайте
• Dropbox Выбор с разделителем | - имя цвета и картинка указываются в следующем формате
  
  1	черный;1.jpg|красный;2.jpg|синий;3.jpg|зеленый;4.jpg|светло-серый;5.jpg

• Путь к картинкам - указывается путь, по которому находятся изображения
• CSS класс оригинального изображения - указывается класс блока, в котором находится оригинальное изображение. В стандартном шаблоне virtuemart .main-image. Другие шаблоны могут иметь другой класс
• Дочерний элемент в блоке с изображением - первый элемент внутри класса с изображением. В стандартном шаблоне это a. В других шаблонах он может быть другим.
• Высота изображения - высота изображения, которое будет выводиться с помощью плагина
• Ширина изображения - ширина изображения, которое будет выводиться с помощью плагина. Если задана высота, то можно установить auto
• Скрыть цену на странице товара - для каждого варианта можно задать наценку.
  
  1	черный;1.jpg|красный;2.jpg|синий;3.jpg;+200|зеленый;4.jpg|светло-серый;5.jpg

  
  В этом случае синий цвет будет стоить дороже на 200 руб.
  Данная опция скрывает стоимость наценки из выпадающего списка при выборе цвета.
• Увеличивать цену товара - По умолчанию налогом облагается только цена товара. Данная опция позволяет облагать налогом так же наценку.
• Показать цены в корзине - данная опция выводит дополнительную стоимость в корзине

Наложение дополнительных изображений на основное

Еще одна интересная функция плагина Dropbox with image picker - это наложение дополнительных изображений.

Это может быть полезно если вы продаете, например, одинаковые футболки с разными рисунками.

Чтобы наложить дополнительные картинки, нужно в карточке товара создать еще одно настраиваемое поле Dropbox и прописать в настройках пути до картинок. Картинки должны быть такого же размера и иметь прозрачный фон.

На демо примере можно посмотреть как это выглядит.

Новая версия для virtuemart 3

В новой версии плагина немного изменен синтаксис. Вместо символа "|" нужно использовать символ "#" из-за проблем с базой данных. Новый синтаксис будет выглядеть так

Информация о плагине

• Совместимость - joomla 2.5, joomla 3; virtuemart 2, virtuemart 3
• Стоимость - 24.99€

Демо Купить на сайте автора

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

VM Color Select