Update app.py

app.py

@@ -79,6 +79,38 @@ def filter_menu(preference):
     return html_content
 # Preserving your JavaScript for modal and cart functionality (Your original JavaScript logic)
 modal_and_cart_js = """
+<style>
+  /* Floating Cart Button */
+  #view-cart-btn {
+    position: fixed;
+    bottom: 20px; /* Default to bottom for mobile */
+    right: 20px;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    padding: 15px 20px;
+    border-radius: 50px;
+    font-size: 16px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    cursor: pointer;
+    z-index: 1000;
+  }
+
+  @media (min-width: 768px) {
+    #view-cart-btn {
+      top: 20px; /* Move to top for larger screens (laptop/desktop) */
+      bottom: unset; /* Remove bottom positioning */
+    }
+  }
+</style>
+
+<script>
+  function openCart() {
+    // Trigger the click event to show the cart
+    document.querySelector('[data-testid="view-cart"]').click();
+  }
+</script>
+
 <style>
   .cart-container {
     width: 90%; /* Ensure it fits the screen */
@@ -285,22 +317,6 @@ button {
     }
 </script>
 """
-scroll_to_top_js = """
-<script>
-    // Function to scroll to the top of the page when navigating
-    function scrollToTop() {
-        window.scrollTo({ top: 0, behavior: "smooth" });
-    }
-    
-    // Attach scroll-to-top functionality to buttons dynamically
-    document.addEventListener('DOMContentLoaded', function () {
-        const viewCartButton = document.querySelector('button[gr-id="view_cart_button"]');
-        if (viewCartButton) {
-            viewCartButton.addEventListener('click', scrollToTop);
-        }
-    });
-</script>
-"""
 # Authentication and Navigation Logic
 def authenticate_user(email, password):
     if check_credentials(email, password):
@@ -358,7 +374,12 @@ def app():
             menu_output = gr.HTML(value=filter_menu("All"))
 
             # Button to navigate to Cart Page
-            view_cart_button = gr.Button("View Cart", elem_id="view_cart_button")
+            view_cart_button = gr.Button("View Cart")
+             view_cart_floating_button = gr.HTML(
+                """
+                <button id="view-cart-btn" onclick="openCart()">View Cart</button>
+                """
+            )
 
             # Modal window
             modal_window = gr.HTML("""
@@ -398,7 +419,7 @@ def app():
             gr.Row([selected_preference])
             gr.Row(menu_output)
             gr.Row(modal_window)
-            gr.HTML(modal_and_cart_js + scroll_to_top_js)
+            gr.HTML(modal_and_cart_js)
 
          # Cart & Final Order Page
         with gr.Column(visible=False) as cart_section:
@@ -439,20 +460,9 @@ def app():
             lambda: (gr.update(visible=True), gr.update(visible=False)),
             outputs=[login_section, signup_section],
         )
+        # Navigate to Cart Page
         view_cart_button.click(
-            fn=None,  # No Python function needed
-            inputs=None,
-            outputs=None,
-            _js=scroll_to_top_js,  # JavaScript for scrolling to the top
-        ).then(
             lambda: (gr.update(visible=False), gr.update(visible=True)),
-            inputs=None,
-            outputs=[menu_section, cart_section],
-        )
-
-        back_to_menu_button.click(
-            lambda: (gr.update(visible=True), gr.update(visible=False)),
-            inputs=None,
             outputs=[menu_section, cart_section],
         )
         # Navigate Back to Menu Page
@@ -464,4 +474,4 @@ def app():
     return demo
 
 if __name__ == "__main__":
-    app().launch()
+    app().launch()