Cms3-shop-module-ts NPM

cms3-shop-module

Модуль магазина для CMS3 Frontend (Nuxt)

Модуль cms3-shop-module предназначен для работы с товарами, с их фильтрами и категориями, а так же с корзиной и избранными. Он включает в себя хранилища (далее stores), миксины (далее mixins) и плагины (далее plugins)

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

# Клонируем проект
$ git@gitlab.com:involta-cms/ts-shop.git

# Установка рабочей версии ноды для проекта
$ nvm use

# Устанавливаем путь до репозитория
$ npm config set registry http://5.9.95.92:54873
$ npm login

# Либо создаём .npmrc конфиг в корне проекта, где указываем адрес приватного репозиторий и ВАШ ключ авторизации (~/.npmrc)Либо создаём .npmrc конфиг в корне проекта, где указываем адрес приватного репозиторий и ВАШ ключ авторизации (~/.npmrc)
registry=http://5.9.95.92:54873/
//5.9.95.92:54873/:_authToken="ВАШ ТОКЕН"
$ npm install cms3-shop-module-ts

# В nuxt.config.js или nuxt.config.ts добавить модуль в раздел modules
modules: {
    // ...Ваши модули
    'cms3-shop-module-ts'
}

# Наслаждаемся

Использование

Плагины

Модуль предоставляет набор плагинов, которые скрывают от вас работу с stores(хотя можно работать и напрямую). Так же выполняют чтение куков пользователя с целью идентификации корзины. Каждый плагин добавляет свою точку вхождения в прототип Vue.

Плагин товаров - $products
Плагин фильтров - $filters
Плагин каталога - $catalog
Плагин категорий - $categories
Плагин избранных - $favorites (Внимание! Скорее всего, избранные будут вынесены в отдельный репозиторий!)
Плагин заявок - $blank
Плагин заказов - $order
Плагин корзины - $cart
Плагин seo данных - $seo

$products

/**
 * * Плагин товаров
 */
export interface ProductsPlugin {
  /**
   * * Все товары
   */
  readonly get: Record<string, ProductsData>
  /**
   * * Получить данные о товарах по их хешу
   * @param hash - хеш
   */
  getByHash(hash: string): ProductsData
  /**
   * * Получить данные о товаре по его id и хешу
   * @param hash - хеш
   * @param id - id хешу
   */
  getById(hash: string, id: number): Product | undefined
  /**
   * * Получить товары с сервера
   */
  fetchProducts(): Promise<ProductsRecord>
  /**
   * * Получить товр по его id
   * @param id - id товара
   */
  fetchProduct(id: number): Promise<Product>
  /**
   * * Очистить кеш
   */
  clearCache(): void
  /**
   * * Заменить данные о товаре в кеше
   * @param product - товар для замены
   */
  replaceCached (product: Product): void
}

$filters

/**
 * * Плагин фильтров
 */
export interface FiltersPlugin {
  all: Record<number, Array<Filter>>
  /**
   * * Получить фильтры по id категории
   */
  getById: (categoryId: number) => Array<Filter>
  /**
   * * Получить ids фильтры по их code
   */
  getIdsByCodes: (categoryId: number, codes: Array<string>) => Array<number>
  /**
   * * Получить фильтры для запроса
   */
  getQueryFilters: (categoryId: number, filters: Array<number>) => Record<number, Array<number>>
  /**
   * * Получить фильтры для запроса
   */
  getFullQueryFilters: (categoryId: number, filters: Array<number>) => PageFilters
  /**
   * * Установить фильтр для категории
   */
  set: ({ categoryId, filters }: { categoryId: number, filters: Array<Filter> }) => void
  /**
   * * Получить список фильтров для определенной категории
   */
  fetch: (categoryId: number) => Promise<{ categoryId: number, filters: Array<Filter>}>
}

$blank

/**
 * * Плагин заявок
 */
export interface BlankPlugin {
  /**
   * * Создать заявку
   * @param offerId id торогового предложения
   */
   create: (offerId: number) => Promise<BlankCreateResponse>;

   /**
    * * Получить список заявок
    */
   list: () => Promise<Array<Blank>>;

   /**
    * * Отменить заявку
     * @param id id торогового предложения
    */
   close: (id: number) => Promise<BlankCloseResponse>;
}

$order

/**
  * * Плагин заказов
  */
export interface OrderPlugin {
   /**
    * * Получить список заказов
    * @param limit Лимит колличества вывода заказов на одну страницу
    */
  list: (limit: number) => Promise<Array<Orders>>;

   /**
    * * Получить детали заказа
     * @param orderId id заказа
    */
  detail: (orderId: number) => Promise<Array<Order>>;
}

$catalog

/**
 * * Плагин корзины
 */
