Skip to content

Latest commit

 

History

History
89 lines (67 loc) · 3.8 KB

README.md

File metadata and controls

89 lines (67 loc) · 3.8 KB

Проектная работа "Веб-ларек"

Стек: HTML, SCSS, TS, Webpack

Структура проекта:

  • src/ — исходные файлы проекта
  • src/components/ — папка с JS компонентами
  • src/components/base/ — папка с базовым кодом

Важные файлы:

  • src/pages/index.html — HTML-файл главной страницы
  • src/types/index.ts — файл с типами
  • src/index.ts — точка входа приложения
  • src/scss/styles.scss — корневой файл стилей
  • src/utils/constants.ts — файл с константами
  • src/utils/utils.ts — файл с утилитами

Установка и запуск

Для установки и запуска проекта необходимо выполнить команды

npm install
npm run start

или

yarn
yarn start

Сборка

npm run build

или

yarn build

Архитектура

ICart (Компонент корзины для покупок)

  • items: Map<string, number> — товары в корзине, где ключ — ID товара, а значение — количество.
  • add(id: string): void — метод для добавления товара по ID.
  • remove(id: string): void — метод для удаления товара по ID.

ICatalog (Компонент каталога товаров)

  • items: IProduct — список товаров.
  • setItems(items: IProduct[]): void — метод для установки списка товаров.
  • getProduct(id: string): IProduct — метод для получения товара по ID.

IProduct (Модель данных товара для расположения на странице)

  • id: string — уникальный идентификатор.
  • description: string — описание.
  • image: string — ссылка на изображение.
  • title: string — название.
  • category: string — категория.
  • price: number | null — цена (может быть null, если цена не указана).

IOrderForm (Модель формы для заказа)

  • payment?: string — способ оплаты.
  • address?: string — адрес доставки.
  • phone?: string — телефон.
  • email?: string — email.
  • total?: string | number — итоговая стоимость заказа.

IOrder (Модель сформированного заказа, используется для обращения к серверу)

  • Наследует IOrderForm и добавляет:
    • items: string[] — массив ID товаров в заказе.

OrderError (Модель ошибок (Неправильные данные введены))

  • Partial<Record<keyof IOrder, string>> — это объект, где ключами могут быть поля заказа (IOrder), а значениями — сообщения об ошибках.

IOrderResponse (Модель ответа от сервера)

  • id: string — ID заказа.
  • total: number — итоговая стоимость заказа.

IView (Модель для перевода объекта в html-элемент)

  • render(data?: object): HTMLElement — метод для рендеринга HTML-элемента.

IViewConstructor (Модель для перевода html-элемент в объект)

  • Определяет сигнатуру конструктора классов, реализующих IView.
  • Принимает container: HTMLElement (куда рендерится представление) и events?: IEvents (объект событий).