Update templates/cart.html

templates/cart.html

@@ -7,6 +7,14 @@
     <!-- Bootstrap CSS -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
     <style>
+      .cart-container {
+    border-radius: 10px; /* Set the corner radius for the container */
+    border: 2px solid #ccc; /* Add a stroke (border) around the container, change the color as needed */
+    background-color: #f9f9f9; /* Set a background color */
+    padding: 15px; /* Add padding inside the container */
+    box-sizing: border-box; /* Ensure padding is included in the total width/height calculation */
+}
+
       body {
             font-family: Arial, sans-serif;
             background-color: #f3f4f6;
@@ -352,47 +360,48 @@
              <h4 class="mb-4 fw-bold">Your Cart</h4>
 
             <!-- Cart Items -->
-            {% for item in cart_items %}
-             <div class="cart-item">
-                 <div class="image-wrapper">
-                     <img src="{{ item.Image1__c }}" alt="{{ item.Name }}" onerror="this.src='/static/placeholder.jpg';">
-                </div>
-                <div class="cart-item-details">
-                    <div class="cart-item-title">
-                        {{ item.Name }}
-                    </div> 
-                    <div class="cart-item-addons">
-                        <small class="text-muted">Add-ons: {{ item.Add_Ons__c }}</small>
-                    </div>
-                    <div class="cart-item-instructions">
-                        <small class="text-muted">Instructions: {{ item.Instructions__c or "None" }}</small>
-                    </div>
-                    <div class="cart-item-quantity mt-2">
-                        <button onclick="updateQuantity('decrease', '{{ item.Name }}', '{{ customer_email }}')">-</button>
-                        <input type="text" value="{{ item.Quantity__c|int }}" readonly data-item-name="{{ item.Name }}">
-                        <button onclick="updateQuantity('increase', '{{ item.Name }}', '{{ customer_email }}')">+</button>
-                    </div>
-                </div>
-                <div class="cart-item-actions">
-                    <div>
-                      <button class="remove-icon" onclick="removeItemFromCart('{{ item.Name }}')">
-                        <!-- SVG Recycle Bin Icon -->
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-                          <path d="M6 19C6 20.1 6.9 21 8 21H16C17.1 21 18 20.1 18 19V7H6V19ZM8 3C8 2.45 8.45 2 9 2H15C15.55 2 16 2.45 16 3V5H8V3Z" fill="none" stroke="black" stroke-width="2"/>
-                        </svg>
-                      </button>
-                    </div>
-
-                    
-
-                    <div class="text-primary" style="color: #000 !important;">  <!-- Inline style to ensure it's black -->
-                        $<span class="base-price">{{ item.Price__c }}</span> 
+            <div class="cart-container">
+                {% for item in cart_items %}
+                    <div class="cart-item">
+                        <div class="image-wrapper">
+                            <img src="{{ item.Image1__c }}" alt="{{ item.Name }}" onerror="this.src='/static/placeholder.jpg';">
+                        </div>
+                        <div class="cart-item-details">
+                            <div class="cart-item-title">
+                                {{ item.Name }}
+                            </div> 
+                            <div class="cart-item-addons">
+                                <small class="text-muted">Add-ons: {{ item.Add_Ons__c }}</small>
+                            </div>
+                            <div class="cart-item-instructions">
+                                <small class="text-muted">Instructions: {{ item.Instructions__c or "None" }}</small>
+                            </div>
+                            <div class="cart-item-quantity mt-2">
+                                <button onclick="updateQuantity('decrease', '{{ item.Name }}', '{{ customer_email }}')">-</button>
+                                <input type="text" value="{{ item.Quantity__c|int }}" readonly data-item-name="{{ item.Name }}">
+                                <button onclick="updateQuantity('increase', '{{ item.Name }}', '{{ customer_email }}')">+</button>
+                            </div>
+                        </div>
+                        <div class="cart-item-actions">
+                            <div>
+                                <button class="remove-icon" onclick="removeItemFromCart('{{ item.Name }}')">
+                                    <!-- SVG Recycle Bin Icon -->
+                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+                                      <path d="M6 19C6 20.1 6.9 21 8 21H16C17.1 21 18 20.1 18 19V7H6V19ZM8 3C8 2.45 8.45 2 9 2H15C15.55 2 16 2.45 16 3V5H8V3Z" fill="none" stroke="black" stroke-width="2"/>
+                                    </svg>
+                                </button>
+                            </div>
+                            <div class="text-primary" style="color: #000 !important;">
+                                $<span class="base-price">{{ item.Price__c }}</span>
+                            </div>
+                        </div>
                     </div>
-                </div>
+                {% else %}
+                    <!-- Code to handle the case when cart_items is empty -->
+                    <p>No items in your cart.</p>
+                {% endfor %}
             </div>
-            {% else %}
-            <p class="text-center">Your cart is empty.</p>
-            {% endfor %}
+
 
             <!-- Suggestions Section -->
             {% if suggestions %}