商品规格可选怎么设计_分分钟学会前端sku算法（商品多规格选择）

最新推荐文章于 2024-04-15 14:13:31 发布
最新推荐文章于 2024-04-15 14:13:31 发布
阅读量3.4k 收藏 17
点赞数 2
文章标签： 商品规格可选怎么设计
c3bb942d513a66cc41fb2c25fd93b662.png

相信大家看到这张图片就知道我们这篇文章要讲什么了，没错就是-商品多规格选择的解法。

近来在掘金上面看见大家都在研究“商品多规格选择”的问题，例如晨曦大佬的前端电商 sku 的全排列算法很难吗？学会这个套路，彻底掌握排列组合。 在这篇文章里面，大佬写明了如何实现sku的全排列，思路非常的棒，但是并没有紧贴业务场景。真正的业务场景是，我们要根据用户每一次选择的规格，找出剩下可选的规格和不可选的规格，表现在前端页面上：就是将不可选的规格置回，也就是如下效果(可以点击这里查看最终效果)：

34565b465a016f16bac31a4934dd9922.gif

那么今天我们就来讲讲这个问题的一个解决方法，要讲明白很难，但是我相信你看了这篇文章之后，sku就再也难不倒你了。

什么是 sku

在介绍具体解法之前，我们先来介绍一下什么是sku? sku是会计学中的一个名词，被称作库存单元。说人话？简单来讲就是，我们上图 中每一个单规格选项，例如深空灰色、64G,都是一个规格(sku)。商品和sku属于一对多的关系，也就是我们可以选择多个sku来确定到某个具体的商品:

c8337f382f15600e2ace480cc854b140.png

业务场景

可以这么说，只要是做电商类相关的产品，比如购物 APP、购物网站等等，都会遇到这么一个场景，每个商品对应着多个规格，用户可以根据不同的规格组合，选择出自己想要的产品。我们自己在生活中也会经常用到这个功能，然而就是这样一个简单的功能，却难倒了很多小伙伴。

笔者也是一样，刚开始遇到这个场景，笔者觉得应该一个下午就能搞定，完美收工，奈何还是太过于年轻，搞了差不多两天，在网上查阅了很多相关的文章和资料，但是不得其解，最后没有办法，只能硬着头皮采用暴力求解(也就是不断循环)的方法来解决的，时间复杂度贼高，达到了O(m*n)也就是O(n²),这种实现方法其实也不是不行(能跑就行)，对吧。但是后来笔者发现，当一个商品的规格非常非常多、并且用户的设备性能不是那么好的情况下，那么这种实现方式就会导致运行时间过长，表现在页面上就是：当用户点击了一个规格，会有明显的卡顿，那怎么行，客户都流失了，老板还怎么买法拉利 ️？所以笔者又开始了研究。

图

一个偶然的机会，笔者在逛知乎的时候，看到了有人在讨论图，这个数据结构，突然灵光一现，貌似咱们的多规格选择也可以用图来作求解方法，后来一尝试，还真的可行。而且时间复杂度只有O(n)，简直完美。所以我们下面来介绍一下图，什么是图？相信大学学过数据结构与算法的同学都应该知道，不过应该已经忘得一干二净了。

什么是图

图其实是数学的一个分支。它以图为研究对象。图论中的图是由若干给定的点及连接两点的线所构成的图形，这种图形通常用来描述某些事物之间的某种特定关系，用点代表事物，用连接两点的线表示相应两个事物间具有这种关系：

0078c054f46b1ce7873f8a90a0d4fe4e.png

图通常有如下分类:

  • 分为有向图和无向图
  • 分为有权图和无权图

好了知道这两个概念就差不多了,当然如果想了解更多更多概念，请看这里

那么我们需要用到的是无向图，什么是无向图呢，就像这样：

7ff1c2b29156566c140b2627ded5dc67.png

两个顶点之间如果有连线，则表示这两个顶点是互通的。小伙伴们看到这里可能会懵逼

