购物车优化
This commit is contained in:
parent
4b0f31ad52
commit
4643926768
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -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"></i>
|
||||
<div class="navbar-icon-link-badge"></div>
|
||||
{{-- <div class="navbar-icon-link-badge"></div> --}}
|
||||
<span class="cart-badge-quantity"></span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
Loading…
Reference in New Issue