Сейчас я снова предлагаю вам поработать с настраиваемыми полями в Virtuemart 2. На этот раз — с выбором расцветки товара.

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

Выбор цвета: настраиваем изображения

Сперва мы будем работать с полем “Изображение”. Не забудьте сперва загрузить картинки с выбранными расцветками продукта.

Затем нажимаем на кнопку “Создать”. Напоминаю, что сейчас мы с вами работаем в разделе “Медиа-файлы”.
color1
Не забудьте о названии, иначе под миниатюрой в карточке товара будет пустое место. Потом выбирайте нужную картинку с компьютера и сохраняйте ее с помощью файлового менеджера.
color2
Залили все изображения? Пора переходить к созданию настраиваемого поля. Это делается в разделе “Товары” -> “Настраиваемые поля”.
color3
Настройки проводим согласно вот этому скриншоту:
color4

Работаем с карточкой товара

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

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

color6

 

Стилизуем карточку

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

Для этого вносим новые стили в файл virtuemart /components/com_virtuemart/assets/css/vmsite-ltr.css

color-code

Меняя параметр width: 20%, вы сможете группировать расцветки в одну или две колонки.

При наложении картинок попробуйте поставить им ограничения по ширине за счет стиля. Максимальной шириной можно сделать 60px.

color-code2

Для нового стиля надписи под изображением внесите изменения вот  сюда:

color-code3

Вот что получилось у меня: возле картинок уже не видно радиокнопку я ее скрыл стилями, а под картинкой — наименование расцветки товара оставил.

color7

P.S.

Ну что, получилось? Если возникли вопросы, пишите их в комментариях. Всегда рад прийти вам на помощь 🙂

4 Responses to “Продажа товаров с выбором расцветки в virtuemart 2”

  1. Елена, Ответить

    Легко, доступно, понятно! Работает!
    Можно также доступно и наглядно научить следующему — Водолазка женская в трёх цветах и в трёх размерах. Уложить в корзину голубую водолазку 46 размера. Контроль за остатком не нужен. (для меня даже лишний)

    • Елена, Ответить

      Реализовано — цвет/размер с помощью плагина stockable в настраиваемых полях. Правда скучновато выглядит, изображения для выбора цвета нет.

  2. Татьяна, Ответить

    Сделала у себя подобное. Но как понять какой товар выбран? радиокнопка ушла, как подсветить или выделить выбранную картинку?

Оставить ответ на Татьяна

Нажмите, чтобы отменить ответ.