Sku-specs-select NPM

sku-specs-select

商品多规格选择器

demo

Usage

const specGroups = [
  {
    id: 1,
    name: '颜色',
    specs: [
      { id: 11, name: '树莓红茶' },
      { id: 12, name: '樱花金' },
      { id: 13, name: '柠檬海盐' },
    ],
  },
  {
    id: 2,
    name: '长度',
    specs: [
      { id: 21, name: '39cm' },
      { id: 22, name: '43cm' },
      { id: 23, name: '45cm' },
      { id: 24, name: '48cm' },
    ],
  },
  {
    id: 3,
    name: '尺码',
    specs: [
      { id: 31, name: 'S' },
      { id: 32, name: 'M' },
      { id: 33, name: 'L' },
    ],
  },
]

const products = [
  {
    id: '1',
    specs: [
      { id: 12, name: '樱花金' },
      { id: 21, name: '39cm' },
      { id: 31, name: 'S' },
    ],
  },
  {
    id: '2',
    specs: [
      { id: 12, name: '樱花金' },
      { id: 21, name: '39cm' },
      { id: 32, name: 'M' },
    ],
  },
  {
    id: '3',
    specs: [
      { id: 12, name: '樱花金' },
      { id: 22, name: '43cm' },
      { id: 32, name: 'M' },
    ],
  },
  {
    id: '4',
    specs: [
      { id: 11, name: '树莓红茶' },
      { id: 22, name: '43cm' },
      { id: 33, name: 'L' },
    ],
  },
]

const selectedSpecs = []
const skuSelector = new SKUSelector(specGroups, products)
const usableSpecsIds = skuSelector.getSpecsInfo(selectedSpecs).useableSpecsIds

实现方案 - 用图和邻接矩阵实现 SKU 商品规格选择器

SKU 商品选择器是在电商业务中经常出现的场景，用户购买商品时往往需要选择商品的一些规格，比如款式、颜色、尺码等，页面上要提示用户还有哪些可以选择的规格。

npm.io

这里假设后端返回了 JK 商品的数据如下：

// specs
specsGroup = [
  { title: '款式', list: ['树莓红茶', '柠檬海盐'] },
  { title: '长度', list: ['43cm', '48cm'] },
  { title: '尺码', list: ['S', 'M', 'L'] },
]

// sku,其实可以去除两组数据1，4
products = [
  { id: '1', specs: ['树莓红茶', '43cm', 'S'] },
  { id: '2', specs: ['树莓红茶', '43cm', 'M'] },
  { id: '3', specs: ['树莓红茶', '48cm', 'M'] },
  { id: '5', specs: ['柠檬海盐', '48cm', 'S'] },
  { id: '4', specs: ['柠檬海盐', '48cm', 'L'] },
]

要做到的效果为，给用户展所有的规格，并展示有哪些可以选中的规格，其用户选中规格后，提供后续可选中的规格。

把所有的规格放置到界面上，用线联系来，这个结构非常像一张图。有哪些可以选的规格就像极了在图中寻找多个点之间是否互相连通。