card drawer show amount for free delivery

snippets/cart-drawer.liquid

@@ -82,7 +82,7 @@
         {% endif %}
 
         <script>
-          console.log("cart28", {{ cart | json }}, {{ remaining_amount }}, {{ free_shipping_threshold }}, {{ progress_percentage }}, {{ total_price }}, {{ free_shipping_threshold }}, {{ total_price | times: 100 | divided_by: free_shipping_threshold }})
+          console.log("cart29", {{ cart | json }}, {{ remaining_amount }}, {{ free_shipping_threshold }}, {{ progress_percentage }}, {{ total_price }}, {{ free_shipping_threshold }}, {{ total_price | times: 100 | divided_by: free_shipping_threshold }})
         </script>
 
         <div style="padding: 12px 12px 0 12px; background-color: #deecde; text-align: center;">
@@ -130,6 +130,61 @@
           </script>
 
           <progress class="shx-shipping-costs-progress" value={{ progress_percentage }} max="100"></progress>
+
+          <script>
+            document.addEventListener("DOMContentLoaded", function() {
+              const progressBar = document.querySelector(".shx-shipping-costs-progress");
+              const updateProgressBar = (percentage) => {
+                progressBar.value = 0;
+                setTimeout(() => {
+                  progressBar.value = percentage;
+                }, 100);
+              };
+        
+              // Initial setting of the progress bar value
+              updateProgressBar({{ progress_percentage }});
+        
+              // Listen for custom event to update progress bar
+              document.addEventListener("cart:updated", function(event) {
+                const newTotalPrice = event.detail.total_price;
+                const newFreeShippingThreshold = {{ free_shipping_threshold }};
+                let newProgressPercentage = (newTotalPrice * 100) / newFreeShippingThreshold;
+                if (newProgressPercentage > 100) newProgressPercentage = 100;
+                updateProgressBar(newProgressPercentage);
+              });
+            });
+        
+            // Beispielcode, der das benutzerdefinierte Event auslöst
+            function updateCart(cart) {
+              // Beispiel für die Aktualisierung des Warenkorbs
+              // Diesen Teil sollten Sie an Ihre Logik zur Warenkorbaktualisierung anpassen
+              fetch('/cart/update.js', {
+                method: 'POST',
+                body: JSON.stringify(cart),
+                headers: {
+                  'Content-Type': 'application/json'
+                }
+              })
+              .then(response => response.json())
+              .then(updatedCart => {
+                // Trigger custom event after cart is updated
+                const cartUpdatedEvent = new CustomEvent('cart:updated', {
+                  detail: {
+                    total_price: updatedCart.total_price
+                  }
+                });
+                document.dispatchEvent(cartUpdatedEvent);
+              });
+            }
+        
+            // Beispielaufruf der updateCart Funktion
+            // Passen Sie dies entsprechend Ihrer Warenkorblogik an
+            const exampleCart = {
+              // ... cart details here
+              total_price: {{ total_price }}
+            };
+            updateCart(exampleCart);
+          </script>
           
         </div>
       {% endif %}