tp5 模拟商品详情添加购物车处理及HTML

最新推荐文章于 2024-05-18 20:31:13 发布
最新推荐文章于 2024-05-18 20:31:13 发布
阅读量722 收藏 3
点赞数
分类专栏： PHP购物商品详情处理 文章标签： jquery html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58505056/article/details/121553179
版权

1、控制器页面

<?php

namespace app\home\controller;

use app\home\model\Spec;
use app\home\model\SpecValue;
use think\Controller;
use think\model\Collection;

class Goods extends Controller
{
//    商品详情
    function details()
    {
        $id=1;
        $goods= \app\home\model\Goods::with('specGoods')->where('id',$id)->find()->toArray();

//        取出商品的规格值id
        $specIds = array_unique(explode('_',implode('_',array_column($goods['spec_goods'],'value_ids'))));
        $spec_values = SpecValue::with('spec')->where('id','in',$specIds)->select();
        $spec_values = \collection($spec_values)->toArray();
//        数据处理
         $res = [];
         foreach($spec_values as $k =>$v)
        {
            $res[$v['spec_id']] = [
              'spec_id'=>$v['spec_id'],
                'spec_name'=>$v['spec']['spec_name'],
                'spec_values'=>[]
            ];
        }
        foreach($spec_values as $v){
            //$v['spec_id']
            $res[$v['spec_id']]['spec_values'][] = $v;
        }

        //规格值ids组合--规格商品SKU的映射关系  页面需要使用
        /*$goods['spec_goods'] = [
            0=>['id'=>1, 'value_ids'=>'28_32'],
           1=> ['id'=>2, 'value_ids'=>'28_33'],
           2=> ['id'=>3, 'value_ids'=>'29_32'],
           3=> ['id'=>4, 'value_ids'=>'29_33'],
        ];*/
        /*$value_ids_map = [
            '规格值ids组合' => '规格商品SKU的id和price'
            '28_32' => ['id'=>1, 'price'=>'1000'],
            '28_33' => ['id'=>2, 'price'=>'1000'],
            '29_32' => ['id'=>3, 'price'=>'1000'],
            '29_33' => ['id'=>4, 'price'=>'2000']
        ];*/
        $value_ids_map = [];
        foreach($goods['spec_goods'] as $v){
            //$v['id']  $v['price']
            $row = [
                'id' => $v['id'],
                'price' => $v['price']
            ];
            $value_ids_map[$v['value_ids']] = $row;
        }
        //数据最终在js中使用，转化为json格式，用于输出到
        $value_ids_map = json_encode($value_ids_map);
//        print_r($res);die;
        return view('details', ['goods' => $goods, 'specs'=>$res, 'value_ids_map' => $value_ids_map]);
    }



}

