Конфигуратор товара: как показывать совместимые опции и итоговую цену

Комплектация начинается с допустимого сочетания

Конфигуратор товара связывает выбор покупателя с правилами изготовления, поэтому главным документом становится перечень допустимых сочетаний. Для изделия на заказ рассмотрим размер, материал и дополнительное оснащение: сайт помогает собрать вариант и показывает итоговую цену либо передаёт запрос на расчёт. Обычные готовые варианты каталога здесь остаются отдельной задачей.

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

Для первого объёма лучше выбрать ограниченное семейство изделий с понятными правилами, чем обещать универсальный конструктор всего ассортимента, поскольку неописанные исключения обнаружатся уже после запуска и заставят команду переделывать не только экран, но и способ расчёта. Граница семейства записывается в задании. Всё, что выходит за неё, получает понятный путь к запросу специалисту. Клиент узнаёт об этой границе до отправки.

Справочник опций и владелец правил

Материал и дополнительное оснащение описывают отдельно. Затем задают, какие значения связаны между собой. Список названий без этих зависимостей ещё не определяет возможный товар.

Для каждой опции нужны название, допустимые значения и влияние на другие ответы, чтобы сотрудник мог исправить правило без переименования всех вариантов изделия и понять, какие комбинации перестанут действовать после изменения. Отдельно назначают владельца справочника. Он подтверждает новые материалы и ограничения. Разработчик сообщает, какие изменения доступны через интерфейс, а какие требуют доработки. Это позволит оценить дальнейшее обслуживание конфигуратора до запуска. После изменения правила владелец получает список затронутых опций, чтобы принять последствия для доступного выбора.

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

Изменение материала пересматривает оснащение

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

Покажите причину недоступности рядом с вариантом. Сообщение о несовместимости помогает выбрать другой материал или отказаться от оснащения, тогда как серый пункт без текста заставляет искать ошибку интерфейса. Для отключения стандартного поля HTML используется disabled. MDN указывает, что отключённые поля не отправляются с формой. Поэтому исполнитель отдельно показывает, какие значения сохранятся в итоговой комплектации после изменения доступности.

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

Числовой размер требует единицы и шага

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

Для стандартного числового поля HTML атрибут min задаёт нижнюю границу. Атрибут max задаёт верхнюю. Это названия для обсуждения со специалистом, а в интерфейсе остаётся понятное объяснение допустимого размера. Ограничение в браузере помогает человеку. Окончательную допустимость комплектации всё равно оценивает сервер по утверждённым правилам.

Точность задаётся отдельно. В документации числового ввода step определяет допустимый шаг относительно его основания. Для обязательного значения используется required. Он влияет на допустимость пустого поля. Не стоит выдавать эти параметры за готовую производственную логику: диапазон ещё не описывает связь ширины с материалом или оснащением.

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

Покупатель видит группы, а не перечень полей

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

В руководстве W3C для объединения связанных элементов формы используются fieldset и legend. Они задают группу и её заголовок. Заказчику полезно назвать такие группы до макета. Тогда общий вопрос о материале не потеряется среди похожих переключателей. На телефоне заголовок сохраняет смысл выбора после переноса элементов на новые строки.

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

Итоговая цена показывает, что в неё вошло

Человек оценивает цену собранного изделия. Если крупная сумма относится только к основе, это объясняют до выбора оснащения. Неожиданная доплата в корзине разрушит смысл предварительного расчёта.

Возьмём расчётный пример: основа стоит 12 000 рублей. Доплата за выбранный материал равна 1 500 рублям. Оснащение добавляет 2 000 рублей. Итог составляет 15 500 рублей. Это арифметический пример структуры цены. Для действительного изделия формулу утверждает компания и сообщает, какие услуги или доставка в неё входят.

Если цена требует ответа специалиста, лучше прямо предложить запрос расчёта с сохранённым составом, чем показывать приблизительную сумму без объяснения, которую покупатель примет за готовое предложение и будет ожидать при подтверждении покупки. Точная цена и предварительная оценка получают разные подписи. Смена материала пересчитывает ту же сводку. Удалённая опция перестаёт участвовать в сумме.

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

В заказ передают выбранное изделие

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

Сохраните снимок состава и применённой цены в момент оформления, чтобы последующее обновление справочника материалов не переписало прежнюю договорённость и сотрудник мог объяснить, что именно компания приняла в работу. Снимок здесь означает данные заказа. Это не фотография экрана. Для запроса расчёта передают тот же состав. Ответ специалиста затем связывают с этим запросом, а не с заново собранным похожим вариантом.

Я бы включил читаемую сводку в подтверждение клиенту, потому что внутренние обозначения не позволяют заметить неверный материал или потерянное оснащение, а обнаружить расхождение до изготовления гораздо полезнее, чем после получения изделия. Ошибка становится предметом уточнения до начала работ. Сотрудник видит те же параметры. Если требуется уточнение, оно относится к сохранённому набору.

Приёмка проходит по границам правил

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

Выберите набор, который компания готова изготовить, и измените материал после добавления оснащения: в результате принимают пересмотр зависимого ответа и итоговой цены, причём оба изменения видны в сводке перед отправкой заказа. Затем попробуйте недопустимый размер. Возврат к правильному значению восстанавливает возможность продолжить. Клиентская сводка совпадает с данными сотрудника. Повторное открытие запроса сохраняет исходную комплектацию. При переименовании или снятии опции с продажи сохранённый заказ продолжает показывать исходное исполнение, которое компания приняла к изготовлению.

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

• Допустимый полный набор.
• Границы числового размера и неверная дробь.
• Смена основы после выбора оснащения.
• Удаление доплаты из итоговой суммы.
• Передача состава в заказ либо запрос расчёта.
• Повторное открытие после обновления справочника.

Правила, сводка и цена образуют результат

Готовый конфигуратор соединяет три понятных ответа. Что компания изготовит, сколько это стоит и какой состав получил менеджер. Остальные детали экрана служат этим ответам.

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