VictorS96 commited on
Commit
336a868
·
verified ·
1 Parent(s): 74c34b4

there shouldnt be any prices shown

Browse files
Files changed (3) hide show
  1. admin.html +3 -6
  2. customize.html +17 -41
  3. products.html +6 -6
admin.html CHANGED
@@ -124,8 +124,7 @@
124
  </div>
125
  <div class="text-right">
126
  <p class="text-sm text-gray-500">Requested on <time datetime="2023-05-15">May 15, 2023</time></p>
127
- <p class="mt-1 text-lg font-bold text-indigo-600">$219.00</p>
128
- </div>
129
  </div>
130
  <div class="mt-4 flex justify-between items-center">
131
  <div>
@@ -155,8 +154,7 @@
155
  </div>
156
  <div class="text-right">
157
  <p class="text-sm text-gray-500">Requested on <time datetime="2023-05-14">May 14, 2023</time></p>
158
- <p class="mt-1 text-lg font-bold text-indigo-600">$149.00</p>
159
- </div>
160
  </div>
161
  <div class="mt-4 flex justify-between items-center">
162
  <div>
@@ -186,8 +184,7 @@
186
  </div>
187
  <div class="text-right">
188
  <p class="text-sm text-gray-500">Requested on <time datetime="2023-05-10">May 10, 2023</time></p>
189
- <p class="mt-1 text-lg font-bold text-indigo-600">$129.00</p>
190
- </div>
191
  </div>
192
  <div class="mt-4 flex justify-between items-center">
193
  <div>
 
124
  </div>
125
  <div class="text-right">
126
  <p class="text-sm text-gray-500">Requested on <time datetime="2023-05-15">May 15, 2023</time></p>
127
+ </div>
 
128
  </div>
129
  <div class="mt-4 flex justify-between items-center">
130
  <div>
 
154
  </div>
155
  <div class="text-right">
156
  <p class="text-sm text-gray-500">Requested on <time datetime="2023-05-14">May 14, 2023</time></p>
157
+ </div>
 
158
  </div>
159
  <div class="mt-4 flex justify-between items-center">
160
  <div>
 
184
  </div>
185
  <div class="text-right">
186
  <p class="text-sm text-gray-500">Requested on <time datetime="2023-05-10">May 10, 2023</time></p>
187
+ </div>
 
188
  </div>
189
  <div class="mt-4 flex justify-between items-center">
190
  <div>
customize.html CHANGED
@@ -56,13 +56,7 @@
56
  <!-- Options will be added here dynamically -->
57
  </ul>
58
  </div>
59
- <div class="border-t border-gray-200 pt-4 mt-4">
60
- <div class="flex justify-between items-center">
61
- <span class="text-lg font-medium text-gray-900">Total:</span>
62
- <span class="text-xl font-bold text-indigo-600" id="totalPrice">$199.00</span>
63
- </div>
64
- </div>
65
- </div>
66
  </div>
67
 
68
  <!-- Customization Options -->
@@ -92,19 +86,19 @@
92
  <div class="mb-8 customization-panel">
93
  <h3 class="text-lg font-medium text-gray-900 mb-3">Material</h3>
94
  <div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
95
- <div class="option-selector p-3 rounded-md border-2 border-transparent cursor-pointer bg-gray-100"
96
- data-option="material" data-value="leather" data-price="0" onclick="selectOption(this)">
97
- <div class="font-medium text-gray-900">Leather</div>
98
  <div class="text-sm text-gray-500">Classic and durable</div>
99
  </div>
100
- <div class="option-selector p-3 rounded-md border-2 border-transparent cursor-pointer bg-gray-100"
101
- data-option="material" data-value="metal" data-price="20" onclick="selectOption(this)">
102
- <div class="font-medium text-gray-900">Metal</div>
103
  <div class="text-sm text-gray-500">Premium finish</div>
104
  </div>
105
- <div class="option-selector p-3 rounded-md border-2 border-transparent cursor-pointer bg-gray-100"
106
- data-option="material" data-value="silicone" data-price="-10" onclick="selectOption(this)">
107
- <div class="font-medium text-gray-900">Silicone</div>
108
  <div class="text-sm text-gray-500">Lightweight & flexible</div>
109
  </div>
110
  </div>
@@ -132,8 +126,8 @@
132
  <div>
133
  <label class="inline-flex items-center">
134
  <input type="checkbox" id="engravingPremium" class="form-checkbox h-4 w-4 text-indigo-600 transition duration-150 ease-in-out">
135
- <span class="ml-2 text-sm text-gray-700">Add premium engraving (+$15)</span>
136
- </label>
137
  </div>
138
  </div>
139
  </div>
@@ -184,10 +178,8 @@
184
  <script>
185
  feather.replace();
186
  let selectedOptions = {};
187
- let basePrice = 199.00;
188
-
189
  // Get product from URL
190
- const urlParams = new URLSearchParams(window.location.search);
191
  const product = urlParams.get('product');
192
 
193
  // Set product title and image based on selection
@@ -199,19 +191,16 @@
199
  case 'premium-watch':
200
  productTitle = "Premium Watch";
201
  productImage = "http://static.photos/retail/640x360/1";
202
- basePrice = 199.00;
203
  break;
204
  case 'designer-bag':
205
  productTitle = "Designer Bag";
206
  productImage = "http://static.photos/retail/640x360/2";
207
- basePrice = 149.00;
208
  break;
209
  case 'custom-sneakers':
210
  productTitle = "Custom Sneakers";
211
  productImage = "http://static.photos/retail/640x360/3";
212
- basePrice = 129.00;
213
  break;
214
- }
215
 
216
  document.getElementById('productTitle').textContent = productTitle;
217
  document.getElementById('productPreview').src = productImage;
@@ -248,27 +237,14 @@
248
  li.className = 'flex justify-between';
249
  li.innerHTML = `
250
  <span class="capitalize">${option}:</span>
251
- <span>${data.value} ${data.price > 0 ? `(+$${data.price.toFixed(2)})` : ''}</span>
252
- `;
253
  container.appendChild(li);
254
  }
255
  }
256
 
257
  function updateTotalPrice() {
258
- let total = basePrice;
259
-
260
- // Add up all option prices
261
- for (const optionData of Object.values(selectedOptions)) {
262
- total += optionData.price;
263
- }
264
-
265
- // Add engraving premium if selected
266
- if (document.getElementById('engravingPremium').checked) {
267
- total += 15;
268
- }
269
-
270
- document.getElementById('totalPrice').textContent = `$${total.toFixed(2)}`;
271
- }
272
 
273
  document.getElementById('engravingPremium').addEventListener('change', updateTotalPrice);
274
 
 
56
  <!-- Options will be added here dynamically -->
57
  </ul>
58
  </div>
59
+ </div>
 
 
 
 
 
 
60
  </div>
61
 
62
  <!-- Customization Options -->
 
86
  <div class="mb-8 customization-panel">
87
  <h3 class="text-lg font-medium text-gray-900 mb-3">Material</h3>
88
  <div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
89
+ <div class="option-selector p-3 rounded-md border-2 border-transparent cursor-pointer bg-gray-100"
90
+ data-option="material" data-value="leather" onclick="selectOption(this)">
91
+ <div class="font-medium text-gray-900">Leather</div>
92
  <div class="text-sm text-gray-500">Classic and durable</div>
93
  </div>
94
+ <div class="option-selector p-3 rounded-md border-2 border-transparent cursor-pointer bg-gray-100"
95
+ data-option="material" data-value="metal" onclick="selectOption(this)">
96
+ <div class="font-medium text-gray-900">Metal</div>
97
  <div class="text-sm text-gray-500">Premium finish</div>
98
  </div>
99
+ <div class="option-selector p-3 rounded-md border-2 border-transparent cursor-pointer bg-gray-100"
100
+ data-option="material" data-value="silicone" onclick="selectOption(this)">
101
+ <div class="font-medium text-gray-900">Silicone</div>
102
  <div class="text-sm text-gray-500">Lightweight & flexible</div>
103
  </div>
104
  </div>
 
126
  <div>
127
  <label class="inline-flex items-center">
128
  <input type="checkbox" id="engravingPremium" class="form-checkbox h-4 w-4 text-indigo-600 transition duration-150 ease-in-out">
129
+ <span class="ml-2 text-sm text-gray-700">Add premium engraving</span>
130
+ </label>
131
  </div>
132
  </div>
133
  </div>
 
178
  <script>
179
  feather.replace();
180
  let selectedOptions = {};
 
 
181
  // Get product from URL
182
+ const urlParams = new URLSearchParams(window.location.search);
183
  const product = urlParams.get('product');
184
 
185
  // Set product title and image based on selection
 
191
  case 'premium-watch':
192
  productTitle = "Premium Watch";
193
  productImage = "http://static.photos/retail/640x360/1";
 
194
  break;
195
  case 'designer-bag':
196
  productTitle = "Designer Bag";
197
  productImage = "http://static.photos/retail/640x360/2";
 
198
  break;
199
  case 'custom-sneakers':
200
  productTitle = "Custom Sneakers";
201
  productImage = "http://static.photos/retail/640x360/3";
 
202
  break;
203
+ }
204
 
205
  document.getElementById('productTitle').textContent = productTitle;
206
  document.getElementById('productPreview').src = productImage;
 
237
  li.className = 'flex justify-between';
238
  li.innerHTML = `
239
  <span class="capitalize">${option}:</span>
240
+ <span>${data.value}</span>
241
+ `;
242
  container.appendChild(li);
243
  }
244
  }
245
 
246
  function updateTotalPrice() {
247
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
248
 
249
  document.getElementById('engravingPremium').addEventListener('change', updateTotalPrice);
250
 
products.html CHANGED
@@ -58,8 +58,8 @@
58
  <h3 class="text-xl font-semibold text-gray-900 mb-2">Premium Watch</h3>
59
  <p class="text-gray-600 mb-4">Customizable luxury timepiece with various strap and face options</p>
60
  <div class="flex justify-between items-center">
61
- <span class="text-lg font-bold text-indigo-600">From $199</span>
62
- <i data-feather="chevron-right" class="text-gray-400"></i>
63
  </div>
64
  </div>
65
 
@@ -71,8 +71,8 @@
71
  <h3 class="text-xl font-semibold text-gray-900 mb-2">Designer Bag</h3>
72
  <p class="text-gray-600 mb-4">Personalize your perfect bag with different colors and materials</p>
73
  <div class="flex justify-between items-center">
74
- <span class="text-lg font-bold text-indigo-600">From $149</span>
75
- <i data-feather="chevron-right" class="text-gray-400"></i>
76
  </div>
77
  </div>
78
 
@@ -84,8 +84,8 @@
84
  <h3 class="text-xl font-semibold text-gray-900 mb-2">Custom Sneakers</h3>
85
  <p class="text-gray-600 mb-4">Design your unique sneakers with multiple color combinations</p>
86
  <div class="flex justify-between items-center">
87
- <span class="text-lg font-bold text-indigo-600">From $129</span>
88
- <i data-feather="chevron-right" class="text-gray-400"></i>
89
  </div>
90
  </div>
91
  </div>
 
58
  <h3 class="text-xl font-semibold text-gray-900 mb-2">Premium Watch</h3>
59
  <p class="text-gray-600 mb-4">Customizable luxury timepiece with various strap and face options</p>
60
  <div class="flex justify-between items-center">
61
+ <span class="text-lg font-bold text-indigo-600">Customizable</span>
62
+ <i data-feather="chevron-right" class="text-gray-400"></i>
63
  </div>
64
  </div>
65
 
 
71
  <h3 class="text-xl font-semibold text-gray-900 mb-2">Designer Bag</h3>
72
  <p class="text-gray-600 mb-4">Personalize your perfect bag with different colors and materials</p>
73
  <div class="flex justify-between items-center">
74
+ <span class="text-lg font-bold text-indigo-600">Customizable</span>
75
+ <i data-feather="chevron-right" class="text-gray-400"></i>
76
  </div>
77
  </div>
78
 
 
84
  <h3 class="text-xl font-semibold text-gray-900 mb-2">Custom Sneakers</h3>
85
  <p class="text-gray-600 mb-4">Design your unique sneakers with multiple color combinations</p>
86
  <div class="flex justify-between items-center">
87
+ <span class="text-lg font-bold text-indigo-600">Customizable</span>
88
+ <i data-feather="chevron-right" class="text-gray-400"></i>
89
  </div>
90
  </div>
91
  </div>