Detailed explanation of commodity settlement function of jQuery shopping cart

When you're lonely, you'll be accompanied by a dog 2022-02-13 06:25:43 阅读数:913

detailed explanation commodity settlement function

1 、 Render data from controller to HTML page

namespace app\home\controller;
use app\home\model\CarModel;
use think\Controller;
class Car extends Controller
{
function car()
{
$data = CarModel::with('user,goods,specGoods')->where('user_id',1) ->select();
$data = collection($data)->toArray();
return view('cart',['data'=>$data]);
}
// Remove shopping cart items
function del()
{
$id = request()->get('ids');
$res = CarModel::del($id);
if($res)
{
return json(['code'=>200,'msg'=>' Delete successful ']);
}
}
}

2 HTML page jquery Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
<style>
button{border:none;
background-color: #006666;color: white}
</style>
</head>
<body>
<div class="box" >
<table class="table">
<tr>
<td><button id="btn"> Future generations </button></td>
<td> Commodity information </td>
<td> The unit price </td>
<td> Number </td>
<td> amount of money </td>
<td> operation </td>
</tr>
{foreach($data as $v)}
<tr>
<td><input type="checkbox" class="check" {if($v.is_selected)}checked="checked"{/if}></td>
<td>{$v['goods_name']}&emsp;{$v.spec_goods.value_names}</td>
<td>{$v.spec_goods.price}</td>
<td>
<button class="add_btn">+</button>
<input type="text" style="width: 50px"value="{$v.number}" class="num">
<button class="minus">-</button>
<!-- The number -->
</td>
<td><font color="red">¥</font><span class="price">{$v.number*$v.spec_goods.price}</span></td>
<td><button ids="{$v.id}" class="del"> Delete </button></td>
</tr>
{/foreach}
</table>
<p>
<font style="color: red;font-size:20px;">¥<span class="totalprice money">0</span></font>
<button style="color: white;background-color:red;border: none;width: 120px;height: 35px;float: right;margin-right: 50px;" class="go_pay"> To settle accounts </button></p>
</div>
</body>
</html>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script>
$(function () {
$('.totalprice').html(getSum());
})
// Future generations 、 Totally unselected
var totalprice = $('.totalprice').text();
var sum= 0;
$('#btn').click(function () {
$('.check').prop('checked',!$('.check').prop('checked'));// Future generations 、 Totally unselected
if($('.check').prop('checked'))
{
$(this).text(' Deselect all ');
$('.totalprice').text(getSum());// Select all , Total price
}else{
$(this).text(' Future generations ');
$('.totalprice').text(sum);// After deselecting all , Total price
}
})
// increase in numbers
$('.add_btn').click(function () {
var num = $(this).parent('td').find('input').val();// Get the current commodity quantity of this data
num ++;
$(this).parent('td').find('input').val(num);// Click to increase the number of products 1/ Time
var price = $(this).parents('tr').find('td').eq(2).text();// Get the unit price of this item
var money = num * price; // Find the data The total price of the goods ;
$(this).parents('tr').find('.price').text(money);// Change the amount of this data item on the page
// When this line is selected
var status = $(this).parents('tr').find('.check').prop('checked');
if(status)
{
$('.totalprice').text(getSum());// Quantity changes , The total price of commodity settlement changes
}
})
// Decrease in the number
$('.minus').click(function () {
var num = $(this).parent('td').find('input').val();// Get the data of this row The number
if(num>1)
{
num--;
$(this).parent('td').find('input').val(num);// Fewer clicks 1/ Time
var price = $(this).parents('tr').find('td').eq(2).text();// Get this data Current commodity unit price
var money = num * price;// Ask for this line , The current total price of the goods
$(this).parents('tr').find('.price').text(money);// Change the line on the page Current data commodity amount
// When this line is selected
var status = $(this).parents('tr').find('.check').prop('checked');
if(status)
{
$('.totalprice').text(getSum());// Quantity changes , The total price of commodity settlement changes
}
}
})
// Check whether the item is Click event
$('.check').click(function () {
// When this line is selected
var status = $(this).parents('tr').find('.check').prop('checked');
if(status)
{
$('.totalprice').text(getSum());// Quantity changes , The total price of commodity settlement changes
}else{
$('.totalprice').text(getSum());
}
})
// The total price
function getSum() {
// Total quantity
var num = 0;
// The total price
var money = 0;
// Traverse
$('.price').each(function(i, ele) {
if ($(this).parents('tr').find('.check').prop('checked')) {
money += parseInt($(ele).text());
}
});
return money;
}
// Delete
$('.del').click(function () {
var ids = $(this).attr('ids');
var this_ = $(this);
$.ajax({
url:'/del',
data:{
ids:ids,
},
dataType:'json',
success:function (res) {
alert(res.msg);
if(res.msg==' Delete successful ')
{
this_.parents('tr').remove();// Remove the row from the page
$('.totalprice').text(getSum());// Change the total settlement price of goods
}
}
})
})
// To settle accounts
$('.go_pay').click(function () {
// Determine whether there is a selected shopping record
if($('.check:checked').length == 0){
alert(' Please select the goods to be settled ');
return;
}
// Jump to the settlement page
location.href = "{:url('home/order/create')}";
})
</script>

3 Model layer code

<?php
namespace app\home\model;
use think\Model;
use traits\model\SoftDelete;
class CarModel extends Model
{
use SoftDelete;
protected $table = 'pyg_cart';
protected $pk = 'id';
protected $deleteTime = 'delete_time';
// Associated commodity table
function goods()
{
return $this->belongsTo('Goods')->bind('goods_name');
}
// Related commodity specification table
function specGoods()
{
return $this->belongsTo('SpecGoods');
}
// Associated user table
function user()
{
return $this->belongsTo('User');
}
// Soft delete
static function del($id)
{
return self::destroy($id);
}
}

copyright:author[When you're lonely, you'll be accompanied by a dog],Please bring the original link to reprint, thank you. https://en.javamana.com/2022/02/202202130625410314.html