From 89e7e5e6730e9c230405faea8268a4206073086c Mon Sep 17 00:00:00 2001
From: Gustavo Luigi <=>
Date: Mon, 30 Oct 2023 05:39:18 -0300
Subject: [PATCH] .

---
 assets/js/checkout.js              |  4 +--
 assets/js/product.js               | 42 ++++++++++++++++++++----------
 content/contents/produkt.blade.php |  2 +-
 3 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/assets/js/checkout.js b/assets/js/checkout.js
index 663d44a..bdb7ddc 100644
--- a/assets/js/checkout.js
+++ b/assets/js/checkout.js
@@ -18,7 +18,7 @@ function getAddressFiedlValue(addressComponents, $field) {
 
 const urlBase = document.querySelector('meta[name="url-base"]').getAttribute("content");
 
-let input = document.querySelector("#ctelefon");
+let input = document.querySelector("#tel");
 let iti = null;
 if (input != undefined) {
     iti = window.intlTelInput(input, {
@@ -30,7 +30,7 @@ if (input != undefined) {
                 callback(countryCode);
             });
         },
-        utilsScript: urlBase + "/template/libs/intl-tel-input/js/utils.min.js",
+        utilsScript: urlBase + "/template/assets/libs/intl-tel-input-17.0.0/js/utils.min.js",
     });
 }
 
diff --git a/assets/js/product.js b/assets/js/product.js
index 2bd3d11..2068c96 100644
--- a/assets/js/product.js
+++ b/assets/js/product.js
@@ -15,10 +15,10 @@ document.addEventListener("DOMContentLoaded", async () => {
       else document.querySelector('#btn-check-out').parentElement.display = "block";
     }
     else {
-      $('#btn-add-to-bag').hide();
-      $('#btn-show-bag').show();
-      $('#btn-check-out').parent().hide();
-      $('#count-items-in-bag').html(objProduct.quantity + `<svg style="fill: white; width: 12px; margin-left: 3px; margin-bottom: 2px;" 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>`);
+      document.querySelector('#btn-add-to-bag').style.display = "none";
+      document.querySelector('#btn-show-bag').style.display = "block";
+      document.querySelector('#btn-check-out').parentElement.style.display = "none";
+      document.querySelector('#count-items-in-bag').innerHTML = objProduct.quantity + `<svg style="fill: white; width: 12px; margin-left: 3px; margin-bottom: 2px;" 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>`;
     }
   }
 
@@ -32,17 +32,31 @@ document.addEventListener("DOMContentLoaded", async () => {
 
   let btnAddToBag = document.querySelector('#btn-add-to-bag');
 
-  btnAddToBag.addEventListener("click", () => {
+  btnAddToBag.addEventListener("click", async () => {
     let productId = btnAddToBag.getAttribute("data-id");
-    let parentElement = document.querySelector('#count-products-in-bag').parentElement;
-    let copyElemetn = document.querySelector('#count-products-in-bag').clone();
-    copyElemetn.attr('id', '');
-    copyElemetn.appendTo(parentElement);
-    $('#count-products-in-bag').addClass('animate__animated animate__backInUp');
-    $('#count-products-in-bag').on('animationend', function () {
-      $('#count-products-in-bag').removeClass('animate__animated animate__backInUp');
-      copyElemetn.remove();
+    let quantity = await Cart.getQuantity();
+    document.querySelectorAll('.js-product-counter').forEach(element => {
+      element.innerText = quantity;
+
+      if (quantity > 0) element.style.display = "block";
+      else element.style.display = "none";
     });
-    Cart.addProduct(productId);
+
+    /* let copyElemetn = document.querySelector('#count-products-in-bag').clone();
+    copyElemetn.setAttribute('id', '');
+    copyElemetn.appendTo(parentElement);
+    document.querySelector('#count-products-in-bag').classList.add('animate__animated', 'animate__backInUp');
+    document.querySelector('#count-products-in-bag').addEventListener('animationend', function () {
+
+      document.querySelector('#count-products-in-bag').classList.remove('animate__animated', 'animate__backInUp');
+      copyElemetn.remove();
+
+    }); */
+
+    document.querySelector('#btn-add-to-bag').style.display = "none";
+    document.querySelector('#btn-show-bag').style.display = "block";
+    document.querySelector('#btn-check-out').parentElement.style.display = "none";
+
+    Cart.addItem(productId);
   });
 });
\ No newline at end of file
diff --git a/content/contents/produkt.blade.php b/content/contents/produkt.blade.php
index fb59057..560ade3 100644
--- a/content/contents/produkt.blade.php
+++ b/content/contents/produkt.blade.php
@@ -135,7 +135,7 @@
                             </button>
                             <button id="btn-show-bag" type="button" data-bs-toggle="modal" data-bs-target="#shopping-cart" class="btn btn-success position-relative mb-5">
                                 Im Warenkorb ansehen
-                                <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger" id="count-items-in-bag"></span>
+                                <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger js-product-counter"></span>
                             </button>
                         </div>
                         <div  class="col-12 col-md-6">