产品渲染和分页
显示当前商品对应的店铺内所有在售商品,点击分页器跳转到页面。主要是通过前端请求获取需要的数据,然后通过layui渲染成多个页面
登录后,点击立即订购,跳转至结账页面。 结帐项目仅包含当前一项。未登录时点击会弹出提示,不会跳转页面
登录后,点击添加到购物车,购物车中的商品数量会加一,并且购物车中的商品数量会显示在右侧购物车按钮上。未登录时商城购物网站源码,点击并且会弹出提示
登录后点击两侧购物车按钮即可跳转至购物车
购物车页面
页面渲染
如果您在未登录的情况下进入购物车,则会提示用户登录
如果购物车中没有商品,则显示相应的文字
如果购物车中有商品,根据前端数据渲染页面,同一个店铺的商品会添加到同一个包里
多项选择功能
全选按钮可以全选/不全选购物车中的商品
商户处的全选按钮可以全选/不全选购物车中店铺内的商品
当同一店铺的每个商品选择按钮被选中时,全选按钮可手动选择,当某些商品未选择时,全选按钮可手动取消选择
当购物车中的每个产品选择按钮被选择时,全选按钮被手动选择,当取消选择产品时商城购物网站源码,全选按钮被手动取消选择
选择后页面下方会显示所选产品的单价
不同账户购物车信息不同
最初的版本是通过数据库获取购物车信息。 一款产品对应一个账户信息,无法实现该功能。 考虑到老师写的方法需要改动太多,最后我做了一个非正式的解决方案。
登录时,读取localStorage中属于该用户的购物车信息,写入数据库。 可以按照老方案通过数据库中的数据来渲染购物车。 注销时,将当前的购物车信息和账户信息写入localStorage并写入数据库。 所有商品数量清零,等待最后一次写入。数据库中仅保存一个账户的购物车数据,本地存储保存多个账户的购物车数据
更改项目数量
减号和输入框都可以改变商品数量(数据库中的商品数量同步改变)。 商品总价显示商品数量实时变化后的单价。 最小值为1。当商品数量为1时,不能使用负号。 输入框输入的数字无效时手动重置为1
删除项目
原理和改变号码是一样的。 点击删除后,会弹出提示。 用户确认删除后,页面的html结构将被删除,数据库中的数量将变为0,导航栏上购物车中显示的商品数量将减少1,在对。主要使用图层和前端数据
结算按钮
未选择商品时弹出提示,且不跳转下一页
当选择商品后,跳转到结账页面,勾选多少件商品,就会在结账页面呈现多少数据
结帐页面
渲染商品
将购物车页面查看的商品的数据库pid设置为数字,结账页面从数据库中获取购物车页面需要展示的商品数据