最低0.47元/天 解锁文章
weixin_39540725
关注
  • 2
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
探索 Vue-Sku: 构建高效电商 SKU 管理系统的利器
gitblog_00068的博客
04-01 302
探索 Vue-Sku: 构建高效电商 SKU 管理系统的利器 项目地址:https://gitcode.com/rossroma/vue-sku 在电商领域，SKU（Stock Keeping Unit）是商品管理的核心，每个商品都有其独特的属性组合，管理起来往往复杂而繁琐。然而，Vue-Sku 是一款基于 Vue.js 的轻量级组件库，专为解决这个问题设计，让你的电商应用能够快速且有效地展示和处...
vue/小程序 商品sku实现
Zhooson的博客
04-23 413
商品sku的实现，支持多规格， 默认选中等操作
加购商品sku选择算法方案 (vue)（淘宝）
唱歌去旅行8的博客
03-04 2852
是
多规格产品应该如何设置呢？
最新发布
weixin_64051447的博客
04-15 367
今天一用户从供应商手中拿到产品价目表，但是设置起来蒙圈了，接下来我们就一起设置一下吧～
使用vue实现多规格选择实例（SKU）
10-16
主要介绍了使用vue实现多规格选择实例（SKU），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
VUE类似淘宝选择商品多规格(库存判断)
七十多岁的人了、
01-07 3514
商品选择多规格
Vue3电商项目实战-商品详情模块3【07-★规格组件-SKU&SPU概念、08-★规格组件-基础结构和样式、09-★规格组件-渲染与选中效果】
m0_52896752的博客
02-22 1123
Vue3电商项目实战-商品详情模块3【07-★规格组件-SKU&SPU概念、08-★规格组件-基础结构和样式、09-★规格组件-渲染与选中效果】
sku-algorithm:商品多规格选择-sku算法
05-08
如果有解决思路的同学，请给我提PR:handshake::handshake::handshake:商品多规格选择-前端 sku 算法相信大家看到这张图片就知道我们这篇文章要讲什么了，没错就是-商品多规格选择的解法。近来在掘金上面看见大家都在...
sku多属性选择算法-每个商品的属性进行可选分组-有bug
07-23
在商品管理中，一个复杂的挑战是如何设计一个有效的SKU多属性选择算法，确保用户能方便地筛选和购买符合他们需求的商品。这里我们将详细讨论这个主题，特别是针对描述中提到的"每个商品的属性进行可选分组"以及与Vue...
商品sku规格选择效果.html
03-25
类似淘宝，设定好颜色、尺码、款式后，有货的显式选择，没货的会显示为不可用不可选择。商品格式为 var sku_list = [ {'sku_key': '10额;20;30;40', 'id': 120, 'store_nums': 100, 'sell_price': '10.7'}, {'sku_...
layui+商品多规格.zip
03-04
本项目"layui+商品多规格.zip"提供了一种基于layui框架实现商品多规格展示和选择的解决方案，包含了多种技术栈的应用。接下来，我们将详细讨论这个项目中涉及的知识点。 1. **layui框架**：layui是一款轻量级的前端...
基于Vue实现电商SKU组合算法问题
01-21
前段时间，公司要做“添加商品”业务模块，这也算是电商业务里面的一个难点了。 令我印象最深的不是什么“组合商品”、“关联商品”、“关联单品”，而是商品SKU的组合问题。 这个问题特别有意思，当时虽然大体上组合成功，总是有些小bug解决不了，然后手上又有别的任务就没仔细研究它。 后来过了一个月，空闲下来专门研究了下，终于把问题解决，有必要记录下这次体验。 先看下在业务中的效果（tips: 如看不清可放大浏览器） 这个相对来说比较麻烦，还涉及到了下面“属性图片”的循环，但关键点还是在SKU组合的代码上面 以下是基于element-ui和vue的精简版demo代码： html: SKU组
商品录入【规格选择】
huangyh技术栈
11-27 1905
1.1 注意细节  注意事项： 拿到需求先看一下前端静态页面的效果，然后考虑一下数据来自哪里，来自哪张数据库表，它们的关系是什么（不清楚的需要问你们老大哈哈哈哈，把需要关系弄清楚非常重要）。然后再分析需要返回什么格式的数据。 发送了异步请求接收到数据之后，用JSON-handle插件看一下数据格式是不是我们想要的，是就在页面迭代出来。（一定要利用好JSON-handle这个插件） ...
前端电商 sku 的全排列算法
全栈攻城狮的博客
06-17 1685
前端电商 sku 的全排列算法什么是sku聊聊常见的需求解决思路思路分解上代码 什么是sku 针对电商而言： 1、SKU是指一款商品，每款都有出现一个SKU，便于电商品牌识别商品。 2、一款商品多色，则是有多个SKU，例：一件衣服，有红色、白色、蓝色，则SKU编码也不相同，如相同则会出现混淆，发错货。 SKU，定义为保存库存控制的最小可用单位，例如纺织品中一个SKU通常表示：规格、颜色、款式。 STOCK KEEP UNIT，这是客户拿到商品放到仓库后给商品编号,归类的一种方法。 聊聊常见的需求 我们有三个
基于Vue的淘宝SKU组合算法
weixin_34233421的博客
12-10 3777
现有需求，当点击颜色时进行校验，若蓝色6.0寸无库存时禁选。 先上效果截图： 当前规格组合中 蓝色6寸 和 黑色中6寸 的库存均为0. 后台返回数据如下图： 实现思路： 例如：当选择蓝色时，进行循环遍历组合。组合结果为: 蓝黑，蓝5.5寸，蓝6.0寸，再进行校验，拿出对应组合的库存，判断库存为0时禁选 第一步： 对当前显示在页面上的spu进行重新组合 this.goodsInfo.s...
商品表（spu）、规格表（sku）设计
热门推荐
往生的博客
11-13 3万+
转载出处：https://www.jianshu.com/p/86f9596d6234 最近在做一个中小型购物商城，商品的种类繁多，每一种商品具有不同的规格，不同的规格有相应的价格和库存； 这个设计的核心难点在于：不同商品具有不同的属性，如何设计通用的存储方案？ 1. 先做一下专业术语解释：spu和sku 这里拿iphone6s举例，它身上有很多的属性和值， 比如： 毛重: 420.00...
vue产品多规格选择
AS、SD的博客
06-23 1080
<template> <div class="wrap wrap-sku"> <div class="product-box"> <div class="product-content"> <div class="product-delcom" v-for="(ProductItem,n) in specifications"> <p>{{ProductItem.name}}&
网页商品SKU(规格)选择
mengty的博客
12-16 1万+
什么是sku 维基百科如下 最小存货单位(Stock Keeping Unit) 在连锁零售门店中有时称单品为一个SKU，定义为保存库存控制的最小可用单位，例如 例如： iPhone有规格有：颜色【红、金、黑】，内存大小【32g、64g、128g】 红色+32g就是一个sku，当然还可以分的更细 后台数据如下：(表1) 颜色 内存 屏幕大小 库存 红色-a1 16G-
模仿淘宝多规格选择demo
onlylele的博客
03-23 4327
1.模仿淘宝多规格选择demo ,说明:依赖文件:vant.css, vue.js, vant.js 内容代码 详细情况: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>模拟淘宝多规格选择</title> <link rel...
前端sku算法（商品多规格选择）react代码实现
06-01
以下是一个React组件的代码实现，用于实现前端SKU算法的商品多规格选择功能： ```jsx import React, { useState, useEffect } from "react"; const SKUSelector = ({ skuList }) => { const [selectedValues, setSelectedValues] = useState({}); const [availableOptions, setAvailableOptions] = useState({}); useEffect(() => { // 初始化可选项列表 let options = {}; skuList.forEach((sku) => { sku.attributes.forEach((attr) => { if (!options[attr.name]) { options[attr.name] = [attr.value]; } else if (!options[attr.name].includes(attr.value)) { options[attr.name].push(attr.value); } }); }); setAvailableOptions(options); }, [skuList]); const handleValueChange = (name, value) => { // 更新已选项列表 setSelectedValues({ ...selectedValues, [name]: value }); // 根据已选项列表筛选可选项列表 let options = { ...availableOptions }; for (let attrName in selectedValues) { if (attrName !== name) { skuList.forEach((sku) => { if ( sku.attributes.find((attr) => attr.name === attrName)?.value !== selectedValues[attrName] ) { options[attrName] = options[attrName].filter( (option) => option !== selectedValues[attrName] ); } }); } } setAvailableOptions(options); }; const getAvailableValues = (name) => { // 获取指定规格属性的可选项列表 return availableOptions[name] || []; }; const getSelectedSKU = () => { // 根据已选项列表获取SKU信息 let selectedSKU = null; skuList.forEach((sku) => { let matches = true; sku.attributes.forEach((attr) => { if (selectedValues[attr.name] !== attr.value) { matches = false; } }); if (matches) { selectedSKU = sku; } }); return selectedSKU; }; return ( <div> {skuList.length > 0 ? ( skuList[0].attributes.map((attr) => ( <div key={attr.name}> <label>{attr.name}:</label> <select value={selectedValues[attr.name] || ""} onChange={(e) => handleValueChange(attr.name, e.target.value)} > <option value="">请选择</option> {getAvailableValues(attr.name).map((option) => ( <option key={option} value={option}> {option} </option> ))} </select> </div> )) ) : ( <div>暂无商品信息</div> )} {getSelectedSKU() ? ( <div> <p>已选规格：{JSON.stringify(selectedValues)}</p> <p>剩余库存：{getSelectedSKU().stock}</p> </div> ) : ( <div>请选择完整规格属性</div> )} </div> ); }; export default SKUSelector; ``` 该组件接受一个SKU列表作为props，每个SKU包含一个属性列表和一个库存数量。在组件中，首先使用useEffect钩子初始化可选项列表，然后使用useState钩子管理已选项列表和可选项列表的状态。 当用户选择某个规格属性值时，组件会根据已选项列表筛选可选项列表，并更新已选项列表。当用户选择所有规格属性值后，组件会根据已选项列表获取相应的SKU信息，并显示剩余库存量。 该组件仅为示例代码，具体实现方式可能因业务需求而异。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值