Здравствуйте, дамы и господа, в этой статье расскажу о том, как сделать конфигуратор персонального компьютера на WordPress. Конечно, я не смог самостоятельно написать полноценный плагин, зато сумел найти рабочие решения, которые помогут вам сделать очень даже неплохой конфигуратор для WordPress и WooCommerce. Информацию о парочке плагинов публикую специально для вас. Надеюсь, будет полезно.

Также сделал реализацию простейшего конфигуратора с зависимостями с помощью плагина Caldera Forms. Вариант не самый элегантный, но рабочий.

С помощью каких плагинов можно сделать конфигуратор ПК для WordPress и WooCommerce

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

WooCommerce Product Builder — Custom PC Builder

Итак, решать проблему мы будем с помощью плагина WooCommerce Product Builder — Custom PC Builder. Плагин, к сожалению, платный, но он очень простой, и, самое главное, рабочий. Кстати, может работать и без WooCommerce, конфигурация будет отправляться вам через форму обратной связи.

Бесплатная версия у него, вроде бы, есть, но она не поддерживает такие вещи, как зависимости. А ведь в конфигураторе самое важное построить зависимости между такими вещами, как материнская плата → процессор → оперативная память.

И лучшей альтернативы данному плагину я попросту не нашёл. По крайней мере для создания конфигуратора он наиболее подходящий.

Плагин для WordPress
Выглядит неказисто

Конечно, каким-либо изысканным дизайном не отличается, зато легко впишется в структуру почти любого сайта.

Ну и самое главное, на демо-сайте плагина вы можете увидеть, как работают зависимости. Суть работы плагина простая:

  1. Вы создаёте несколько шагов. Например, первый шаг: выбор процессора.

  2. После станет доступен второй шаг: выбор материнской платы, соответственно, отображены будут только те, которые совместимы с выбранным на первом шаге процессором.

  3. Третий шаг — оперативная память. Её выбор возможен только с учётом совместимости с процессором и материнской платой.

  4. Дальше по аналогии, шагов можно сделать сколько угодно.

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

Пример конфигуратора ПК для WordPress
Пример конфигуратора ПК

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

Подойдёт не только в качестве билдера для персональных компьютеров, но и вообще для любого продукта, который конфигурировать можно пошагово. Хоть для автомобиля, хоть для велосипеда.

Если честно, лучшего варианта пока что не увидел. Так что рекомендую попробовать данный плагин. Он также поддерживает работу с фильтрами, сортировку по брендам.

Chained Products для WooCommerce

Этот вариант мне нравится чуть меньше. Но вполне рабочий: https://woocommerce.com/products/chained-products/. По сути данный плагин немного расширяет возможности связанных продуктов для WooCommerce. Выглядеть итог будет примерно так:

Chained Products для WooCommerce

К сожалению, решение не самое красивое, но строить зависимости, пусть и не очень сложные, можно.

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

Демо-версию данного расширения для WC можете посмотреть на этой странице: https://demo.storeapps.org/?product=samsung-laptop.

Кстати, вы можете воспользоваться админ-панелью и посмотреть, как всё устроено. На том сайте есть на неё ссылка.

Демо-версия плагина Chained Products для WooCommerce
Очень люблю такие демки

Попробуйте, может быть, это именно то, что вы ищите. В итоге вы получите довольно простое решение для WordPress и WooCommerce. Впрочем, полноценным конфигуратором ПК назвать будет всё равно трудно.

Другие варианты

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

Также я делал «конфигуратор для ПК с зависимостями» с помощью плагина Caldera Form. Решение изысканным не назовёшь, скорее некрасивым, унылым и очень костыльным. Можете почитать об этом дальше.

Костыльный конфигуратор для WordPress

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

  1. Visual Product Configurator for Woocommerce. Мощный конфигуратор, имеет массу настроек, позволяет реализовать визуальный редактор. Это для моих целей избыточно.

  2. Contact Form 7. Удобно, но есть проблема с зависимостями. Конечно, можно реализовать с помощью сторонней надстройки, но усложнять не хотелось. Кстати, цели Метрики в CF 7 добавить довольно легко. Зная CSS можно сделать очень приличную форму.

  3. Другие типы форм. Ninja Form — классный плагин, но зависимости (conditional fields) — платные. Gravity Forms шикарен, но платный. WPForms некрасивый и глючная капча с постоянно валящимся спамом вынудили с данным плагином расстаться.

В итоге принял решение остановиться на Caldera Forms. Не самый популярный плагин, хотя 100 000+ установок очень даже неплохо, так что смело можно сказать, что только на фоне некоторых других форм обратной связи не особо популярен.

Собственно, теперь пора перейти непосредственно к обзору создания простого конфигуратора на Caldera Forms.

Простые действия

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

Поля конфигуратора продукта для WordPress

Я разрабатываю конфигуратор сервера на Caldera Forms. Значит, у нас появляется выпадающее меню с комплектующими. Например, «процессор». Сначала создаем графу «Тип процессора». Там указываем: Xeon E3, E5, E7 и т. д.

Тип процессора в Caldera Forms

Теперь создаем отдельное выпадающее меню на каждый тип. Например, на фото для E3.

Выбираем CPU

Теперь обратите внимание на «Ярлык». Здесь стоит указать уникальный идентификатор, который будет нетрудно запомнить. Дальше нам это очень понадобится.

Поле

Итак, все поля созданы. Теперь переходим к созданию условий (conditional fields).

Зависимости в конфигураторе

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

Конфигуратор продукта для WordPress: зависимости

Смотрите. У нас есть тип условия. Первое — «Скрыть». Выбираем его. В графе «Если» указываем следующее «Выберите тип процессора» не является Intel Xeon Processor E3. В графе справа отмечаем, что скрыть. Как видите, там указаны ярлыки, которые до этого указывали.

Как видите, простая логика. Если что-то «является», «не является», «больше чем», «меньше чем», «начинается с», «заканчивается на», «содержит», то выполняем определенное действие с полем.

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

Что можно сделать с полем? Его можно скрыть, то бишь, при соблюдении условий поле не будет отображаться. Показать, в таком случае поле будет отображаться при соблюдении набора зависимостей, а также отключить, в таком случае поле будет отображаться, но с ним будет невозможно взаимодействовать.

Зависимости в Caldera Forms
Caldera Forms для конфигуратора

Как будете работать дальше, зависит от вашей логики, но зависимые поля в Caldera Forms – довольно мощный инструмент, позволяющий реализовать довольно сложные схемы. Пользуйтесь, надеюсь, сумел вам помочь. Теперь вы способны сделать довольно сложный конфигуратор продукта для WordPress. Конечно, не самый красивый, но эффективный.

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 4.5 / 5. Количество оценок: 2

Оценок пока нет. Поставьте оценку первым.

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