From e4497e2d3c22ce5756190e6ee74fbeb1d9d09fad Mon Sep 17 00:00:00 2001
From: Gustavo Luigi <gustavoluigisouza@gmail.com>
Date: Tue, 30 Aug 2022 10:56:44 +0200
Subject: [PATCH] update bag when adding product

---
 content/contents/produkt.blade.php |  6 +--
 content/master.blade.php           | 59 ++++++++++++++++--------------
 2 files changed, 35 insertions(+), 30 deletions(-)

diff --git a/content/contents/produkt.blade.php b/content/contents/produkt.blade.php
index cc870ab..833d0f3 100644
--- a/content/contents/produkt.blade.php
+++ b/content/contents/produkt.blade.php
@@ -54,17 +54,17 @@
       <div class="row mt-5">
 
           <div class="col-6">
-              <button data-bs-toggle="modal" id="btn-add-to-bag" data-id="{{$content->id}}" data-bs-target="#ShoppingCart" class="btn btn-outline-success  mb-5" style="padding-top: 6px; padding-bottom: 6px; padding-right: 20px; padding-left: 20px;">
+              <button id="btn-add-to-bag" data-id="{{$content->id}}" class="btn btn-outline-success  mb-5" style="padding-top: 6px; padding-bottom: 6px; padding-right: 20px; padding-left: 20px;">
                   <svg style="fill: currentColor; width: 19px; margin-right: 8px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M352 128C352 57.42 294.579 0 224 0 153.42 0 96 57.42 96 128H0v304c0 44.183 35.817 80 80 80h288c44.183 0 80-35.817 80-80V128h-96zM224 48c44.112 0 80 35.888 80 80H144c0-44.112 35.888-80 80-80zm176 384c0 17.645-14.355 32-32 32H80c-17.645 0-32-14.355-32-32V176h48v40c0 13.255 10.745 24 24 24s24-10.745 24-24v-40h160v40c0 13.255 10.745 24 24 24s24-10.745 24-24v-40h48v256z"/></svg>
                   In den Einkaufswagen
               </button>
           </div>
 
           <div class="col-12 col-md-6">
-              <a href="{{url('/checkout')}}" id="btn-check-out" data-id="{{$content->id}}" class="btn btn-primary  mb-5" style="padding-top: 6px; padding-bottom: 6px; padding-right: 20px; padding-left: 20px;">
+              <button id="btn-check-out" data-id="{{$content->id}}" class="btn btn-primary  mb-5" style="padding-top: 6px; padding-bottom: 6px; padding-right: 20px; padding-left: 20px;">
                   <svg style="fill: white; width: 19px; margin-right: 8px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M352 128C352 57.42 294.579 0 224 0 153.42 0 96 57.42 96 128H0v304c0 44.183 35.817 80 80 80h288c44.183 0 80-35.817 80-80V128h-96zM224 48c44.112 0 80 35.888 80 80H144c0-44.112 35.888-80 80-80zm176 384c0 17.645-14.355 32-32 32H80c-17.645 0-32-14.355-32-32V176h48v40c0 13.255 10.745 24 24 24s24-10.745 24-24v-40h160v40c0 13.255 10.745 24 24 24s24-10.745 24-24v-40h48v256z"/></svg>
                   Unverbindlich anfragen
-              </a>
+              </button>
           </div>
 
 
diff --git a/content/master.blade.php b/content/master.blade.php
index 0f14b3e..838301a 100644
--- a/content/master.blade.php
+++ b/content/master.blade.php
@@ -24,7 +24,7 @@
             </div>
         </div>
     </nav>
-    <nav style="background-color:  #79b27f" class="pt-5 pb-5">
+    <nav style="background-color: #79b27f" class="pt-5 pb-5">
         <div class="container">
             <div class="row">
                 <div class="col-3">
@@ -44,7 +44,7 @@
                     <a href="{{url('/kontakt')}}" class="text-decoration-none mt-2 fw-bold">Kontakt</a>
                 </div>
                 <div class="col-1 text-end">
-                    <a href=""  data-bs-toggle="modal" data-bs-target="#ShoppingCart" class="position-relative">
+                    <a href="" data-bs-toggle="modal" data-bs-target="#ShoppingCart" class="position-relative">
                         <svg style="fill: white; width: 30px; margin-top: 6px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M352 128C352 57.42 294.579 0 224 0 153.42 0 96 57.42 96 128H0v304c0 44.183 35.817 80 80 80h288c44.183 0 80-35.817 80-80V128h-96zM224 48c44.112 0 80 35.888 80 80H144c0-44.112 35.888-80 80-80zm176 384c0 17.645-14.355 32-32 32H80c-17.645 0-32-14.355-32-32V176h48v40c0 13.255 10.745 24 24 24s24-10.745 24-24v-40h160v40c0 13.255 10.745 24 24 24s24-10.745 24-24v-40h48v256z"/></svg>
                         <span class="position-absolute top-0 start-90 translate-middle badge rounded-pill bg-danger" id="count-products-in-bag">0</span>
                     </a>
@@ -101,37 +101,42 @@
     @insert("content.includes.scripts")
     <script>
         let objProducts = [];
-        function updateProductsInLocalStorage(){ localStorage.setItem("products", JSON.stringify(objProducts)); }
+        function updateProductsInLocalStorage(){
+            localStorage.setItem("products", JSON.stringify(objProducts));
+            if(objProducts.length > 0) {
+                $.get("{{url('/contents/all')}}/"+objProducts.join(","), function(response, status){
+                    $('#count-products-in-bag').text(response.contents.length);
+                    $('#list-products-in-bag').html('');
+                    response.contents.forEach(function(item){
+                        $('#list-products-in-bag').append(`
+                        <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" aria-label="Default select example">
+                                    <option selected value="1">Anzahl: 1</option>
+                                    <option value="2">Anzahl: 2</option>
+                                    <option value="3">Anzahl: 3</option>
+                                </select>
+                            </td>
+                            <td class="align-middle text-end">18,00€</td>
+                        </tr>`);
+                    });
+                });
+            }else $('#count-products-in-bag').hide();
+        }
         function addToBag(productId){
             if(objProducts.indexOf(productId) == -1) objProducts.push(productId);
             updateProductsInLocalStorage();
         }
         $(window).on('load', function(){
             if(localStorage.getItem("products") != null) objProducts = JSON.parse(localStorage.getItem("products"));
-            $.get("{{url('/contents/all')}}/"+objProducts.join(","), function(response, status){
-                $('#count-products-in-bag').text(response.contents.length);
-                if(response.contents.length > 0) response.contents.forEach(function(item){
-                    $('#list-products-in-bag').append(`
-                    <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" aria-label="Default select example">
-                                <option selected value="1">Anzahl: 1</option>
-                                <option value="2">Anzahl: 2</option>
-                                <option value="3">Anzahl: 3</option>
-                            </select>
-                        </td>
-                        <td class="align-middle text-end">18,00€</td>
-                    </tr>`);
-                });
-                else $('#count-products-in-bag').hide();
-            });
+            updateProductsInLocalStorage();
         });
     </script>
     @yield('scripts')