there shouldnt be any prices shown
Browse files- admin.html +3 -6
- customize.html +17 -41
- 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 |
-
|
| 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 |
-
|
| 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 |
-
|
| 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 |
-
|
| 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"
|
| 97 |
-
|
| 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"
|
| 102 |
-
|
| 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"
|
| 107 |
-
|
| 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
|
| 136 |
-
|
| 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 |
-
|
| 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}
|
| 252 |
-
|
| 253 |
container.appendChild(li);
|
| 254 |
}
|
| 255 |
}
|
| 256 |
|
| 257 |
function updateTotalPrice() {
|
| 258 |
-
|
| 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">
|
| 62 |
-
|
| 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">
|
| 75 |
-
|
| 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">
|
| 88 |
-
|
| 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>
|