BiryaniHubMenu03subbu

Sleeping

App Files Files Community

Subbu1304 commited on Mar 28

Commit

df40741

verified ·

1 Parent(s): aefa70a

Update templates/menu.html

Browse files

Files changed (1) hide show

templates/menu.html +167 -41

templates/menu.html CHANGED Viewed

@@ -555,6 +555,50 @@ form-check-input addon-option{
     padding: 2px 8px;
     font-size: 12px;
 }
 </style>
 </head>
 <body>
@@ -671,11 +715,18 @@ form-check-input addon-option{
 </div>
     <!-- View Cart Button -->
-    <div class="view-cart-container">
         <a href="{{ url_for('cart.cart') }}" class="view-cart-button">
             View Cart
         </a>
-    </div>
   <!-- Modal for Item Details -->
 <div class="modal fade" id="itemModal" tabindex="-1" aria-labelledby="itemModalLabel" aria-hidden="true">
@@ -963,45 +1014,45 @@ document.addEventListener('DOMContentLoaded', function () {
 });
   // Function to add Soft Drink to cart directly
- function addSoftDrinkToCart(name, price, image, section, category, index) {
-    const itemPrice = parseFloat(price);
-    const quantity = 1; // Default quantity
-    const cartPayload = {
-        itemName: name,
-        itemPrice: itemPrice,
-        itemImage: image || '/static/placeholder.jpg',
-        section: section,
-        category: category,
-        addons: [], // No add-ons for Soft Drinks
-        instructions: '', // No instructions for Soft Drinks
-        quantity: quantity
-    };
-    fetch('/cart/add', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(cartPayload)
-    })
-    .then(response => response.json())
-    .then(data => {
-        if (data.success) {
-            // Hide the ADD button and show quantity controls
-            document.getElementById(`add-btn-${index}`).style.display = 'none';
-            document.getElementById(`quantity-control-${index}`).style.display = 'flex';
-            updateCartUI(data.cart);
-            alert('Soft Drink added to cart successfully!');
-        } else {
-            alert(data.error || 'Failed to add Soft Drink to cart.');
-        }
-    })
-    .catch(err => {
-        console.error('Error adding Soft Drink to cart:', err);
-        alert('An error occurred while adding the Soft Drink to the cart.');
-    });
- }
 //   function addSoftDrinkToCart(name, price, image, section, category, index) {
 //     const itemPrice = parseFloat(price);
 //     const quantity = 1; // Default quantity
@@ -1116,6 +1167,81 @@ document.addEventListener('DOMContentLoaded', function () {
 //     .catch(err => console.error("Error removing item from cart:", err));
 // }

     padding: 2px 8px;
     font-size: 12px;
 }
+     #view-cart-container {
+    position: fixed;
+    right: 20px;
+    bottom: 20px;
+    display: none;  /* Hide the container initially */
+    transition: right 0.3s ease; /* Smooth transition for movement */
+}
+.view-cart-button {
+    background-color: #007bff; /* Adjust color as needed */
+    color: white;
+    padding: 10px 20px;
+    border-radius: 5px;
+    text-decoration: none;
+    position: relative;
+}
+.cart-count {
+    position: absolute;
+    top: -10px;
+    right: -10px;
+    background-color: red;
+    color: white;
+    border-radius: 50%;
+    padding: 5px 10px;
+    font-size: 12px;
+}
+.show-cart {
+    right: 20px; /* Move the button to the right */
+}
+.hide-cart {
+    right: -300px; /* Hide it off-screen if needed */
+}
 </style>
 </head>
 <body>
 </div>
     <!-- View Cart Button -->
+    <!-- <div class="view-cart-container">
         <a href="{{ url_for('cart.cart') }}" class="view-cart-button">
             View Cart
         </a>
+    </div> -->
+  <div class="view-cart-container" id="view-cart-container">
+    <a href="{{ url_for('cart.cart') }}" class="view-cart-button" id="view-cart-button">
+        <span id="cart-count" class="cart-count">0</span>
+        View Cart
+    </a>
+</div>
   <!-- Modal for Item Details -->
 <div class="modal fade" id="itemModal" tabindex="-1" aria-labelledby="itemModalLabel" aria-hidden="true">
 });
   // Function to add Soft Drink to cart directly
