discounts

assets/views/shop/_card.html

@@ -17,7 +17,14 @@
       <!-- Header: Title & Price -->
       <div class="flex justify-between gap-4">
         <h3 class="text-lg font-bold text-on-surface-strong dark:text-on-surface-dark-strong">{{ product.name }}</h3>
+        {% if product.on_sale %}
+        <span class="flex flex-col items-end whitespace-nowrap leading-tight">
+          <span class="text-sm text-on-surface/50 line-through dark:text-on-surface-dark/50">{{ product.regular_price }} {{ product.currency }}</span>
+          <span class="text-xl font-semibold text-danger"><span class="sr-only">Price</span>{{ product.price }} {{ product.currency }}</span>
+        </span>
+        {% else %}
         <span class="whitespace-nowrap text-xl"><span class="sr-only">Price</span>{{ product.price }} {{ product.currency }}</span>
+        {% endif %}
       </div>
     </div>
   </a>

assets/views/shop/show.html

@@ -54,7 +54,14 @@
     <a href="/category/{{ category.slug }}" class="text-sm font-medium text-primary dark:text-primary-dark">{{ category.name }}</a>
     {% endif %}
     <h1 class="text-3xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">{{ product.name }}</h1>
+    {% if product.on_sale %}
+    <div class="flex items-baseline gap-3">
+      <p class="text-2xl font-semibold text-danger">{{ product.price }} {{ product.currency }}</p>
+      <p class="text-lg text-on-surface/50 line-through dark:text-on-surface-dark/50">{{ product.regular_price }} {{ product.currency }}</p>
+    </div>
+    {% else %}
     <p class="text-2xl font-semibold text-primary dark:text-primary-dark">{{ product.price }} {{ product.currency }}</p>
+    {% endif %}
 
     {% if product.description %}
     <div class="whitespace-pre-line leading-relaxed text-on-surface/80 dark:text-on-surface-dark/80">{{ product.description }}</div>