- Видео обзор.
- Основные возможности и особенности.
- Настраиваемые товары.
- Группы.
- Теги.
- Совместимость.
- Настройки.
- Пункты меню.
- Создание конструктора товаров VirtueMart.
Product Builder – платный русскоязычный компонент Joomla и VirtueMart для создания конструктора товаров с проверкой совместимости разных товаров друг с другом.
Видео обзор
- Настраиваемые товары – 00:03:2
- Группы – 00:04:38.
- Теги – 00:08:59.
- Совместимость – 00:09:38.
- Настройки – 00:14:16.
- Пункт меню «Минимальный» – 00:17:13.
- Пункт меню «Наложение изображений» – 00:18:13.
- Пункт меню «Не редактируемый» – 00:19:42.
- Пункт меню «Статические изображения по верхнему краю» – 00:20:58.
Видео лучше просматривать с качеством 720 HD. Этот и другие видео уроки можете найти на каналах сайта Aleksius.com в YouTube и Mail.ru.
Ссылки из видео:
Пример использования плагина. Можно создать страницу с подбором комплектующих и периферийных устройств для компьютера. Для проверки совместимости между товарами используется встроенная в Product Builder система тегов.
Отмечу, что создание такого рода конструктора для большого количества товаров (сотни, тысячи) с множеством проверок зависимости может занять очень много времени. А с учётом постоянно меняющегося ассортимента, временные затраты, необходимые для актуализации данных, могут быть нерентабельными.
Поэтому я бы рекомендовал создавать конструктор только для наиболее продаваемых/популярных товаров. Или в ситуации, когда таких товаров не много (до сотни), или их ассортимент редко обновляется. Например, для подбора совместимого производственного оборудования, расходных материалов и т.д. Если Вы продаёте широкоформатные роликовые резаки для бумаги и лезвия для них, то в конструкторе можно настроить зависимость лезвий от резака. Таким образом, клиент сможет сразу купить резак и запасные лезвия к нему. Но можно организовать и более многоуровневую зависимость.
В обзоре участвует последняя, на момент написания статьи (28.09.2020), русскоязычная версия Product Builder 3.1.8 в Joomla 3.9.21 и VirtueMart 3.8.4.10335, PHP 7.4.5.
Основные возможности и особенности
- Создание конструктора товаров с проверкой зависимости/совместимости товаров (рисунок ниже). Проверка осуществляется на базе присвоенных тегов к товарам.
- Создание групп товаров конструктора на основании групп товаров VirtueMart.
- Все действия на странице конструктора (выбор, просмотр товаров, подсчёт цены и т.д.) проходят без её перезагрузки (на основе AJAX).
- Процесс подбора товаров можно разделить на шаги. Это поможет упростить его для Ваших покупателей.
- Возможность изменения внешнего вида некоторых (стилей) элементов конструктора в админке компонента.
- Четыре типа отображения товаров: выпадающий список, радиокнопки, миниатюры, радиокнопки с миниатюрами и названиями товаров.
- Возможность создания спадающего списка с вариантами количества товаров для каждой группы.
- Возможность указания минимального и максимального количества заказа для настраиваемых товаров.
- Группы товаров Product Builder могут содержать одну или несколько групп товаров VirtueMart или один/несколько товаров VirtueMart.
- Для групп товаров можно задать товар и количество по умолчанию.
- Можно выводить итоговое изображение собранного товара в виде наложения изображений отдельных товаров. Например, футболка и картинка на ней.
- Возможность создания комплекта товаров в админке. Это позволит покупателю добавить его в корзину одним нажатием. Эта возможность чем-то напоминает плагин Product Bundles.
- Поддержка товаров VirtueMart с настраиваемыми полями и дочерними товарами. Поддержка настраиваемых полей Dependent Custom Fields For All и Stockable Custom Fields.
- Наличие расширенного поиска товаров в группах. Поиск аналогичен поиску, который используется в фильтре товаров Custom Filters.
- Семь типов пунктов меню.
- Возможность добавления мета-описания и мета-ключевых слов в настраиваемые товары.
- Наличие ряда опций для конфигурации страниц компонента: отображение, цены, скидки, отображение/скрытие/настройка изображений товаров, настройки отображения количества товаров и т.д.
- Поддержка мультиязычностия Joomla.
- Компонент переведён на русский, английский, немецкий, итальянский и другие языки.
- Справка и техническая поддержка на английском языке.
- Система обновления компонента прямо из админки Joomla.
Настраиваемые товары
В этом разделе (рисунок ниже) Вы сможете создавать настраиваемые товары Product Builder. Настраиваемые товары Product Builder – это своего рода «вместилища» товаров VirtueMart. Например, настраиваемый товар «Компьютер» может вмещать в себя товары VirtueMart: процессор, материнскую плату, SSD диск и оперативную память.
В статье приведён пример конструктора товара (компьютера) не учитывая реальные комплектующие и периферийные устройства, необходимые для работы полноценного компьютера. Также не учитывается их реальная совместимость и внешний вид. Вся информация представлена исключительно для примера.
При создании настраиваемого товара (рисунок ниже) Вы сможете задать название, артикул, изображение, описание товара и мета-данные. В моём примере в качестве текстового редактора для описания товара используется JCE. У Вас может быть другой.
Тут же в настройках Вы сможете указать максимальное и минимальное количество заказа настраиваемого товара и включить проверку совместимости (одноимённая опция). Проверка нужна в ситуации, когда не все выбираемые товары VirtueMart, входящие в данный настраиваемый товар, совместимы друг с другом. Например, процессоры с материнскими платами (нужна проверка подходящего сокета).
Группы
В данном разделе (рисунок ниже) создаются группы для настраиваемых товаров. Тут же можно задать порядок их следования в конструкторе товаров во фронтальной части сайта.
Порядок следования групп очень важен в ситуациях, когда есть проверка совместимости товаров. Так как совместимость проверяется по порядку следования групп (от первой и дальше). Например, выбрав процессор для сокета 1151 в первой группе, во второй группе появятся материнские платы только с сокетом 1151. Выбрав материнскую плату с сокетом 1151 и слотом М.2, в третьей группе появятся только SSD диски, подключаемые через M.2.
Опции, доступные при создании групп разделены на три вкладки (рисунок ниже).
Вкладка Основной (рисунок ниже). Позволяет задать имя группы, которое будет видно покупателям во фронтальной части сайта, указать язык (для мультиязычный сайтов) и указать порядок следования этой группы в рамках групп конкретного настраиваемого товара.
Тут же есть важная опция Настраиваемы товар, которая позволяет указать созданный ранее настраиваемый товар. Чтобы в конструкторе товаров для этого товара появились все нужные группы, то в каждой из групп указать этот настраиваемый товар. Например, в моём случае для групп «Процессор», «Материнские платы», «SSD», «Оперативная память» назначен один и тот же настраиваемый товар – «Компьютер».
Вкладка Опции группы (рисунок выше). Содержит настройки, позволяющие сконфигурировать функционирование группы. Рассмотрю наиболее интересные из них.
- Редактируемый. Если в группе должно быть несколько товаров, то следует активировать эту опцию.
- Обязательное. Product Builder для VirtueMart позволяет сделать так, чтобы покупатель обязан был выбрать хотя бы один товар из группы. Иначе он не сможет положить настраиваемый товар в корзину.
- Searchable (поиск). Отображает поле поиска по товарам VirtueMart внутри группы.
- Связь с. Тут можете указать один/несколько товаров VirtueMart или одну/несколько категорий товаров VirtueMart, которые будут отображаться внутри группы Product Builder. Обратите внимание, что категории и товары VirtueMart уже должны быть созданы.
- Товар по умолчанию. Можно задать товар, который будет выбран в группе по умолчанию. Таким образом создаётся комплект товаров в админке, а на сайте его можно положить в корзину одним нажатием. Если для опции Редактируемый выбрано Нет, то покупатель не сможет изменить товар, выбранный Вами по умолчанию.
- Тип отображения товаров. Можно выбрать один из четырёх типов отображения товаров внутри группы: Выпадающий список, Радио кнопки, Изображения миниатюр, Радио кнопки с изображениями и Названиями товаров. На рисунке ниже показан пример всех четырёх вариантов в порядке следования в предыдущем списке.
Вкладка Опции количества. Позволяет изменить стандартное поле выбора количества товара (на рисунок ниже показано в нижней части) на спадающий список (на рисунке ниже показано в верхней части).
Вы можете указать количество товаров, которое будет указано по умолчанию. Можно вовсе скрыть это поле или создать выпадающий список, задав начальное, конечное значения и шаг прироста. На рисунке ниже, в верхней части, показан пример с такими настройками:
- Количество по умолчанию – 1.
- Отобразить блок с количеством – Да.
- Блок с параметром Количество – Выпадающий список.
- Начало – 1.
- Шаг прироста – 2.
- Конец – 10.
Теги
В данном разделе Вы сможете создавать и управлять тегами. Теги нужны для настройки проверки совместимости между товарами VirtueMart в конструкторе товаров. При создании тега Вы сможете указать его название и написать примечание. Теги не отображаются во фронтальной части сайта.
В моём примере я создал теги «Сокет 1151» и «Сокет AM4» для проверки совместимости процессора и материнской платы. А теги «M.2» и «SATAIII» для проверки совместимости материнской платы и SSD диска.
Совместимость
Для создания комплектов товаров на сайте и проверки совместимости товаров в комплекте Вам надо присвоить одинаковые теги для определённых товаров. В разделе Совместимость (рисунок ниже) как раз и происходит назначение тегов к товарам.
Для удобства добавления тегов Вам доступны инструменты поиска, фильтрации и сортировки товаров VirtueMart. По каждому из товаров Вы можете увидеть название, артикул, категорию, ID, цены и, нажав на ссылку в столбце подробностей, можете увидеть его описание и производителя.
В моём примере, чтобы настроить проверку совместимости процессоров и материнских плат я задал такие настройки:
- Процессор Intel Core i3-9100F 3.6GHz/8GT/s/6MB (BX80684I39100F) – тег «Сокет 1151».
- Процессор AMD Ryzen 5 1600 3.2GHz/16MB (YD1600BBAFBOX) sAM4 BOX – тег «Сокет AM4».
- Материнская плата Asus TUF B360M-E Gaming (s1151) – тег «Сокет 1151».
- Материнская плата Asus B360M-E – тег «Сокет 1151».
- Материнская плата Asus TUF B450-Pro Gaming (sAM4) – тег «Сокет AM4».
Это сделано для того, чтобы при выборе в группе процессоры товара «Процессор Intel Core i3-9100F 3.6GHz/8GT/s/6MB (BX80684I39100F)», в группе материнских плат появлялись товары «Материнская плата Asus TUF B360M-E Gaming (s1151)» и «Материнская плата Asus B360M-E». А при выборе в группе процессоры товара «Процессор AMD Ryzen 5 1600 3.2GHz/16MB (YD1600BBAFBOX) sAM4 BOX», в группе материнских плат появлялся товар «Материнская плата Asus TUF B450-Pro Gaming (sAM4)».
Настройки
Все настройки компонента разделены на четыре вкладки:
- Опции фронт-энд части.
- Стилизация.
- Products Search (поиск товаров).
- Обновление с сайта. Позволяет ввести ID загрузки для получения обновлений компонента прямо из админки Joomla. Тут же можно отключить уведомления о старых версиях PHP на сайте.
Рассмотрю только наиболее интересные, на мой взгляд, опции.
Вкладка Опции фронт-энд части (рисунок ниже). Заданные тут настройки влияют на все пункты меню, если для конкретного пункта меню не переопределена та или иная опция.
- Отображать ссылку Подробнее о товаре. Выбрав товар в группе, пользователь сможет открыть всплывающее окно с описанием товара (страница товара VirtueMart с кнопкой добавления в корзину и т.д.).
- Показать описание произвольного товара, Показать изображение произвольного товара, Высота изображения настраиваемого товара. Влияет на наличие описания и изображения настраиваемого товара.
- Отображение неподходящих товаров. Если товары не совместимы, то их можно или скрыть или сделать недоступными для выбора.
Вкладка Стилизация (рисунок ниже). Содержит опции для изменения цвета некоторых элементов страницы создания наборов товаров VirtueMart.
Вкладка Products Search (рисунок ниже). Содержит настройки поиска товаров внутри групп. Вы сможете указать, в каких полях/областях товаров VirtueMart нужно искать слово, заданное покупателем. Тут же можно выбрать поиск точного соответствия или любого искомого слова.
Пункты меню
У компонента Product Builder есть семь типов пунктов меню. У каждого из них есть свои настройки. Эти настройки позволяют переопределить настройки компонента.
Пункт меню Минимальный (рисунок ниже). Отображает группы настраиваемого товара. Тут покупатель сможет «создать» свой товар из нескольких товаров. По сути, в корзину попадёт список товаров точно так, как если бы пользователь добавлял их по отдельности.
В настройках пункта меню (рисунок ниже), Вы сможете указать настраиваемый товар Product Builder, переопределить некоторые опции, доступные в настройках компонента и разбить выбор товаров на шаги.
На рисунке ниже показан первый из четырёх шагов выбора товаров из категорий.
Пункт меню Наложение изображений. Данный тип пункта меню похож на предыдущий, но его отличие в том, что все картинки товаров VirtueMart, которые выбирает пользователь, будут накладываться одна на другую (рисунок ниже). Для получения подобного эффекта Вам нужно задавать товарам VirtueMart изображения с прозрачным фоном.
В настройках пункта меню на вкладках Подробности, Опции компонента и Шаги есть те же самые настройки, что и у пункта меню тип Минимальный. Но во вкладках Параметры и Опции настраиваемых полей для изображения есть отличающиеся настройки (рисунок ниже).
Пункт меню Не редактируемый (рисунок ниже). Позволяет отображать не редактируемый настраиваемый товар. Чтобы создать такой настраиваемый товар, необходимо в группах этого товара на вкладке Опции группы выбрать Нет для Редактируемый, Да – для Товар по умолчанию и указать товар VirtueMart, который будет использоваться в этой группе.
В настройках этого пункта меню Вы найдёте уже знакомые опции (рисунок ниже).
Пункт меню По умолчанию (рисунок ниже). Данный пункт меню отображает настраиваемый товар с группами товаров и увеличенным изображением товаров VirtueMart справа от групп.
В настройках пункта меню (рисунок ниже) находятся те же опции, что и в уже рассмотренных пунктах меню.
Пункт меню Статические изображения по верхнему краю (рисунок ниже). Данный пункт меню отображает настраиваемый товар с группами товаров и увеличенным изображением товаров VirtueMart вверху групп.
Настройки этого пункта меню такие же, как у пункта меню По умолчанию. Отличается только вкладка Параметры (рисунок ниже).
Пункт меню Статические изображения по правому краю. Я не обнаружил отличий между этим пунктом меню и пунктом меню Статические изображения по правому краю. Возможно, из-за шаблона сайта. Но в шаблоне vmBeez3, встроенном в Joomla, также не нашёл отличий.
Пункт меню Страница просмотра настраиваемых товаров (рисунок ниже). Отображает один или несколько настраиваемых товаров.
В опциях пункта меню (рисунок ниже) Вы сможете сконфигурировать отображение товаров и разбиение их на страницы.
Создание конструктора товаров VirtueMart
Рассмотрим укрупнённые шаги процесс создания конструктора товаров с поверкой совместимости товаров. Более подробно этот вопрос рассмотрен в видео, а различные опции описаны выше в статье.
Предполагается, что у Вас уже установлены все нужные расширения, созданы категории и товары VirtueMart.
Шаги 1-4 выполняются в компоненте Product Builder.
Шаг 1. В разделе Настраиваемые товары создайте настраиваемый товар. В его опциях включите настройку Совместимость.
Шаг 2. В разделе Группы создайте группы. В настройках групп, на вкладке Основной в спадающем списке Настраиваемый товар, укажите созданный на первом шаге настраиваемый товар. На вкладке Опции групп включите настройку Редактируемый, а в области Связь с укажите категорию товаров или товары VirtueMart, которые необходимо отображать в группе.
Шаг 3. В разделе Теги создайте теги, при помощи которых будете проверять совместимость товаров VirtueMart.
Шаг 4. В разделе Совместимость назначьте соответствующие теги тем или иным товарам VirtueMart.
Шаг 5. В менеджере меню Joomla создайте пункт меню, например, Минимальный, для отображения конструктора товаров на сайте.
Шаг 6. Проверьте работу конструктора и при необходимости измените конфигурацию настраиваемого товара, групп, тегов, совместимости, пункта меню и самого компонента Product Builder.
Как видите, данный компонент обладает весьма неплохим набором возможностей для создания конструктора товаров VirtueMart. Процесс настройки относительно несложный и достаточно быстрый, при условии, если не нужно настраивать проверку совместимости для большого количества товаров.
| Похожие материалы |
|---|
| Автор статьи – Хорошевский Алексей |
|---|
 Кандидат технических наук, преподаватель Харьковского национального университета радиоэлектроники, веб-мастер и SEO-оптимизатор с опытом более 15 лет. Специалист по созданию сайтов на Joomla и WebSite X5. Автор научных публикаций, видеокурсов и обучающего контента по веб-разработке и SEO. Ведёт блог и YouTube-канал, где делится своими знаниями и практическим опытом. Предоставляет услуги по созданию, доработке, сопровождению и продвижению сайтов. Подробнее об авторе… Публикации и работа: |
Полезные ссылки:
