File Manager

✏️ Edit File: /home/u625410797/domains/monothailand.com/public_html/views/components/product-card.php

<?php
/**
 * Monothailand PHP Version - Product Card Component
 * ============================================================
 * Reusable product card with Alpine.js for cart interactions
 */

if (!isset($product)) {
    return;
}

$product = $product ?? [];
$id = $product['id'] ?? '';
$name = htmlspecialchars($product['name'] ?? 'Product Name');
$slug = htmlspecialchars($product['slug'] ?? '');
$price = number_format($product['price'] ?? 0, 2);
$originalPrice = isset($product['original_price']) ? number_format($product['original_price'], 2) : null;
$image = $product['main_image'] ?? '';
$category = htmlspecialchars($product['category_name'] ?? '');
$description = htmlspecialchars(substr($product['description'] ?? '', 0, 100)) . '...';
$isInStock = ($product['stock'] ?? 0) > 0;
$discount = $originalPrice ? round((($originalPrice - $price) / $originalPrice) * 100) : 0;
?>

<div 
    class="product-card bg-white rounded-2xl p-4 border border-gray-100 hover:shadow-lg transition-shadow duration-300 group"
    x-data="{ 
        adding: false,
        added: false,
        favorite: false,
        async addToCart() {
            this.adding = true;
            try {
                const response = await fetch('<?php echo BASE_URL; ?>api/cart.php', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ product_id: <?php echo $id; ?>, quantity: 1 })
                });
                const data = await response.json();
                if (data.success) {
                    this.added = true;
                    // Update cart store
                    if (window.Alpine && Alpine.store('cart')) {
                        Alpine.store('cart').items = data.cart.items;
                    }
                    setTimeout(() => this.added = false, 2000);
                }
            } catch (error) {
                console.error('Failed to add to cart:', error);
            } finally {
                this.adding = false;
            }
        },
        async toggleFavorite() {
            this.favorite = !this.favorite;
            try {
                const response = await fetch('<?php echo BASE_URL; ?>api/favorites.php', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ product_id: <?php echo $id; ?>, action: this.favorite ? 'add' : 'remove' })
                });
                const data = await response.json();
                if (data.success && window.Alpine && Alpine.store('favorites')) {
                    Alpine.store('favorites').items = data.favorites;
                }
            } catch (error) {
                console.error('Failed to toggle favorite:', error);
                this.favorite = !this.favorite; // Revert on error
            }
        }
    }"
>
    
    <div class="relative aspect-square rounded-xl overflow-hidden mb-4 bg-gray-50">
        <?php if ($image): ?>
            <a href="<?php echo BASE_URL; ?>products/<?php echo $slug; ?>" class="block w-full h-full">
                <img 
                    src="<?php echo PUBLIC_URL; ?>uploads/products/<?php echo $image; ?>" 
                    alt="<?php echo $name; ?>"
                    class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                    loading="lazy"
                >
            </a>
        <?php else: ?>
            <div class="w-full h-full flex items-center justify-center bg-gray-100">
                <i data-lucide="package" class="w-12 h-12 text-gray-300"></i>
            </div>
        <?php endif; ?>
        
        
        <?php if ($discount > 0): ?>
            <span class="absolute top-2 left-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full">
                -<?php echo $discount; ?>%
            </span>
        <?php endif; ?>
        
        
        <button 
            @click="toggleFavorite()"
            class="absolute top-2 right-2 w-8 h-8 bg-white rounded-full flex items-center justify-center shadow-md hover:bg-gray-50 transition-colors"
            :class="{ 'text-red-500': favorite, 'text-gray-400': !favorite }"
        >
            <i data-lucide="heart" class="w-4 h-4" :class="{ 'fill-current': favorite }"></i>
        </button>
    </div>
    
    
    <div class="space-y-2">
        
        <?php if ($category): ?>
            <span class="text-xs text-gray-500 font-medium"><?php echo $category; ?></span>
        <?php endif; ?>
        
        
        <a href="<?php echo BASE_URL; ?>products/<?php echo $slug; ?>" class="block">
            <h3 class="font-semibold text-gray-900 line-clamp-2 hover:text-blue-600 transition-colors">
                <?php echo $name; ?>
            </h3>
        </a>
        
        
        <p class="text-sm text-gray-600 line-clamp-2"><?php echo $description; ?></p>
        
        
        <div class="flex items-center gap-2">
            <span class="text-xl font-bold text-gray-900">฿<?php echo $price; ?></span>
            <?php if ($originalPrice): ?>
                <span class="text-sm text-gray-400 line-through">฿<?php echo $originalPrice; ?></span>
            <?php endif; ?>
        </div>
        
        
        <?php if ($isInStock): ?>
            <button 
                @click="addToCart()"
                :disabled="adding"
                class="w-full mt-2 bg-blue-600 text-white py-2.5 rounded-xl font-medium hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
            >
                <template x-if="adding">
                    <i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i>
                </template>
                <template x-if="!adding">
                    <i data-lucide="shopping-cart" class="w-4 h-4"></i>
                </template>
                <span x-text="adding ? 'Adding...' : (added ? 'Added!' : 'Add to Cart')"></span>
            </button>
        <?php else: ?>
            <button 
                disabled
                class="w-full mt-2 bg-gray-200 text-gray-500 py-2.5 rounded-xl font-medium cursor-not-allowed"
            >
                Out of Stock
            </button>
        <?php endif; ?>
    </div>
</div>

Batal

⬅ Naik ke views 3 item

Nama	Tipe	Ukuran	Diubah	Aksi
🐘product-card.php	php	6.4 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘product-skeleton.php	php	579 B	2026-05-31 16:43	✏️ Edit 👁️ View
🐘responsive-image.php	php	1.3 KB	2026-05-31 16:43	✏️ Edit 👁️ View