Часть 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 г.