2.HTML页面布局及jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
         .box{width: 1000px;height: 1000px;margin: 50px auto;
             background-color: #f9f9f9;}
         .left{width: 450px;height: 600px;float: left;}
         .right{width: 450px;height: 600px;float: right;
             background-color: #f8cbcb;}
         a{display: inline-block;padding: 5px;
          color: black;    background-color:white;margin: 5px;text-decoration: none;
         }
         .selected{border:2px solid red;color:red};
    </style>
</head>
<body>
<div class="box">
  <div class="left">
  </div>
    <div class="right">
         <h2>{$goods.goods_name}</h2>
         <div class="fl title">
            <i>价　　格</i>
         </div>
        <div class="fl price">
            <i>¥</i>
            <em id="goods_price" style="color: red">{$goods.goods_price}</em>
            <span>降价通知</span>
        </div>
        <div id="specification" class="summary-wrap clearfix">
<!--          商品的规格、规格值-->
            {foreach $specs as $v}
            <dl>
                <dt>
                    <div class="fl title">
                        <i>{$v.spec_name}</i>
                    </div>
                </dt>
                {foreach $v['spec_values'] as $k=>$value}
                <dd><a spec_value_id="{$value.id}" href="javascript:;" class="{if($k==0)}selected{/if}">{$value.value_name}<span title="点击取消选择">&nbsp;</span></a></dd>
                {/foreach}
            </dl>
            {/foreach}
        </div>
        <div class="summary-wrap">
            <div class="fl title">
                <div class="control-group">
                    <div class="controls">
                        <input id="number" autocomplete="off" type="text" value="1" minnum="1" class="itxt" />
                        <a href="javascript:void(0)" id="plus" class="increment plus"><button>+</button></a>
                        <a href="javascript:void(0)" id="mins" class="increment mins"><button>-</button></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="fl">
            <ul class="btn-choose unstyled">
                <li>
                    <a href="javascript:;" id="addshopcar" class="sui-btn  btn-danger addshopcar">加入购物车</a>
                </li>
            </ul>
        </div>
    </div>
</div>
    <form action="{:url('home/cart/addcart')}" method="post" style="display: none">
        <input type="hidden" name="goods_id" value="{$goods.id}">
        <input type="hidden" name="spec_goods_id" value="">
        <input type="hidden" name="number" value="">
    </form>
</body>
</html>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script>
    $(function(){
        //规格值选中效果
        $('#specification').find('a').click(function(){
            //给当前行标签 移除selected这个class
            $(this).closest('dl').find('a').removeClass('selected');
            // //再给当前点击的a标签加上selected
            $(this).addClass('selected');
            // //获取选中的规格值的组合
            var value_ids = '';
            $('.selected').each(function(i,v){
                value_ids += $(v).attr('spec_value_id') + '_';
            });
            //去除最后一个下划线  value_ids = '19_21_'   '19_21'
            value_ids = value_ids.slice(0, -1);
            // //获取对应的规格商品SKU的id值
            var spec_goods_price = value_ids_map[value_ids].price;
            // console.log(spec_goods_price);
            // //将价格显示到页面
            $('#goods_price').html(spec_goods_price);
        });

        //规格值ids 到 规格商品id的映射关系
        var value_ids_map = {$value_ids_map};
//		var value_ids_map = {"18_21":{"id":813,"price":"1000.00"},"18_22":{"id":814,"price":"1000.00"},"19_21":{"id":815,"price":"1000.00"},"19_22":{"id":816,"price":"1000.00"}};
        //加入购物车
        $('#addshopcar').click(function(){
            //获取选中的规格值的组合
            var value_ids = '';//18_21
            $('.selected').each(function(i,v){
                value_ids += $(v).attr('spec_value_id') + '_';
            });
            //去除最后一个下划线  value_ids = '18_21'
            value_ids = value_ids.slice(0, -1);
            //value_ids = '18_21'
            //获取对应的规格商品SKU的id值 考虑到部分商品可能没有SKU 使用三元判断
            var spec_goods_id = value_ids_map[value_ids] ? value_ids_map[value_ids].id : '';
            // console.log(spec_goods_id);
            //后续加入购物车 需要使用spec_goods_id
            //将spec_goods_id放到隐藏表单中
            $('input[name=spec_goods_id]').val(spec_goods_id);
            //获取购买数量
            var number = $('#number').val();
            //将购买数量放到隐藏表单中
            $('input[name=number]').val(number);
            //提交表单
            $('form').submit();
        });
        //加号
        $('#plus').click(function(){
            //获取数量
            var number = parseInt( $('#number').val() );
            //计算新的数量
            number += 1;
            //展示新的数量
            $('#number').val(number);
        });
        //减号
        $('#mins').click(function(){
            //获取数量
            var number = parseInt( $('#number').val() );
            //计算新的数量
            if(number == 1) return;
            number -= 1;
            //展示新的数量
            $('#number').val(number);
        });
    })
</script><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
         .box{width: 1000px;height: 1000px;margin: 50px auto;
             background-color: #f9f9f9;}
         .left{width: 450px;height: 600px;float: left;}
         .right{width: 450px;height: 600px;float: right;
             background-color: #f8cbcb;}
         a{display: inline-block;padding: 5px;
          color: black;    background-color:white;margin: 5px;text-decoration: none;
         }
         .selected{border:2px solid red;color:red};
    </style>
</head>
<body>
<div class="box">
  <div class="left">
  </div>
    <div class="right">
         <h2>{$goods.goods_name}</h2>
         <div class="fl title">
            <i>价　　格</i>
         </div>
        <div class="fl price">
            <i>¥</i>
            <em id="goods_price" style="color: red">{$goods.goods_price}</em>
            <span>降价通知</span>
        </div>
        <div id="specification" class="summary-wrap clearfix">
<!--          商品的规格、规格值-->
            {foreach $specs as $v}
            <dl>
                <dt>
                    <div class="fl title">
                        <i>{$v.spec_name}</i>
                    </div>
                </dt>
                {foreach $v['spec_values'] as $k=>$value}
                <dd><a spec_value_id="{$value.id}" href="javascript:;" class="{if($k==0)}selected{/if}">{$value.value_name}<span title="点击取消选择">&nbsp;</span></a></dd>
                {/foreach}
            </dl>
            {/foreach}
        </div>
        <div class="summary-wrap">
            <div class="fl title">
                <div class="control-group">
                    <div class="controls">
                        <input id="number" autocomplete="off" type="text" value="1" minnum="1" class="itxt" />
                        <a href="javascript:void(0)" id="plus" class="increment plus"><button>+</button></a>
                        <a href="javascript:void(0)" id="mins" class="increment mins"><button>-</button></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="fl">
            <ul class="btn-choose unstyled">
                <li>
                    <a href="javascript:;" id="addshopcar" class="sui-btn  btn-danger addshopcar">加入购物车</a>
                </li>
            </ul>
        </div>
    </div>
</div>
    <form action="{:url('home/cart/addcart')}" method="post" style="display: none">
        <input type="hidden" name="goods_id" value="{$goods.id}">
        <input type="hidden" name="spec_goods_id" value="">
        <input type="hidden" name="number" value="">
    </form>
</body>
</html>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script>
    $(function(){
        //规格值选中效果
        $('#specification').find('a').click(function(){
            //给当前行标签 移除selected这个class
            $(this).closest('dl').find('a').removeClass('selected');
            // //再给当前点击的a标签加上selected
            $(this).addClass('selected');
            // //获取选中的规格值的组合
            var value_ids = '';
            $('.selected').each(function(i,v){
                value_ids += $(v).attr('spec_value_id') + '_';
            });
            //去除最后一个下划线  value_ids = '19_21_'   '19_21'
            value_ids = value_ids.slice(0, -1);
            // //获取对应的规格商品SKU的id值
            var spec_goods_price = value_ids_map[value_ids].price;
            // console.log(spec_goods_price);
            // //将价格显示到页面
            $('#goods_price').html(spec_goods_price);
        });

        //规格值ids 到 规格商品id的映射关系
        var value_ids_map = {$value_ids_map};
//		var value_ids_map = {"18_21":{"id":813,"price":"1000.00"},"18_22":{"id":814,"price":"1000.00"},"19_21":{"id":815,"price":"1000.00"},"19_22":{"id":816,"price":"1000.00"}};
        //加入购物车
        $('#addshopcar').click(function(){
            //获取选中的规格值的组合
            var value_ids = '';//18_21
            $('.selected').each(function(i,v){
                value_ids += $(v).attr('spec_value_id') + '_';
            });
            //去除最后一个下划线  value_ids = '18_21'
            value_ids = value_ids.slice(0, -1);
            //value_ids = '18_21'
            //获取对应的规格商品SKU的id值 考虑到部分商品可能没有SKU 使用三元判断
            var spec_goods_id = value_ids_map[value_ids] ? value_ids_map[value_ids].id : '';
            // console.log(spec_goods_id);
            //后续加入购物车 需要使用spec_goods_id
            //将spec_goods_id放到隐藏表单中
            $('input[name=spec_goods_id]').val(spec_goods_id);
            //获取购买数量
            var number = $('#number').val();
            //将购买数量放到隐藏表单中
            $('input[name=number]').val(number);
            //提交表单
            $('form').submit();
        });
        //加号
        $('#plus').click(function(){
            //获取数量
            var number = parseInt( $('#number').val() );
            //计算新的数量
            number += 1;
            //展示新的数量
            $('#number').val(number);
        });
        //减号
        $('#mins').click(function(){
            //获取数量
            var number = parseInt( $('#number').val() );
            //计算新的数量
            if(number == 1) return;
            number -= 1;
            //展示新的数量
            $('#number').val(number);
        });
    })
</script>

3、商品添加购物车

1.创建Cart控制器


    function addCart()
    {
//        接受商品添加购物车参数
        $data = request()->param();
        unset($data['/home/cart/addcart_html']);
//        数据验证
        $validate = $this->validate($data, [
            'goods_id' => 'require|integer|gt:0',
            'number' => 'require|integer|gt:0',
            'spec_goods_id' => 'integer|gt:0',
        ]);
        if($validate !== true){
            $this->error($validate);
        }
        //假设登录 用户id为1
        $user_info = [
            'id'=>1,
        ];
        session::set('user_info',$user_info);
//        print_r(\session('user_info.id'));die;
//        判断用户是否登录
        if(session('user_info'))
        {
//            已登录
            $user_id  = session('user_info.id');
            $where = [
                'user_id'=>$user_id,
                'goods_id'=>$data['goods_id'],
                'spec_goods_id'=>$data['spec_goods_id']
            ];
            $info  = \app\common\model\Cart::where($where)->find();

            if($info)
            {
//                            echo 13;die;
//            存在相同的记录 只需要数量增加 修改操作
                $info->number += $data['number'];
                $info->is_selected = 1;
                $info->save();
            }else{
                //不存在相同记录 添加新数据
                $where['number'] = $data['number'];
                $where['is_selected'] = 1;
                \app\common\model\Cart::create($where);
            }
        }else{
//            未登录，太哪家cookie
            $cart = cookie('cart')?:[];
//            添加或修改数据数组 判断是否存在相同的记录（商品id相同，sku的id相同）；
            $key = $data['goods_id'].'_'.$data['spec_goods_id'];
           if(isset($cart[$key]))
           {
//               存在相同记录，则累加数量
               $cart[$key]['number']+=$data['number'];
               $cart[$key]['is_selected'] = 1;
           }else{
//                不存在相同的记录，则添加新的数据（键值对）
                $cart[$key] = [
                    'id'=>$key,
                    'user_id'=>'',
                    'spec_goods_id'=>$data['goods_id'],
                    'number'=>$data['number'],
                    'is_selected'=>1
                ];
           }
           cookie('cart',$cart,86400*7);//存cookie设置过期时间为一周
        }

        return view('add_cart');
    }

//    购物车列表
     function  cart()
     {
         $data  = \app\common\model\Cart::with('user,goods,specGoods')->where('user_id',1) ->select();
         $data = collection($data)->toArray();
//         print_r($data);die;
         return view('cart',['data'=>$data]);

     }

孤单的时候狗作陪
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML+CSS+JavaScript实现网络购物车
weixin_43396749的博客
11-24 1万+
HTML+CSS+JavaScript实现网络购物车
JavaScript模拟列表跳转详情页面效果
qq_39155611的博客
06-09 2192
JavaScript模拟列表跳转详情页面效果 上一篇文章我们讲到如何利用JavaScript中location对象的hash值的改变来实现商品列表跳转到详情页面的效果。然后有同学问我，说淘宝的是利用的"?id=****"效果实现的，现在我们来讲一下如何利用location的 search实现效果。如图： 1.列表页面HTML代码： <a href="01模拟详情页面.html?id=0" target="_blank"><img src="../0603/img/1.jpg" al
制作京东购物车，包含html+js+css完整代码
最新发布
m0_74937643的博客
05-18 1150
商品布居html，同一店铺多个商品只需要复写class="item-item"，更改内部的商品图片，名称，以及相对于的连接即可，不同店铺则复写class="cart-body"为所有的商品复选框添加点击事件，所有的商家name属性值保持一致，商品name属性值保持一致。制作京东购物车页面，实现全选商品，价格加减，商品数量加减，总价。JS函数，该函数包括获取商品总价，并显示总价及已选商品种类数量。点击全选，实现所有商品选中，并且算出总价，和已选择的商品数量。商品总价及已选择商品种类数量html部分。
小型电商商品详情页静态化处理(简单模拟)
Mr_xiayijie的博客
12-09 411
小型电商商品详情页静态化处理(简单模拟)
mysql 商品规格表_商品规格分析
weixin_34094282的博客
01-27 847
产品表每次更新商品都会变动的，ID不能用，可是购物车还是用了，这就导致每次保存商品，哪怕什么都没有改动，也会导致用户的购物车失效。~~~其实可以考虑不是每次更新商品就除所有的SKU，毕竟有时什么都没修改呢，只改一个价格呢，或者增加一个SKU呢，其实这个问题做细一点有好的处理方式的。比如商品增加一个版本号字段，SKU也增加一个版本字段，如果SKU规格值变动了那么删除，如果发现规格值还在，只是价格或其...
ecshop flow.php goods_number,ECSHOP商品批发插件免费共享给大家
weixin_42299131的博客
03-28 85
代码：1、打开goods.dwt加入货号规格销售价会员价订购数量库存{$product.product_sn}{$goods_attr}|{$goods.shop_price_formated}{$rank_price.rank_name}：{$rank_price.price}{$product.product_number}2、打开goods.php 加入$smarty->assign...
TP5TP6图片处理为透明圆角图片.rar
09-03
标题中的"TP5TP6图片处理为透明圆角图片.rar"指的是使用ThinkPHP5和ThinkPHP6框架进行图片处理，生成具有透明圆角效果的图片。这个压缩包可能包含了一个或多个示例代码、类库或者自定义扩展，用于帮助开发者实现这个...
tp5实现网上书店列表购物车功能
08-02
使用ThinkPHP5实现的图书列表展示和购物车功能，内含1000余条完整数据以及图片，非常适合做展示使用，购物车实现原理和京东类似，未登录使用cookie存储，登陆转移到数据库中，适合TP初学者和有一定基础的人员使用。
tp5 html解析出错
04-11
NetBeans 不支持 ThinkPHP 的标签，面对 View 下的各种叹号，以及 HTML 代码无法折叠等问题，一直深深的困扰着我。 然后不小心的发现其实这个是有解决方法的： 把附件解压放到你项目的nbproject下就可以了。 这种...
tp-aerial：HTML5网页模板
08-09
《tp-aerial：HTML5网页模板深度解析》 在当今的互联网世界中，网页设计的重要性不言而喻。一个优秀的网页模板能够为开发者提供快速构建网站的基础，节省大量的时间和精力。今天，我们要深入探讨的是一款名为"tp-...
tp-identity：HTML5网页模板
08-09
【tp-identity：HTML5网页模板】 HTML5网页模板是一种基于HTML5标准设计的网站布局框架，用于快速构建响应式、交互性强的网页。tp-identity是Toms Project改编自HTML5 UP的一个模板项目，旨在提供一个高效且美观的...
HTML5购物车特效：点击添加商品到购物车代码.rar
07-10
HTML5购物车特效：点击添加商品到购物车代码，实现本功能，主要是使用了HTML5 storage ，也就是浏览器数据库功能，跟之前把数据存在cookies里面原理是相似的，但这样的好处是当用户刷新页面时购物车中的数据还在，又不需要跟后台的数据库进行交互。
购物车案例源码，包含全部代码
03-28
全部源码可自行免费下载，学习，练习 功能：(1) 使用实现数据渲染 (2)每个+按钮实现数字加1总价更新 (3)每个-按钮实现数字减1总价更新 (4)每个删除按钮实现整行商品删除 (5)点击每个全选按钮将所有输入框都选中 (6)点击底部删除按钮删除选中的li (7)每一个主体商品复选框被选中的时候判断全选按钮是否需要被选中
HTML5点击添加商品购物车代码源代码
03-15
这个插件使用了HTML5的新特效：storage ，就是游览器数据库的功能，这跟之前把数据存在cookies里面原理是相识的，这样的好处在于用户刷新页面，数据还在，，又不需要跟后端进行数据交互。
购物车页面功能实现
qq_46232829的博客
02-02 1398
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>购物车---啵啵仔制作</title> <style> *{ .
[JavaScript实训] -- 制作简易的购物车页面
热门推荐
一只大数据专业的傻猪猪
04-05 1万+
JavaScript实现制作简易的购物车页面
HTML+CSS+JS网页设计期末课程大作业—— 绿色化妆品HTML+CSS+JavaScript
HTML网页设计
08-10 2249
💄美妆介绍、👜美妆分享、👒 品牌化妆品官网网站 、等网站的设计与制作。🏷️ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设......
基于HTML5+CSS制作 H5移动端电商购物网页设计35页面(包括主页，商品详情，转账，付款，购物车等页面) 功能齐全
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
10-22 7243
基于HTML5+CSS制作 H5移动端电商购物网页设计35页面(包括主页，商品详情，转账，付款，购物车等页面) 功能齐全 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载! ????
tp5模拟js发送ws信息
06-07
在 ThinkPHP5 中，可以使用 Swoole 扩展来实现 WebSocket 服务。...这样就可以在 ThinkPHP5 中模拟 JavaScript 发送 WebSocket 消息了。当然，这只是一个简单的例子，实际上 WebSocket 的使用会更加复杂。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值