Сейчас я снова предлагаю вам поработать с настраиваемыми полями в Virtuemart 2. На этот раз — с выбором расцветки товара.
Наверняка вы обращали внимание на то, что в крупных интернет-магазинах карточки с одним и тем же типом товара часто раскрашены в разные цвета. Расцветку обычно подбирают в соответствии с размерами, стоимостью и прочими параметрами.
Выбор цвета: настраиваем изображения
Сперва мы будем работать с полем “Изображение”. Не забудьте сперва загрузить картинки с выбранными расцветками продукта.
Затем нажимаем на кнопку “Создать”. Напоминаю, что сейчас мы с вами работаем в разделе “Медиа-файлы”.
Не забудьте о названии, иначе под миниатюрой в карточке товара будет пустое место. Потом выбирайте нужную картинку с компьютера и сохраняйте ее с помощью файлового менеджера.
Залили все изображения? Пора переходить к созданию настраиваемого поля. Это делается в разделе “Товары” -> “Настраиваемые поля”.
Настройки проводим согласно вот этому скриншоту:
Работаем с карточкой товара
В выбранном товаре нужно добавить настроенные поля исходя из числа расцветок. Сколько цветов у товара — столько для него потребуется и полей.
Затем нужно будет поработать с выпадающим списком и выбрать из него изображения, которые вы заливали в самом начале.
Стилизуем карточку
После сохранения понадобится немного “причесать” карточку товара, поскольку внесенные изменения могут придать ей неаккуратный вид.
Для этого вносим новые стили в файл virtuemart /components/com_virtuemart/assets/css/vmsite-ltr.css
Меняя параметр width: 20%, вы сможете группировать расцветки в одну или две колонки.
При наложении картинок попробуйте поставить им ограничения по ширине за счет стиля. Максимальной шириной можно сделать 60px.
Для нового стиля надписи под изображением внесите изменения вот сюда:
Вот что получилось у меня: возле картинок уже не видно радиокнопку я ее скрыл стилями, а под картинкой — наименование расцветки товара оставил.
P.S.
Ну что, получилось? Если возникли вопросы, пишите их в комментариях. Всегда рад прийти вам на помощь 🙂
Легко, доступно, понятно! Работает!
Можно также доступно и наглядно научить следующему — Водолазка женская в трёх цветах и в трёх размерах. Уложить в корзину голубую водолазку 46 размера. Контроль за остатком не нужен. (для меня даже лишний)
Реализовано — цвет/размер с помощью плагина stockable в настраиваемых полях. Правда скучновато выглядит, изображения для выбора цвета нет.
Сделала у себя подобное. Но как понять какой товар выбран? радиокнопка ушла, как подсветить или выделить выбранную картинку?
Татьяна, дайте ссылочку на сайт, я гляну