LaraStore购物车中的多选表单美化 2016-10-28


浏览器默认渲染的 多选输入表单是比较简陋的。是下面这个样子:


我们LaraStore商城系统 之前的版本 使用的是 iCheck这个前端插件。大家看到的是这样的效果

iCheck插件 需要同时引入 js和css文件,相对来说 比较重!而且iCheck这个项目已经三年没有更新了!

在新版中,我们的前台模板 将要弃用这个插件。直接用纯css来模拟实现。

首先,我们来看看新版的购物车效果



这里的checkbox效果,使用div元素模拟出来。

对于ajax购物车 要实现的几个主要功能如下:

【1】点击 购物车数量的  加号和减号,购物车中相应的商品数量增加1个或者减少1个,同时动态刷新购物车的信息。

【2】点击 删除按钮 删除被选中的商品记录,同时ajax刷新 购物车信息

【3】点击 每个商品最左侧的单选按钮 选中 则该商品 可以进入结算项目,反之不计入结算项。

【4】点击 整个购物车表格左上角上面的多选表单按钮。为:整体选中或者整体取消。


执行上述 4个ajax操作的时候 ,都需要动态刷新购物车中的信息 包括

【1】商品列表

【2】每个商品的状态(是否被选中)

【4】每个商品的数量 以及单个商品的总金额

【5】商品总金额

【6】购物车中所有商品数量 和 被选中的商品数量


我们看看ajax执行的截图


最终返回的json格式的数据如下:


新版的LaraStore使用Laravel的模型Repository 进一步简化了ajax操作的相关细节,让整体代码更简洁。

【1】用户模型和购物车模型 为一对多的关系

//用户和购物车 一对多关联的定义
public function cart(){

 return $this->hasMany(Cart::class,'user_id','id');
 
 }

【2】扩展UserRepository类 轻松实现ajax购物车的各种购物车逻辑


use Phpstore\Repository\UserRepository;

use UserRepository;

LaravelStore V3.0 即将发布,希望会给大家更多惊喜:)


本文章为 LaravelStore官网原创 转载请注明出处。谢谢合作!