sboulahtit/orion
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: improve products page price format and mobile button

Browse Source 
- Use € symbol via Intl.NumberFormat instead of currency code
- Make 'Add to Cart' button show icon only on mobile (sm:inline for text)
- Add formatPrice() helper for consistent currency formatting

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Samir Boulahtit
2026-01-02 20:37:43 +01:00
parent ec7d7e1da9
commit 25a2eef979
1 changed files with 20 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
app/templates/shop/products.html
View File

@@ -84,13 +84,19 @@
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2 line-clamp-2" x-text="product.marketplace_product?.title"></h3>
</a>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3 line-clamp-2" x-text="product.marketplace_product?.description"></p>
<div class="flex items-center justify-between">
<div>
<span class="text-2xl font-bold text-primary" x-text="`${product.currency} ${product.price}`"></span>
<span x-show="product.sale_price" class="text-sm text-gray-500 line-through ml-2" x-text="`${product.currency} ${product.sale_price}`"></span>
<div class="flex items-center justify-between gap-2">
<div class="min-w-0">
<span class="text-xl sm:text-2xl font-bold text-primary" x-text="formatPrice(product.price)"></span>
<span x-show="product.sale_price" class="text-sm text-gray-500 line-through ml-2" x-text="formatPrice(product.sale_price)"></span>
</div>
<button @click.prevent="addToCart(product)" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors">
Add to Cart
<button @click.prevent="addToCart(product)"
class="flex-shrink-0 p-2 sm:px-4 sm:py-2 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors flex items-center justify-center gap-2"
style="background-color: var(--color-primary)"
:title="'Add to Cart'">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
<span class="hidden sm:inline">Add to Cart</span>
</button>
</div>
</div>
@@ -201,6 +207,14 @@ document.addEventListener('alpine:init', () => {
this.loadProducts();
},
formatPrice(amount) {
if (!amount && amount !== 0) return '';
return new Intl.NumberFormat('de-DE', {
style: 'currency',
currency: 'EUR'
}).format(amount);
},
async addToCart(product) {
console.log('[SHOP] Adding to cart:', product);