商品详情

效果图:
在这里插入图片描述

商品详情页是从搜索页面点击商品图片或者商品标题来跳转过去的
在这里插入图片描述
所以每个商品详情页的html 都是由他们的skuId 来决定的。
thymeleaf 拼接字符串语法:“|要拼接的字符串|”
在这里插入图片描述

获取商品详细信息:
在这里插入图片描述

在这里插入图片描述

构建返回给页面的VO 对象
SkuItemVo
在这里插入图片描述

SkuItemSaleAttrVo:
在这里插入图片描述

SkuItemAttrGroupVo
在这里插入图片描述

完成功能:
商品标题:
在这里插入图片描述

完成功能:
当点击选择不同的sku 属性时,页面能立刻切换到对应的sku 产品的详情页中。
页面是这样的:当从搜索页面点击商品进入商品详情页中,该页面会包含该sku 商品的所有sku 属性。
在这里插入图片描述

这里涉及到这个算法:
把颜色属性分为三种:A,B,C。
内存属性分为两种:D,E
那么他们将进行笛卡尔积然后才会成为一个商品。
AD 1, AE 2, BD 3, BE 4, CD 5, CE 6 一共能组成6 个sku商品
那么拥有A 属性的商品有:1,2
拥有D属性商品有:1,3,4
然后找出他们的交集:1
这个1 号商品就是我们要进行查询并返回的商品详情页信息。

所以转换成我们项目的做法就是:查询到每个属性对应哪个sku 即可。
因为方便迎合这个算法,把SkuItemSaleAttrVo 中的attrValues 改成了如下:
在这里插入图片描述

在这里插入图片描述

sql 语句查询的结果就是这样:
主要就是为了查询属性名对应的属性值对应的skuId都有哪些
在这里插入图片描述

完成功能:当选中对应的属性时跳转到对应的商品详情页时,页面的红框能中回显这个属性
在这里插入图片描述

<div class="box-attr-3">
							<div class="box-attr clear" th:each="attr:${item.saleAttr}">
								<dl>
									<dt>选择[[${
   attr.attrName}
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值