Update templates/cart.html

templates/cart.html

@@ -260,53 +260,75 @@
     align-items: center;
     text-align: center;
 }
+.suggestion-section {
+    margin-top: 20px;
+    padding: 15px;
+    background-color: #f8f9fa;
+    border-radius: 10px;
+}
+
+.suggestion-items-container {
+    display: flex; /* Align the items in a row */
+    overflow-x: auto; /* Make the container scrollable horizontally */
+    gap: 15px; /* Add space between items */
+    padding-bottom: 10px; /* Add padding at the bottom for scrollbar */
+}
+
+.suggestion-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0; /* Prevent items from shrinking */
+    width: 150px; /* Set a fixed width for each suggestion item */
+    padding: 10px;
+    border-radius: 10px;
+    background-color: #fff;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease;
+}
+
+.suggestion-item:hover {
+    transform: scale(1.05); /* Add zoom effect on hover */
+}
+
+.suggestion-item img {
+    width: 60px;
+    height: 60px;
+    object-fit: cover;
+    border-radius: 5px;
+    margin-right: 10px;
+}
+
+.suggestion-item div {
+    flex-grow: 1; /* Allow text to take up available space */
+}
+
+.add-back-button {
+    padding: 6px 20px;
+    font-size: 0.9rem;
+    border-radius: 20px;
+    border: 1px solid #fff;
+    background-color: #fff;
+    color: #0FAA39;
+    cursor: pointer;
+    transition: background-color 0.3s, color 0.3s;
+}
+
+.add-back-button:hover {
+    background-color: #0FAA39;
+    color: #fff;
+    border-color: #0FAA39;
+}
+
+.bi-cart-plus {
+    font-size: 1.2rem;
+    margin-right: 5px; /* Space between icon and text */
+}
 
 
         
-        .suggestion-section {
-            margin-top: 20px;
-            padding: 15px;
-            background-color: #f8f9fa;
-            border-radius: 10px;
-        }
-       .suggestion-item {
-            display: flex;
-            align-items: center; /* Vertically align image and text */
-            justify-content: space-between; /* Space between the image/text and the button */
-            padding: 10px 0;
-        }
-        .suggestion-item img {
-            width: 50px;
-            height: 50px;
-            object-fit: cover;
-            border-radius: 5px;
-            margin-right: 10px; /* Spacing between the image and the text */
-        }
-        .suggestion-item div {
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            flex-grow: 1; /* Allow the text to take up the available space */
-        }
-        .suggestion-item button {
-            padding: 5px 15px;
-            font-size: 12px;
-            border-radius: 5px;
-            border: 2px solid #0FAA39;
-            color: #0FAA39;
-            background-color: #fff;
-            font-weight: 600;
-            height: 44px;
-            width: 100px;
-            cursor: pointer;
-            transition: background-color 0.3s, color 0.3s, border-color 0.3s;
-            margin-left: auto; /* Push button to the right */
-        }
-       .suggestion-item button:hover {
-           background-color: #fff; /* Change background to green on hover */
-           color: #0FAA39; /* Change text color to white on hover */
-           border-color: #0FAA39; /* Keep the border green */
-       }
+        
+
         
         .remove-icon {
             border: none;
@@ -365,17 +387,23 @@
             {% if suggestions %}
             <div class="suggestion-section">
                 <h5>Complete Your Meal</h5>
-                {% for suggestion in suggestions %}
-                <div class="suggestion-item">
-                    <img src="{{ suggestion.Image1__c }}" alt="{{ suggestion.Name }}" onerror="this.src='/static/placeholder.jpg';">
-                    <div>
-                        <div>{{ suggestion.Name }}</div>
-                        <div class="text-muted">${{ suggestion.Price__c }}</div>
+                <div class="suggestion-items-container">
+                    {% for suggestion in suggestions %}
+                    <div class="suggestion-item">
+                        <img src="{{ suggestion.Image1__c }}" alt="{{ suggestion.Name }}" onerror="this.src='/static/placeholder.jpg';">
+                        <div>
+                            <div>{{ suggestion.Name }}</div>
+                            <div class="text-muted">${{ suggestion.Price__c }}</div>
+                        </div>
+                        <!-- Replace add button with a cart icon -->
+                        <button class="add-back-button" onclick="addToCartSuggestion('{{ suggestion.Name }}', '{{ suggestion.Price__c }}', '{{ suggestion.Image1__c }}', '{{ suggestion.Id }}')">
+                            <i class="bi bi-cart-plus"></i> <!-- Cart icon -->
+                        </button>
                     </div>
-                    <button class="add-back-button" onclick="addToCartSuggestion('{{ suggestion.Name }}', '{{ suggestion.Price__c }}', '{{ suggestion.Image1__c }}', '{{ suggestion.Id }}')">Add</button>
+                    {% endfor %}
                 </div>
-                {% endfor %}
             </div>
+
             {% endif %}
 
             <!-- Subtotal -->
@@ -631,8 +659,7 @@
         }
         function addToCartSuggestion(itemName, itemPrice, itemImage, itemId) {
             const customerEmail = "{{ customer_email }}"; // Get customer email from session
-
-            // Create the data object to send to the server
+            // Create the data object to send to the ser        ver
             const data = {
                 item_name: itemName,
                 item_price: itemPrice,
@@ -642,7 +669,6 @@
                 instructions: "", // Default to empty, you can adjust if needed
                 customer_email: customerEmail
             };
-
             // Send the data to the backend via a POST request
             fetch('/cart/add_suggestion_to_cart', {
                 method: 'POST',