+ // function addSoftDrinkToCart(name, price, image, section, category, index) {
+ //    const itemPrice = parseFloat(price);
+ //    const quantity = 1; // Default quantity
+ //    const cartPayload = {
+ //        itemName: name,
+ //        itemPrice: itemPrice,
+ //        itemImage: image || '/static/placeholder.jpg',
+ //        section: section,
+ //        category: category,
+ //        addons: [], // No add-ons for Soft Drinks
+ //        instructions: '', // No instructions for Soft Drinks
+ //        quantity: quantity
+ //    };
+ //    fetch('/cart/add', {
+ //        method: 'POST',
+ //        headers: {
+ //            'Content-Type': 'application/json',
+ //        },
+ //        body: JSON.stringify(cartPayload)
+ //    })
+ //    .then(response => response.json())
+ //    .then(data => {
+ //        if (data.success) {
+ //            // Hide the ADD button and show quantity controls
+ //            document.getElementById(`add-btn-${index}`).style.display = 'none';
+ //            document.getElementById(`quantity-control-${index}`).style.display = 'flex';
+ //            updateCartUI(data.cart);
+ //            alert('Soft Drink added to cart successfully!');
+ //        } else {
+ //            alert(data.error || 'Failed to add Soft Drink to cart.');
+ //        }
+ //    })
+ //    .catch(err => {
+ //        console.error('Error adding Soft Drink to cart:', err);
+ //        alert('An error occurred while adding the Soft Drink to the cart.');
+ //    });
+ // }
 //   function addSoftDrinkToCart(name, price, image, section, category, index) {
 //     const itemPrice = parseFloat(price);
 //     const quantity = 1; // Default quantity
 //     .catch(err => console.error("Error removing item from cart:", err));
 // }
+function addSoftDrinkToCart(name, price, image, section, category, index) {
+    const itemPrice = parseFloat(price);
+    const quantity = 1; // Default quantity
+    const cartPayload = {
+        itemName: name,
+        itemPrice: itemPrice,
+        itemImage: image || '/static/placeholder.jpg',
+        section: section,
+        category: category,
+        addons: [], // No add-ons for Soft Drinks
+        instructions: '', // No instructions for Soft Drinks
+        quantity: quantity
+    };
+    fetch('/cart/add', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(cartPayload)
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            // Hide the ADD button and show quantity controls
+            document.getElementById(`add-btn-${index}`).style.display = 'none';
+            document.getElementById(`quantity-control-${index}`).style.display = 'flex';
+            updateCartUI(data.cart);
+            showCartButton(); // Show the cart button when an item is added
+            alert('Soft Drink added to cart successfully!');
+        } else {
+            alert(data.error || 'Failed to add Soft Drink to cart.');
+        }
+    })
+    .catch(err => {
+        console.error('Error adding Soft Drink to cart:', err);
+        alert('An error occurred while adding the Soft Drink to the cart.');
+    });
+}
+// Function to show the "View Cart" button and update the count
+function showCartButton() {
+    var cartContainer = document.getElementById("view-cart-container");
+    var cartButton = document.getElementById("view-cart-button");
+    var cartCountElement = document.getElementById("cart-count");
+    // Make the cart container visible
+    cartContainer.style.display = "block";
+    // Apply transition to move the button from right to left
+    setTimeout(function() {
+        cartContainer.classList.add("show-cart");
+    }, 10);
+    updateCartCount(cartCountElement);
+}
+// Function to update the cart item count
+function updateCartCount(cartCountElement) {
+    // Get the number of items in the cart from your cart data (adjust as needed)
+    fetch('/cart/total-items')  // Replace this with your actual endpoint for cart data
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            cartCountElement.textContent = data.totalItems;  // Update count
+        } else {
+            cartCountElement.textContent = 0;  // In case of an error, show 0
+        }
+    })
+    .catch(err => {
+        console.error('Error fetching cart count:', err);
+        cartCountElement.textContent = 0;  // Fallback in case of an error
+    });
+}