优化右侧弹出购物车 Ui 等交互

beike/Shop/Http/Controllers/CartController.php

@@ -110,6 +110,7 @@ class CartController extends Controller
 
         $data['html'] = view('cart/mini', $reloadData)->render();
         $data['quantity'] = $reloadData['quantity'];
+        $data['quantity_all'] = $reloadData['quantity_all'];
 
         return json_success(trans('common.success'), $data);
     }

beike/Shop/Services/CartService.php

@@ -137,25 +137,24 @@ class CartService
      * 获取购物车相关数据
      *
      * @param array $carts
-     * @param bool $showAll
      * @return array
      */
-    public static function reloadData(array $carts = [], bool $showAll = false): array
+    public static function reloadData(array $carts = []): array
     {
         if (empty($carts)) {
             $carts = CartService::list(current_customer());
         }
 
-        $cartList = collect($carts);
+        $cartList = collect($carts)->where('selected', 1);
-        if (!$showAll) {
+
-            $cartList = collect($carts)->where('selected', 1);
-        }
         $quantity = $cartList->sum('quantity');
+        $quantityAll = collect($carts)->sum('quantity');
         $amount = $cartList->sum('subtotal');
 
         $data = [
             'carts' => $carts,
             'quantity' => $quantity,
+            'quantity_all' => $quantityAll,
             'amount' => $amount,
             'amount_format' => currency_format($amount),
         ];

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

@@ -77,10 +77,21 @@ footer {
   }
 
   .footer-bottom {
-    height: 60px;
     display: flex;
     align-items: center;
     background: #EFEFF4;
     color: #666;
+
+    @media (min-width:768px) {
+      height: 60px;
+    }
+
+    @media (max-width:768px) {
+      padding: 10px 0;
+    }
+
+    .right-img {
+      max-height: 42px;
+    }
   }
 }

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

@@ -106,6 +106,10 @@ body[class^="page-account-"] {
   padding-bottom: 10px;
   margin-bottom: 2rem;
 
+  @media (max-width: 992px) {
+    font-size: 1rem;
+  }
+
   &:after {
     position: absolute;
     bottom: 0;
@@ -275,4 +279,16 @@ body[class^="page-account-"] {
 
 table.table thead th, .fw-bold, h1,h2,h3, h4, h5, h6, b, strong, .card .card-header {
   font-family: 'Poppins-Medium', sans-serif;
+}
+
+.text-size-min {
+  font-size: 12px;
+}
+
+.text-truncate-2 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
 }

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

@@ -274,7 +274,6 @@ header {
       padding: 1rem 0;
       border-top: 1px solid #eee;
 
-
       .left {
         width: 80px;
         flex: 0 0 80px;
@@ -288,14 +287,6 @@ header {
       }
 
       .right {
-        .name {
-          overflow: hidden;
-          text-overflow:ellipsis;
-          display: -webkit-box;
-          -webkit-box-orient: vertical;
-          -webkit-line-clamp: 2;
-        }
-
         .price {
           input {
             margin-left: 10px;

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

@@ -3,7 +3,7 @@
  * @link          https://beikeshop.com
  * @Author        pu shuo <pushuo@guangda.work>
  * @Date          2022-09-09 19:16:39
- * @LastEditTime  2022-09-28 17:23:48
+ * @LastEditTime  2022-11-07 09:29:34
  */
 
 export default {
@@ -15,10 +15,10 @@ export default {
     $(document).ready(() => {
       $http.get('carts/mini', null, {hload: true}).then((res) => {
         $('#offcanvas-right-cart').html(res.data.html);
-        if (!res.data.quantity) {
+        if (!res.data.quantity_all) {
           $('.cart-badge-quantity').hide();
         } else {
-          $('.cart-badge-quantity').show().html(res.data.quantity > 99 ? '99+' : res.data.quantity);
+          $('.cart-badge-quantity').show().html(res.data.quantity_all > 99 ? '99+' : res.data.quantity_all);
         }
       })
     })

resources/lang/en/shop/steps.php

@@ -12,7 +12,7 @@
 return [
     'index' => 'Steps',
     'cart' => 'Cart',
-    'checkout' => 'Checkouts',
+    'checkout' => 'Checkout',
-    'submitted_successfully' => 'Submitted Successfully',
+    'submitted_successfully' => 'Placed Order',
     'payment' => 'Payment',
 ];

themes/default/cart/cart.blade.php

@@ -48,8 +48,8 @@
                   </div>
                 </td>
                 <td>
-                  <div class="name mb-1 fw-bold" v-text="product.name"></div>
+                  <div class="name text-truncate-2 mb-1 fw-bold" v-text="product.name"></div>
-                  <div class="attr text-muted">@{{ product.variant_labels }}</div>
+                  <div class="text-size-min text-muted mb-1">@{{ product.variant_labels }}</div>
                   <div class="price text-muted">@{{ product.price_format }}</div>
                 </td>
                 <td>

themes/default/cart/mini.blade.php

@@ -2,7 +2,7 @@
   <h5 id="offcanvasRightLabel" class="mx-auto mb-0">{{ __('shop/carts.mini') }}</h5>
   <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
 </div>
-<div class="offcanvas-body">
+<div class="offcanvas-body pt-0">
   @php $check = 0 @endphp
 
   @if ($carts)
@@ -16,8 +16,8 @@
           <div class="product-info d-flex align-items-center">
             <div class="left"><a href="{{ shop_route('products.show', $cart['product_id']) }}" class="d-flex justify-content-between align-items-center h-100"><img src="{{ $cart['image'] }}" class="img-fluid"></a></div>
             <div class="right flex-grow-1">
-              <a href="{{ shop_route('products.show', $cart['product_id']) }}" class="name fs-sm fw-bold mb-2 text-dark" title="{{ $cart['name'] }}">{{ $cart['name'] }}</a>
+              <a href="{{ shop_route('products.show', $cart['product_id']) }}" class="name fs-sm fw-bold mb-2 text-dark text-truncate-2" title="{{ $cart['name'] }}">{{ $cart['name'] }}</a>
-              <div class="attr text-muted">{{ $cart['variant_labels'] }}</div>
+              <div class="text-muted mb-1 text-size-min">{{ $cart['variant_labels'] }}</div>
               <div class="product-bottom d-flex justify-content-between align-items-center">
                 <div class="price d-flex align-items-center">
                   {{ $cart['price_format'] }} x

themes/default/checkout.blade.php

@@ -157,9 +157,7 @@
               <div class="item" v-for="cart, index in source.carts.carts" :key="index">
                 <div class="image">
                   <img :src="cart.image" class="img-fluid">
-                  <div class="name">
+                  <div class="name text-truncate-2" :title="cart.name" v-text="cart.name"></div>
-                    <span v-text="cart.name"></span>
-                  </div>
                 </div>
                 <div class="price text-end">
                   <div>@{{ cart.price_format }}</div>

themes/default/layout/footer.blade.php

@@ -73,7 +73,7 @@
           {!! $footer_content['bottom']['copyright'][$locale] ?? '' !!}
         </div>
         @if (isset($footer_content['bottom']['image']))
-          <div class="col-auto">
+          <div class="col-auto right-img">
             <img src="{{ image_origin($footer_content['bottom']['image']) }}" class="img-fluid">
           </div>
         @endif