added live card

app/Http/Controllers/CardController.php

@@ -26,6 +26,10 @@ class CardController extends Controller
         });
     }
 
+
+    public function items(){
+        return view('components.card-items');
+    }
     public function productCardToggle(Product $product)
     {
 

app/Http/Controllers/ClientController.php

@@ -904,4 +904,8 @@ class ClientController extends Controller
         $title = __('Under Construction') . ' - ' . config('app.name');
         return view('client.under-construction', compact('title'));
     }
+
+    public function cardItems(){
+        
+    }
 }

resources/js/client-custom/lives.js

@@ -0,0 +1,17 @@
+window.addEventListener('load', function () {
+    document.querySelectorAll('.live-card-show')?.forEach(function (el) {
+        el.addEventListener('click', async function (e) {
+            e.preventDefault();
+            const url = this.getAttribute('data-url');
+            let response = await axios.get(url);
+            document.querySelector('#live-card-list').innerHTML = response.data;
+            document.querySelector('#live-card-modal').style.display = 'block';
+        });
+    });
+
+    document.querySelector('#live-card-modal').addEventListener('click',function (e) {
+        if (e.target == this){
+            document.querySelector('#live-card-modal').style.display = 'none';
+        }
+    });
+})

resources/sass/client-custom/_lives.scss

@@ -0,0 +1,48 @@
+#live-card-modal{
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background: #ffffff11;
+    backdrop-filter: blur(7px);
+    z-index: 9999;
+
+    #live-card-container{
+        background: var(--xshop-background);
+        width: 300px;
+        padding: 1rem;
+        height: 100vh;
+        overflow-y: auto;
+        max-width: 85%;
+
+        #live-card-list{
+            margin: 0;
+            list-style: none;
+            padding: 1rem 0;
+
+            li{
+                border-radius: var(--xshop-border-radius);
+                border: 1px solid var(--xshop-text);
+                margin-bottom: .5rem;
+                .product-card-item{
+                    padding: 5px;
+                    display: grid;
+                    grid-template-columns: 4fr 8fr;
+                    grid-gap: 5px;
+                    img{
+                        width: 100%;
+                        height: 75px;
+                        object-fit: cover;
+
+                    }
+                    h3{
+                        font-size: 18px;
+                        margin: .5rem 0 ;
+                    }
+                }
+            }
+        }
+    }
+}

resources/views/components/card-items.blade.php

@@ -0,0 +1,22 @@
+@foreach(\App\Models\Product::whereIn('id', json_decode(\Cookie::get('card'), true))
+        ->where('status', 1)
+        ->get() as $product)
+        <li>
+            <div class="product-card-item">
+                <img src="{{$product->imgUrl()}}" alt="{{$product->name}}">
+                <div class="product-card-content">
+                    <h3>
+                        {{$product->name}}
+                    </h3>
+                    <span>
+                        {{$product->getPrice()}}
+                    </span>
+                    <a href="{{ route('client.product-card-toggle',$product->slug) }}"
+                       class="btn btn-outline-danger btn-sm float-end mt-2">
+                        <i class="ri-delete-bin-line"></i>
+                    </a>
+                </div>
+            </div>
+
+        </li>
+@endforeach

resources/views/website/inc/website-foot.blade.php

@@ -12,6 +12,16 @@
 </a>
 <input type="hidden" id="live-url" value="{{route('admin.setting.live','')}}/">
 @endif
-
+<div id="live-card-modal">
+    <div id="live-card-container">
+        <a href="{{ route('client.card') }}" class="btn btn-outline-primary d-block">
+            <i class="ri-shopping-bag-2-line"></i>
+            {{__("Go to card")}}
+        </a>
+        <div id="live-card-list">
+            @include('components.card-items')
+        </div>
+    </div>
+</div>
 </body>
 </html>

routes/web.php

@@ -420,6 +420,7 @@ Route::middleware([\App\Http\Middleware\VisitorCounter::class])
         Route::get('/videos', [ClientController::class, 'clips'])->name('clips');
         Route::post('/card/check', [\App\Http\Controllers\CardController::class, 'check'])->name('card.check');
         Route::get('/card/discount/{code}', [\App\Http\Controllers\CardController::class, 'discount'])->name('card.discount');
+        Route::get('/card/items', [\App\Http\Controllers\CardController::class, 'items'])->name('card.items');
         Route::get('/card', [\App\Http\Controllers\CardController::class, 'index'])->name('card');
         Route::get('/cardClear', [\App\Http\Controllers\CardController::class, 'clearing'])->name('card.clear');
         Route::get('/profile', [\App\Http\Controllers\CustomerController::class, 'profile'])->name('profile');