购物车优化

This commit is contained in:
pushuo 2022-08-29 17:33:10 +08:00
parent 4b0f31ad52
commit 4643926768
7 changed files with 66 additions and 6 deletions

View File

@ -105,7 +105,11 @@ class CartController extends Controller
*/
public function miniCart()
{
$data = CartService::reloadData();
return view('cart/mini', $data);
$reloadData = CartService::reloadData();
$data['html'] = view('cart/mini', $reloadData)->render();
$data['quantity'] = $reloadData['quantity'];
return json_success(trans('common.success'), $data);
}
}

View File

@ -600,6 +600,20 @@ header .header-content .right-btn .nav-link {
header .header-content .right-btn .nav-link i {
font-size: 1.1rem;
}
header .header-content .right-btn .cart-badge-quantity {
position: absolute;
left: 21px;
top: -3px;
text-align: center;
font-size: 12px;
width: 23px;
zoom: 0.9;
height: 23px;
line-height: 24px;
background-color: #fd560f;
color: #fff;
border-radius: 50%;
}
header .header-mobile .mobile-content {
padding: 10px 15px;
display: flex;

View File

@ -2105,7 +2105,13 @@ __webpack_require__.r(__webpack_exports__);
$http.get('carts/mini', null, {
hload: true
}).then(function (res) {
$('#offcanvas-right-cart').html(res);
$('#offcanvas-right-cart').html(res.data.html);
if (!res.data.quantity) {
$('.cart-badge-quantity').hide();
} else {
$('.cart-badge-quantity').show().html(res.data.quantity > 99 ? '99+' : res.data.quantity);
}
});
},
@ -2742,6 +2748,14 @@ $(document).ready(function ($) {
var id = $(this).data('id');
$http["delete"]("carts/".concat(id)).then(function (res) {
$(_this).parents('.product-list').remove();
console.log(res.data.quantity);
if (!res.data.quantity) {
$('.cart-badge-quantity').hide();
} else {
$('.cart-badge-quantity').show().html(res.data.quantity > 99 ? '99+' : res.data.quantity);
}
$('.offcanvas-right-cart-count').text(res.data.quantity);
$('.offcanvas-right-cart-amount').text(res.data.amount_format);
});

View File

@ -152,6 +152,21 @@ header {
font-size: 1.1rem;
}
}
.cart-badge-quantity {
position: absolute;
left: 21px;
top: -3px;
text-align: center;
font-size: 12px;
width: 23px;
zoom: 0.9;
height: 23px;
line-height: 24px;
background-color: #fd560f;
color: #fff;
border-radius: 50%;
}
}
}

View File

@ -16,6 +16,13 @@ $(document).ready(function ($) {
$http.delete(`carts/${id}`).then((res) => {
$(this).parents('.product-list').remove();
console.log(res.data.quantity);
if (!res.data.quantity) {
$('.cart-badge-quantity').hide();
} else {
$('.cart-badge-quantity').show().html(res.data.quantity > 99 ? '99+' : res.data.quantity);
}
$('.offcanvas-right-cart-count').text(res.data.quantity);
$('.offcanvas-right-cart-amount').text(res.data.amount_format);
})

View File

@ -12,7 +12,12 @@ export default {
*/
getCarts() {
$http.get('carts/mini', null, {hload: true}).then((res) => {
$('#offcanvas-right-cart').html(res);
$('#offcanvas-right-cart').html(res.data.html);
if (!res.data.quantity) {
$('.cart-badge-quantity').hide();
} else {
$('.cart-badge-quantity').show().html(res.data.quantity > 99 ? '99+' : res.data.quantity);
}
})
},

View File

@ -154,10 +154,11 @@
</ul>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="offcanvas" href="#offcanvas-right-cart" role="button"
<a class="nav-link position-relative" data-bs-toggle="offcanvas" href="#offcanvas-right-cart" role="button"
aria-controls="offcanvasExample">
<i class="iconfont">&#xe634;</i>
<div class="navbar-icon-link-badge"></div>
{{-- <div class="navbar-icon-link-badge"></div> --}}
<span class="cart-badge-quantity"></span>
</a>
</li>
</ul>