Часть 1: концепция, эскиз и определение компонентов
В этой серии блогов я расскажу о процессе разработки функциональности, которую мы часто видим в наши дни: конфигуратора для нестандартного продукта. На ум приходят кружки с индивидуальным текстом или персонализированные футболки. Я создам конфигуратор продуктов для фиктивного интернет-магазина по продаже открыток. Пример нестандартной открытки показан ниже:
В конфигураторе нашего фиктивного интернет-магазина покупатель должен иметь возможность выбирать и настраивать различные параметры и функции открытки. Например, форма карты, качество бумаги и количество.
Чтобы реализовать такой конфигуратор продуктов, мы будем использовать Vue. В этой серии статей мы не будем утруждать себя проверкой или обработкой настроенных продуктов, мы сосредоточимся только на интерфейсе.
В этой первой части мне нравится сосредотачиваться на начальном этапе, когда я создаю эскиз конфигуратора продукта и проектирую структуру компонентов для Vue. Вы, конечно, можете запустить свою IDE по своему выбору и сразу начать программировать. Хотя я чувствую то же желание, конечный результат будет лучше, если мы сначала подумаем о структуре проекта.
Концепция
Итак, запишем требования конфигуратора. Он должен уметь:
- настроить сразу несколько открыток
- добавить товар
- удалить товар - для каждой открытки мы хотим:
- выбрать форму (квадрат, прямоугольная книжная или альбомная)
- выбрать формат бумаги
- выбрать количество
- выбрать качество бумаги (нормальное, extra)
- заполните текст заголовка
- заполните основной текст
- возможность сбросить конфигурацию - во время настройки цена должна обновляться автоматически при каждом изменении
Эскиз
Основываясь на спецификациях, определенных выше, я создал следующий эскиз для конфигуратора открыток.
Компоненты
Теперь пора подумать на языке Vue, то есть над компонентами. Хотя Vue не очень самоуверен в том, как настраивать ваши компоненты, мне нравится подход единственного «умного» компонента, который передает всю необходимую информацию своим дочерним элементам в качестве свойств. Дочерние компоненты передают события, когда что-то происходит.
Итак, назовем умный компонент PostCardConfigurator. Он состоит из ProductList, PriceContainer и ProceedToCheckoutButton.
ProductList перечислит набор компонентов SingleProduct и содержит компонент AddProduct. Имея их на месте, мы можем набросать структуру приложения.
Примечание о компоненте SingleProduct
Как вы можете видеть на скетче, компонент SingleProduct содержит множество входных данных. При разработке этого компонента я обязательно буду составлять его, используя более мелкие компоненты, такие как компонент CardShape, компонент PaperQuality и так далее. Сложность здесь заключается в управлении состоянием конфигуратора. Мы будем использовать для этого Vuex и подробно обсудим это в следующем посте.
Заключение и дальнейшие шаги
В этом посте мы обсудили первый этап разработки настраиваемого конфигуратора продуктов для фиктивного интернет-магазина. Мы начали со спецификаций, сделали набросок и определили компоненты Vue.
В следующих статьях я расскажу о настройке Vuex (состояние, модули, действия и мутации), отдельных компонентах и о том, как соединить точки, чтобы заставить его работать. Быть в курсе!
Первоначально опубликовано на https://www.blog.plint-sites.nl 1 мая 2019 г.