export interface CatalogPlugin {
  /**
   * * Установить номер страницы
   * @param page - номер страницы
   */
  setPage(page: number): void
  /**
   * * Getter & Setter номера страницы в хранилище
   */
  page: number
  /**
   * * Установить фильтры пользователя
   * @param filters - список id фильтров
   */
  setFilters (filters: Array<number>): void
  /**
   * * Getter & Setter
   */
  filters: Array<number>
  toggleFilter (filterId: number): void
  /**
   * * Установить фильтр цены
   * @param priceFilter - фильтр цен
   */
  setPriceFilter(priceFilter: PricesFilter): void
  /**
   * * Getter & Setter фильтра цен
   */
  priceFilter: PricesFilter
  /**
   * * Установить сортировку
   * @param sorting - сортировка
   */
  setSort(sorting: Sorting): void
  /**
   * * Getter & Setter сортировки
   */
  sorting: Sorting
  /**
   * * Получить полную информацию о текущей категории
   */
  readonly category: Category | undefined
  /**
   * * Установить данные каталога
   * @param data - данные каталога
   */
  setData(data: PageData): void
  readonly requestData: CatalogData
  /**
   * * Получить список товаров
   */
  fetchAll (): Promise<ProductsData>
  /**
   * * Получить товар
   * @param productId - id товара
   */
  fetch (productId: number): Promise<Product>
  /**
   * * Получить сопутствующие товары
   * @param productId - id товара
   */
  related (productId: number): Promise<Array<Product>>
}

$categories

/**
 * * Плагин категорий
 */
export interface CategoriesPlugin {
  /**
   * * Список категорий
   */
  readonly list: Array<Category>
  /**
   * * Получить категорию по id
   */
  getById: (id: number) => Category | undefined
  /**
   * * Получить категорию по ее коду
   */
  getByCode: (code: string) => Category | undefined
  /**
   * * Получить список категорий по их кодам
   */
  getByCodes: (codes: Array<string>) => Array<Category>
  /**
   * * Присвоить категории
   */
  set: (categories: Array<Category>) => void
  /**
   * * Получить список категорий
   */
  fetch: () => Promise<Array<Category>>
}

$cart

/**
 * * Плагин корзины
 */
export interface CartPlugin {
  /**
   * * Токен корзины
   */
  token: string
  /**
   * * Список торговых предложений
   */
  readonly offers: Array<CartOffer>
  /**
   * * Список торговых предложений под заказ
   */
  readonly underOffers: Array<CartOffer>
  /**
   * * Можно ли добавлять под заказ
   */
  ignoreUnderTheOffer: boolean
  /**
   * * Итоговая цена товаров в корзине и их кол-во
   */
  readonly totalInfo: TotalInfo
  /**
   * * Изменить кол-во единиц торговых предложений
   */
  change: (offers: Array<OfferChange>, change?: boolean) => Promise<Array<CartOffer>>
  /**
   * * Получить список торговых предложений в корзине
   */
  fetch: () => Promise<Array<CartOffer>>
}

$catalog

/**
 * * Плагин корзины
 */
export interface CatalogPlugin {
  /**
   * * Установить номер страницы
   * @param page - номер страницы
   */
  setPage(page: number): void
  /**
   * * Getter & Setter номера страницы в хранилище
   */
  page: number
  /**
   * * Установить фильтры пользователя
   * @param filters - список id фильтров
   */
  setFilters (filters: Array<number>): void
  /**
   * * Getter & Setter
   */
  filters: Array<number>
  toggleFilter (filterId: number): void
  /**
   * * Установить фильтр цены
   * @param priceFilter - фильтр цен
   */
  setPriceFilter(priceFilter: PricesFilter): void
  /**
   * * Getter & Setter фильтра цен
   */
  priceFilter: PricesFilter
  /**
   * * Установить сортировку
   * @param sorting - сортировка
   */
  setSort(sorting: Sorting): void
  /**
   * * Getter & Setter сортировки
   */
  sorting: Sorting
  /**
   * * Получить полную информацию о текущей категории
   */
  readonly category: Category | undefined
  /**
   * * Установить данные каталога
   * @param data - данные каталога
   */
  setData(data: PageData): void
  readonly requestData: CatalogData
  /**
   * * Получить список товаров
   */
  fetchAll (): Promise<ProductsData>
  /**
   * * Получить товар
   * @param productId - id товара
   */
  fetch (productId: number): Promise<Product>
  /**
   * * Получить сопутствующие товары
   * @param productId - id товара
   */
  related (productId: number): Promise<Array<Product>>
}

$favorites

/**
 * * Плагин избранных
 */
export interface FavoritesPlugin {
  /**
   * * Список избранных товаров
   */
  favorites: Array<Product>
  /**
   * * Toggle для избранных товаров
   * @param productId - id товаров
   */
  toggle(productId: number): Promise<ToggleResponse>
}

$seo

/**
 * * Плагин seo данных
 */
export interface SeoPlugin {
  /**
   * * Получить seo данные с сервера
   */
  fetch(requestData: string): Promise<SeoMeta>
}

Примеры использования

// В коде
export default {
    getters: {
        // Getter списка категорий
        categories () {
            return this.$categories.list
        }
    }
}

В вёрстке
<template>
    <div>
        <p
          v-for="(category, index) in $categories.list"
          :key="category.id"
        >
          {{ category.title}}
    </div>
</template>