购物车优化

beike/Shop/Http/Controllers/CartController.php

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

public/build/beike/shop/default/css/app.css

@@ -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;

public/build/beike/shop/default/js/app.js

@@ -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);
     });

resources/beike/shop/default/css/header.scss

@@ -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%;
+      }
     }
   }
 

resources/beike/shop/default/js/app.js

@@ -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);
     })

resources/beike/shop/default/js/common.js

@@ -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);
+      }
     })
   },
 

themes/default/layout/header.blade.php

@@ -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>