.

content/pages/checkout.blade.php

@@ -5,6 +5,20 @@
 @stop
 @section('content')
 <div class="container">
+    <div style="display: none;" class="col-12 text-center" id="no-products-in-checkout">
+    <br>
+    <br>
+    <br>
+    <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
+    <lottie-player src="https://assets2.lottiefiles.com/packages/lf20_3VDN1k.json"  background="transparent"  speed="1"  style="width: 150px; height: 150px; margin-left: 40%"  loop  autoplay></lottie-player>
+    <br>
+    <br>
+    <br>
+    <i>Es befinden sich keine Produkte im Warenkorb</i>
+    <br>
+    <br>
+    <br>
+    </div>
     @if(session()->has('success'))
     <br>
     <div class="alert alert-success">{{session()->get('success')}}</div>
@@ -115,7 +129,8 @@
                             <tfoot>
                                 <tr>
                                     <th scope="col">Gesammt:</th>
-                                    <th colspan="2" class="text-end">2838,00 €
+                                    <th colspan="2" class="text-end">
+                                        <span id="total-checkout-price">0 €</span>
                                         <br>
                                         <small class="text-end fw-light">Preise inkl. 19% Umsatzsteuer</small>
                                     </th>
@@ -208,9 +223,7 @@
             });
         });
     }
-
     $(window).on('load', google.maps.event, initialize);
-
     let input = document.querySelector("#ctelefon");
     let iti = window.intlTelInput(input, {
         initialCountry: "de", geoIpLookup: function(callback) {
@@ -222,6 +235,47 @@
         utilsScript: "{{storage('assets/libs/intl-tel-input/js/utils.min.js')}}",
     });
     $(window).on('load', function(){
+            
+        if(objProducts.length > 0) {
+            let ids = objProducts.map(obj => obj.id);
+            $.get($('meta[name="get-contents"]').attr('content')+"/"+ids.join(","), function(response, status){
+                response.contents.forEach(function(item){
+                    let objProductInfo = objProducts.find(obj => obj.id == item.id);
+                    let elementProduct = `
+                    <tr>
+                        <td class="text-start">
+                            <img class="rounded img-fluid" src="https://picsum.photos/120/120">
+                        </td>
+                        <td class="text-start">
+                            <span class="fs-5">${item.title}</span>
+                            <br>
+                            <small class="text-success">sofort verfügbar</small>
+                            <br>
+                            <select class="form-select form-select-sm select-quantity" data-id="${item.id}" style="width:125px;" aria-label="Default select example">`;
+                            for(let i = 1; i <= 5; i++){
+                                if(objProductInfo.quantity == i) elementProduct += `<option selected value="${i}">Anzahl: ${i}</option>`;
+                                else elementProduct += `<option value="${i}">Anzahl: ${i}</option>`;
+                            }
+                            totalPrice += item.data_fields.preis*objProductInfo.quantity;
+                            elementProduct += `
+                                </select>
+                            <button data-id="${item.id}" class="btn-remove-product text-muted small text-decoration-none" style="padding: 0; border: none; background: transparen;">Löschen</button>
+                        </td>
+                        <td class="align-middle text-end">${formatter.format(item.data_fields.preis)}</td>
+                    </tr>`;
+                    $('#list-products-in-bag').append(elementProduct);
+                });
+                $('#total-price').text(formatter.format(totalPrice));
+            });
+            $('#list-products').parent().parent().parent().parent().parent().find('.modal-footer').show();
+            $('#total-checkout-price').parent().parent().parent().show();
+            $('#no-products-in-checkout').hide();
+        }else {
+            $('#list-products').parent().parent().parent().parent().parent().find('.modal-footer').hide();
+            $('#total-checkout-price').parent().parent().parent().hide();
+            $('#no-products-in-checkout').show();
+        }
+
         $('#anfrage').submit(function(){
             objProducts = [];
             updateProductsInLocalStorage();