Update price area layout

rayc2045 · May 15, 2024 · 911b67b · 911b67b
1 parent 08e0e72
commit 911b67b
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 25 deletions.
diff --git a/src/components/product-card.html b/src/components/product-card.html
@@ -52,22 +52,24 @@
     </template>
   </div>
 
-  <div id="product-price" class="space-x-1">
+  <div class="flex space-x-2">
     <span
+      id="original-price"
+      x-text="`$${thousandFormat(product.price)}`"
       :class="product.discount && 'line-through text-gray-400'"
-      x-text="`$${product.price}`"
     ></span>
     <template x-if="product.discount">
-      <span
-        x-text="`$${Math.round(product.price * (100 - product.discount.split('%')[0]) / 100) }`"
-        class="text-gray-600"
-      ></span>
-    </template>
-    <template x-if="product.discount">
-      <span
-        x-text="`-${product.discount}`"
-        class="px-2 rounded-xl text-xs text-red-600 border border-red-600"
-      ></span>
+      <div class="flex items-center space-x-2">
+        <span
+          id="new-price"
+          x-text="`$${thousandFormat(Math.round(product.price * (100 - product.discount.split('%')[0]) / 100))}`"
+        ></span>
+        <span
+          id="discount-badge"
+          x-text="`-${product.discount}`"
+          class="px-2 py-0.5 rounded-xl text-xs text-red-600 border border-red-600"
+        ></span>
+      </div>
     </template>
   </div>
 

diff --git a/src/pages/shop/product.html b/src/pages/shop/product.html
@@ -58,24 +58,26 @@
     <div class="w-full md:w-4/5 lg:w-full mx-auto space-y-4 lg:space-y-8">
       <h1 x-text="product.name" class="text-3xl font-medium"></h1>
 
-      <section id="product-price" class="text-lg space-x-1">
+      <div class="flex space-x-2 text-lg">
         <span
+          id="original-price"
+          x-text="`$${thousandFormat(product.price)}`"
           :class="product.discount && 'line-through text-gray-400'"
-          x-text="`$${product.price}`"
         ></span>
         <template x-if="product.discount">
-          <span
-            x-text="`$${Math.round(product.price * (100 - product.discount.split('%')[0]) / 100) }`"
-            class="text-gray-600"
-          ></span>
-        </template>
-        <template x-if="product.discount">
-          <span
-            x-text="`-${product.discount}`"
-            class="px-2 rounded-xl text-xs text-red-600 border border-red-600"
-          ></span>
+          <div class="flex items-center space-x-2">
+            <span
+              id="new-price"
+              x-text="`$${thousandFormat(Math.round(product.price * (100 - product.discount.split('%')[0]) / 100))}`"
+            ></span>
+            <span
+              id="discount-badge"
+              x-text="`-${product.discount}`"
+              class="px-2 py-0.5 rounded-xl text-xs text-red-600 border border-red-600"
+            ></span>
+          </div>
         </template>
-      </section>
+      </div>
 
       <template x-if="product.colors.length > 1">
         <section id="product-colors">