Subbu1304 commited on
Commit
f4eda3f
·
verified ·
1 Parent(s): a187cfd

Update templates/cart.html

Browse files
Files changed (1) hide show
  1. templates/cart.html +61 -2
templates/cart.html CHANGED
@@ -122,6 +122,54 @@
122
  flex-direction: column; /* Stack the price and remove button vertically */
123
  align-items: flex-end;
124
  } */
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
125
  </style>
126
  </head>
127
  <body>
@@ -145,14 +193,25 @@
145
  <div class="cart-item-instructions">
146
  <small class="text-muted">Instructions: {{ item.Instructions__c or "None" }}</small>
147
  </div>
148
- <div class="cart-item-quantity mt-2">
149
  <!-- Decrease button -->
150
  <button onclick="updateQuantity('decrease', '{{ item.Name }}', '{{ customer_email }}')">-</button>
151
  <!-- Quantity input field -->
152
  <input type="text" value="{{ item.Quantity__c | int }}" readonly data-item-name="{{ item.Name }}">
153
  <!-- Increase button -->
154
  <button onclick="updateQuantity('increase', '{{ item.Name }}', '{{ customer_email }}')">+</button>
155
- </div>
 
 
 
 
 
 
 
 
 
 
 
156
  </div>
157
  <div class="cart-item-actions">
158
  <div class="text-primary">
 
122
  flex-direction: column; /* Stack the price and remove button vertically */
123
  align-items: flex-end;
124
  } */
125
+
126
+ /* mycahnges */
127
+ /* Container for the quantity input */
128
+ .quantity-input {
129
+ display: flex;
130
+ align-items: center;
131
+ justify-content: center;
132
+ border: 1px solid #ccc; /* Border for the whole container */
133
+ border-radius: 5px; /* Rounded corners for the container */
134
+ padding: 5px;
135
+ }
136
+
137
+ /* Style for the buttons */
138
+ .quantity-btn {
139
+ background-color: #fff;
140
+ border: 1px solid #ccc;
141
+ color: #28a745;
142
+ font-size: 18px;
143
+ width: 30px;
144
+ height: 30px;
145
+ cursor: pointer;
146
+ text-align: center;
147
+ padding: 0;
148
+ }
149
+
150
+ /* Style for the quantity input field */
151
+ .quantity-field {
152
+ width: 40px;
153
+ text-align: center;
154
+ border: none;
155
+ font-size: 18px;
156
+ color: #000;
157
+ background-color: #fff;
158
+ }
159
+
160
+ .quantity-btn:focus, .quantity-field:focus {
161
+ outline: none; /* Remove outline when focusing on the input or button */
162
+ }
163
+
164
+ .quantity-btn:hover {
165
+ background-color: #f8f9fa; /* Light grey on hover for buttons */
166
+ }
167
+
168
+
169
+
170
+
171
+
172
+
173
  </style>
174
  </head>
175
  <body>
 
193
  <div class="cart-item-instructions">
194
  <small class="text-muted">Instructions: {{ item.Instructions__c or "None" }}</small>
195
  </div>
196
+ <!-- <div class="cart-item-quantity mt-2">
197
  <!-- Decrease button -->
198
  <button onclick="updateQuantity('decrease', '{{ item.Name }}', '{{ customer_email }}')">-</button>
199
  <!-- Quantity input field -->
200
  <input type="text" value="{{ item.Quantity__c | int }}" readonly data-item-name="{{ item.Name }}">
201
  <!-- Increase button -->
202
  <button onclick="updateQuantity('increase', '{{ item.Name }}', '{{ customer_email }}')">+</button>
203
+ </div> -->
204
+ <div class="quantity-input">
205
+ <!-- Decrease button -->
206
+ <button class="quantity-btn" onclick="updateQuantity('decrease', '{{ item.Name }}', '{{ customer_email }}')">-</button>
207
+
208
+ <!-- Quantity input field -->
209
+ <input type="text" value="{{ item.Quantity__c | int }}" readonly data-item-name="{{ item.Name }}" class="quantity-field">
210
+
211
+ <!-- Increase button -->
212
+ <button class="quantity-btn" onclick="updateQuantity('increase', '{{ item.Name }}', '{{ customer_email }}')">+</button>
213
+ </div>
214
+
215
  </div>
216
  <div class="cart-item-actions">
217
  <div class="text-primary">