131 lines
3.6 KiB
Markdown
131 lines
3.6 KiB
Markdown
# Product Badge System
|
|
|
|
## Overview
|
|
Sistem badge produk yang menampilkan label dinamis pada setiap produk berdasarkan kondisi tertentu. Hanya 1 badge yang ditampilkan per produk sesuai dengan prioritas yang telah ditentukan.
|
|
|
|
## Prioritas Badge
|
|
|
|
Badge ditampilkan berdasarkan prioritas berikut (dari tertinggi ke terendah):
|
|
|
|
### 1. **Terlaris** (Prioritas Tertinggi)
|
|
- **Kondisi**: Produk memiliki penjualan ≥ 500 unit dalam 1 bulan terakhir
|
|
- **Warna**: Merah (`bg-red-500 text-white`)
|
|
- **Label**: "Terlaris"
|
|
|
|
### 2. **Baru**
|
|
- **Kondisi**: Produk dibuat dalam 1 bulan terakhir
|
|
- **Warna**: Primary (`bg-home-primary text-white`)
|
|
- **Label**: "Baru"
|
|
|
|
### 3. **Hot** (Prioritas Terendah)
|
|
- **Kondisi**: Produk memiliki views > 100
|
|
- **Warna**: Oranye (`bg-orange-500 text-white`)
|
|
- **Label**: "Hot"
|
|
|
|
## Implementasi
|
|
|
|
### Database Migration
|
|
Kolom `view` telah ditambahkan ke tabel:
|
|
- `perfumes`
|
|
- `bottles`
|
|
- `products`
|
|
|
|
File migration: `2025_12_26_001500_add_view_column_to_product_tables.php`
|
|
|
|
### Backend Logic
|
|
File: `app/Livewire/Home/Product/Index.php`
|
|
|
|
#### Method `render()`
|
|
- Menambahkan `withCount` untuk menghitung total penjualan dalam 1 bulan terakhir
|
|
- Memanggil method `determineBadge()` untuk setiap produk
|
|
|
|
#### Method `determineBadge()`
|
|
```php
|
|
private function determineBadge($product): ?array
|
|
{
|
|
// Priority 1: Baru (created within last month)
|
|
if ($product->created_at && $product->created_at->isAfter(now()->subMonth())) {
|
|
return [
|
|
'label' => 'Baru',
|
|
'class' => 'bg-blue-500 text-white',
|
|
];
|
|
}
|
|
|
|
// Priority 2: Terlaris (sales >= 500 in last month)
|
|
if (isset($product->total_sales) && $product->total_sales >= 500) {
|
|
return [
|
|
'label' => 'Terlaris',
|
|
'class' => 'bg-red-500 text-white',
|
|
];
|
|
}
|
|
|
|
// Priority 3: Hot (high views - > 100 views)
|
|
if (isset($product->view) && $product->view > 100) {
|
|
return [
|
|
'label' => 'Hot',
|
|
'class' => 'bg-orange-500 text-white',
|
|
];
|
|
}
|
|
|
|
return null;
|
|
}
|
|
```
|
|
|
|
### Frontend Display
|
|
File: `resources/views/livewire/home/product/index.blade.php`
|
|
|
|
Badge ditampilkan secara kondisional:
|
|
```blade
|
|
@if (isset($product->badge) && $product->badge)
|
|
<span class="absolute top-4 left-4 {{ $product->badge['class'] }} text-[10px] uppercase tracking-wider font-bold px-3 py-1 rounded-full z-10 shadow-md">
|
|
{{ $product->badge['label'] }}
|
|
</span>
|
|
@endif
|
|
```
|
|
|
|
## Kustomisasi
|
|
|
|
### Mengubah Threshold
|
|
Anda dapat mengubah nilai threshold di method `determineBadge()`:
|
|
|
|
- **Baru**: Ubah `now()->subMonth()` menjadi periode lain (misal: `now()->subWeeks(2)`)
|
|
- **Terlaris**: Ubah `>= 500` menjadi nilai lain
|
|
- **Hot**: Ubah `> 100` menjadi nilai lain
|
|
|
|
### Menambah Badge Baru
|
|
Tambahkan kondisi baru di method `determineBadge()` dengan memperhatikan prioritas:
|
|
|
|
```php
|
|
// Priority 4: Diskon (contoh)
|
|
if (isset($product->discount) && $product->discount > 0) {
|
|
return [
|
|
'label' => 'Diskon',
|
|
'class' => 'bg-green-500 text-white',
|
|
];
|
|
}
|
|
```
|
|
|
|
### Mengubah Warna Badge
|
|
Ubah class Tailwind di array return:
|
|
```php
|
|
return [
|
|
'label' => 'Baru',
|
|
'class' => 'bg-purple-500 text-white', // Ganti warna di sini
|
|
];
|
|
```
|
|
|
|
## Tracking View Count
|
|
|
|
Untuk meningkatkan view count produk, tambahkan logika di halaman detail produk:
|
|
|
|
```php
|
|
// Di controller/livewire detail produk
|
|
$product->increment('view');
|
|
```
|
|
|
|
## Notes
|
|
|
|
- Badge hanya ditampilkan jika kondisi terpenuhi
|
|
- Jika tidak ada kondisi yang terpenuhi, tidak ada badge yang ditampilkan
|
|
- Sistem menggunakan prioritas, jadi jika produk memenuhi multiple kondisi, hanya badge dengan prioritas tertinggi yang ditampilkan
|