feat: Add dynamic icon field to 'Choose Us' features, enabling admin management and frontend display, while removing static entries and reducing seeded data.
This commit is contained in:
Yoga Pangestu
parent
72750090aa
commit
77c16168e3
@ -6,6 +6,7 @@
|
||||
use App\Traits\Datatable\WithConfiguration;
|
||||
use App\Traits\Datatable\WithPrependColumn;
|
||||
use Illuminate\Database\Eloquent\Builder;
|
||||
use Illuminate\Support\Facades\Blade;
|
||||
use Rappasoft\LaravelLivewireTables\DataTableComponent;
|
||||
use Rappasoft\LaravelLivewireTables\Views\Column;
|
||||
|
||||
@ -22,6 +23,14 @@ public function columns(): array
|
||||
|
||||
Column::make('Keterangan', 'description')->searchable()->sortable(),
|
||||
|
||||
Column::make('Icon', 'icon')
|
||||
->format(function ($value) {
|
||||
return Blade::render('<flux:icon.'.$value.'/>');
|
||||
})
|
||||
->html()
|
||||
->searchable()
|
||||
->sortable(),
|
||||
|
||||
Column::make('Aksi')
|
||||
->label(function ($row) {
|
||||
$actions = '';
|
||||
|
||||
@ -17,11 +17,14 @@ class ChooseUsForm extends Form
|
||||
|
||||
public string $description = '';
|
||||
|
||||
public string $icon = '';
|
||||
|
||||
public function rules(): array
|
||||
{
|
||||
return [
|
||||
'name' => ['required', 'string', 'max:50'],
|
||||
'description' => ['required', 'string'],
|
||||
'icon' => ['required', 'string', 'max:30'],
|
||||
];
|
||||
}
|
||||
|
||||
@ -30,6 +33,7 @@ public function validationAttributes(): array
|
||||
return [
|
||||
'name' => 'nama',
|
||||
'description' => 'keterangan',
|
||||
'icon' => 'ikon',
|
||||
];
|
||||
}
|
||||
|
||||
@ -39,6 +43,7 @@ public function setChooseUs(ChooseUs $chooseUs): void
|
||||
|
||||
$this->name = $chooseUs->name;
|
||||
$this->description = $chooseUs->description;
|
||||
$this->icon = $chooseUs->icon;
|
||||
}
|
||||
|
||||
public function store(): void
|
||||
@ -52,6 +57,7 @@ public function store(): void
|
||||
ChooseUs::create([
|
||||
'name' => $this->name,
|
||||
'description' => $this->description,
|
||||
'icon' => $this->icon,
|
||||
'sort_order' => 1,
|
||||
]);
|
||||
});
|
||||
@ -64,6 +70,7 @@ public function update(): void
|
||||
$this->chooseUs->update([
|
||||
'name' => $this->name,
|
||||
'description' => $this->description,
|
||||
'icon' => $this->icon,
|
||||
]);
|
||||
}
|
||||
|
||||
|
||||
@ -63,13 +63,7 @@ public function mount(): void
|
||||
})
|
||||
->toArray();
|
||||
|
||||
$this->whyChooseUs = ChooseUs::orderBy('sort_order')
|
||||
->get()
|
||||
->map(fn (ChooseUs $chooseUs) => [
|
||||
'name' => $chooseUs->name,
|
||||
'description' => $chooseUs->description,
|
||||
])
|
||||
->toArray();
|
||||
$this->whyChooseUs = ChooseUs::orderBy('sort_order')->get()->toArray();
|
||||
|
||||
$this->perfumeFeatures = PerfumeFeature::orderBy('sort_order')
|
||||
->get()
|
||||
|
||||
@ -14,6 +14,7 @@ public function up(): void
|
||||
Schema::create('choose_us', function (Blueprint $table) {
|
||||
$table->id();
|
||||
$table->string('name', 50);
|
||||
$table->string('icon', 30);
|
||||
$table->text('description');
|
||||
$table->unsignedInteger('sort_order');
|
||||
$table->timestamp('created_at')->useCurrent();
|
||||
|
||||
@ -14,41 +14,25 @@ public function run(): void
|
||||
'name' => 'Produk 100% Original',
|
||||
'description' => 'Kami hanya menjual parfum original dari brand resmi, tanpa campuran atau versi KW.',
|
||||
'sort_order' => 1,
|
||||
'icon' => 'shield-check',
|
||||
],
|
||||
[
|
||||
'name' => 'Harga Terbaik',
|
||||
'description' => 'Dapatkan harga kompetitif dan promo menarik setiap minggu untuk semua produk.',
|
||||
'sort_order' => 2,
|
||||
],
|
||||
[
|
||||
'name' => 'Pengiriman Cepat',
|
||||
'description' => 'Pesananmu akan dikirim maksimal 24 jam setelah pembayaran dikonfirmasi.',
|
||||
'sort_order' => 3,
|
||||
],
|
||||
[
|
||||
'name' => 'Garansi Produk',
|
||||
'description' => 'Jika parfum rusak atau salah kirim, kami siap menggantinya tanpa ribet.',
|
||||
'sort_order' => 4,
|
||||
'icon' => 'tag',
|
||||
],
|
||||
[
|
||||
'name' => 'Layanan Pelanggan Ramah',
|
||||
'description' => 'Tim kami siap membantu kamu setiap hari melalui chat, email, dan media sosial.',
|
||||
'sort_order' => 5,
|
||||
],
|
||||
[
|
||||
'name' => 'Program Member Eksklusif',
|
||||
'description' => 'Dapatkan poin reward, diskon spesial, dan akses promo terbatas sebagai member.',
|
||||
'sort_order' => 6,
|
||||
'icon' => 'chat-bubble-left-right',
|
||||
],
|
||||
[
|
||||
'name' => 'Koleksi Parfum Lengkap',
|
||||
'description' => 'Tersedia berbagai merek parfum internasional dan lokal dengan varian aroma terbaik.',
|
||||
'sort_order' => 7,
|
||||
],
|
||||
[
|
||||
'name' => 'Belanja Aman dan Nyaman',
|
||||
'description' => 'Sistem pembayaran terenkripsi dan kebijakan privasi menjaga data pelanggan tetap aman.',
|
||||
'sort_order' => 8,
|
||||
'icon' => 'cube',
|
||||
],
|
||||
]);
|
||||
}
|
||||
|
||||
@ -32,72 +32,20 @@ class="rounded-2xl w-full h-[400px] lg:h-[500px] object-cover shadow-xl">
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<article
|
||||
class="bg-white rounded-2xl p-8 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 border border-gray-100 group">
|
||||
<div
|
||||
class="mb-6 w-14 h-14 rounded-full bg-home-primary/5 flex items-center justify-center group-hover:bg-home-primary transition-colors duration-300">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-7 w-7 text-home-primary group-hover:text-white transition-colors duration-300"
|
||||
fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-3">Keaslian 100%</h3>
|
||||
<p class="text-sm text-gray-600 leading-relaxed">
|
||||
Setiap botol dijamin original dari distributor resmi untuk kualitas dan aroma yang murni.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article
|
||||
class="bg-white rounded-2xl p-8 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 border border-gray-100 group">
|
||||
<div
|
||||
class="mb-6 w-14 h-14 rounded-full bg-home-primary/5 flex items-center justify-center group-hover:bg-home-primary transition-colors duration-300">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-7 w-7 text-home-primary group-hover:text-white transition-colors duration-300"
|
||||
fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-3">Pengiriman Cepat</h3>
|
||||
<p class="text-sm text-gray-600 leading-relaxed">
|
||||
Pesananmu diproses dan dikirim di hari yang sama untuk sampai lebih cepat dan aman.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article
|
||||
class="bg-white rounded-2xl p-8 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 border border-gray-100 group">
|
||||
<div
|
||||
class="mb-6 w-14 h-14 rounded-full bg-home-primary/5 flex items-center justify-center group-hover:bg-home-primary transition-colors duration-300">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-7 w-7 text-home-primary group-hover:text-white transition-colors duration-300"
|
||||
fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2-1.343-2-3-2zm0 4c-2.485 0-4.5 1.567-4.5 3.5V18h9v-2.5c0-1.933-2.015-3.5-4.5-3.5z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-3">Harga Bersahabat</h3>
|
||||
<p class="text-sm text-gray-600 leading-relaxed">
|
||||
Nikmati parfum favorit dengan harga kompetitif tanpa mengurangi kualitas premium.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article
|
||||
class="bg-white rounded-2xl p-8 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 border border-gray-100 group">
|
||||
<div
|
||||
class="mb-6 w-14 h-14 rounded-full bg-home-primary/5 flex items-center justify-center group-hover:bg-home-primary transition-colors duration-300">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-7 w-7 text-home-primary group-hover:text-white transition-colors duration-300"
|
||||
fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-3">Layanan Terbaik</h3>
|
||||
<p class="text-sm text-gray-600 leading-relaxed">
|
||||
Tim customer service kami siap membantu 24/7 untuk pengalaman belanja yang sempurna.
|
||||
</p>
|
||||
</article>
|
||||
@foreach ($whyChooseUs as $whyChoose)
|
||||
<article
|
||||
class="bg-white rounded-2xl p-8 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 border border-gray-100 group">
|
||||
<div
|
||||
class="mb-6 w-14 h-14 rounded-full bg-home-primary/5 flex items-center justify-center group-hover:bg-home-primary transition-colors duration-300">
|
||||
<flux:icon :name="$whyChoose['icon']"
|
||||
class="h-7 w-7 text-home-primary group-hover:text-white transition-colors duration-300" />
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-3">{{ $whyChoose['name'] }}</h3>
|
||||
<p class="text-sm text-gray-600 leading-relaxed">
|
||||
{{ $whyChoose['description'] }}
|
||||
</p>
|
||||
</article>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -34,8 +34,7 @@
|
||||
|
||||
<flux:field>
|
||||
<flux:label>Nama <span class="text-red-500 ms-1">*</span></flux:label>
|
||||
<flux:input placeholder="200+ Aroma" wire:model="form.name" autofocus
|
||||
autocomplete="off" />
|
||||
<flux:input placeholder="200+ Aroma" wire:model="form.name" autofocus autocomplete="off" />
|
||||
<flux:error name="form.name" />
|
||||
</flux:field>
|
||||
|
||||
@ -45,6 +44,14 @@
|
||||
auotocomplete="off" />
|
||||
</flux:field>
|
||||
|
||||
<flux:field>
|
||||
<flux:label>Icon <span class="text-red-500 ms-1">*</span></flux:label>
|
||||
<flux:description>Lihat dan copy icon nya di <a href="https://heroicons.com/" class="text-blue-500"
|
||||
target="_blank">Heroicons</a></flux:description>
|
||||
<flux:input placeholder="tag" wire:model="form.icon" autofocus autocomplete="off" />
|
||||
<flux:error name="form.icon" />
|
||||
</flux:field>
|
||||
|
||||
<div class="flex">
|
||||
<flux:spacer />
|
||||
<flux:button variant="primary" class="sm:w-auto cursor-pointer" wire:click="{{ $method }}">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user