From 6b005ba109ac9c1260c0e5984d688eceac4450b0 Mon Sep 17 00:00:00 2001 From: ifanprima130206 Date: Sat, 13 Dec 2025 21:40:47 +0700 Subject: [PATCH] feat(show-page): Add show product and article details page --- app/Livewire/Home/Article/Index.php | 16 +- app/Livewire/Home/Cart/Index.php | 17 ++ app/Livewire/Home/Product/Index.php | 17 +- .../livewire/home/article/show.blade.php | 241 +++++++++++++++ .../views/livewire/home/cart/index.blade.php | 259 +++++++++++++++++ .../livewire/home/product/index.blade.php | 4 +- .../livewire/home/product/show.blade.php | 274 ++++++++++++++++++ routes/pages/home.php | 16 +- 8 files changed, 834 insertions(+), 10 deletions(-) create mode 100644 app/Livewire/Home/Cart/Index.php create mode 100644 resources/views/livewire/home/article/show.blade.php create mode 100644 resources/views/livewire/home/cart/index.blade.php create mode 100644 resources/views/livewire/home/product/show.blade.php diff --git a/app/Livewire/Home/Article/Index.php b/app/Livewire/Home/Article/Index.php index 5deefe6..c4c250e 100644 --- a/app/Livewire/Home/Article/Index.php +++ b/app/Livewire/Home/Article/Index.php @@ -10,8 +10,22 @@ ])] class Index extends Component { + public bool $isDetail = false; + public ?string $slug = null; + + public function mount(?string $slug = null) + { + if ($slug) { + $this->isDetail = true; + $this->slug = $slug; + } + } public function render() { - return view('livewire.home.article.index'); + return view( + $this->isDetail + ? 'livewire.home.article.show' + : 'livewire.home.article.index' + ); } } diff --git a/app/Livewire/Home/Cart/Index.php b/app/Livewire/Home/Cart/Index.php new file mode 100644 index 0000000..0a6bcb7 --- /dev/null +++ b/app/Livewire/Home/Cart/Index.php @@ -0,0 +1,17 @@ + 'FAQ', +])] +class Index extends Component +{ + public function render() + { + return view('livewire.home.cart.index'); + } +} diff --git a/app/Livewire/Home/Product/Index.php b/app/Livewire/Home/Product/Index.php index c0713a1..137007a 100644 --- a/app/Livewire/Home/Product/Index.php +++ b/app/Livewire/Home/Product/Index.php @@ -10,8 +10,23 @@ ])] class Index extends Component { + public bool $isDetail = false; + public ?string $slug = null; + + public function mount(?string $slug = null) + { + if ($slug) { + $this->isDetail = true; + $this->slug = $slug; + } + } + public function render() { - return view('livewire.home.product.index'); + return view( + $this->isDetail + ? 'livewire.home.product.show' + : 'livewire.home.product.index' + ); } } diff --git a/resources/views/livewire/home/article/show.blade.php b/resources/views/livewire/home/article/show.blade.php new file mode 100644 index 0000000..fe93cdd --- /dev/null +++ b/resources/views/livewire/home/article/show.blade.php @@ -0,0 +1,241 @@ +@php + $article = (object) [ + 'title' => 'Meluncurkan "Oud Royal": Mahakarya Aroma Eksotis dari Timur Tengah', + 'slug' => 'meluncurkan-oud-royal', + 'category' => 'Event & Peluncuran', + 'author' => 'Tim Editorial', + 'date' => '12 Desember 2025', + 'read_time' => '5 menit baca', + 'image' => 'https://cdn.mos.cms.futurecdn.net/VzUqgr8pfbNcfXrpzeVBPE-1920-80.jpg', + 'content_intro' => + 'Setelah penantian panjang dan riset mendalam selama dua tahun di jantung Kalimantan dan Dubai, kami dengan bangga mempersembahkan koleksi terbaru kami: Oud Royal. Ini bukan sekadar parfum, melainkan sebuah perjalanan aroma yang melintasi batas budaya.', + 'tags' => ['Luxury', 'Oud', 'New Arrival', 'Event'], + ]; + + $relatedArticles = [ + [ + 'title' => 'Cara Membedakan Parfum Original dan Palsu', + 'date' => '10 Des 2025', + 'image' => 'https://placehold.co/400x300/png?text=Tips+Parfum', + ], + [ + 'title' => 'Tren Wewangian Musk di Tahun 2026', + 'date' => '08 Des 2025', + 'image' => 'https://placehold.co/400x300/png?text=Tren+Musk', + ], + [ + 'title' => 'Kenapa Parfum Tidak Tahan Lama di Kulit Kering?', + 'date' => '05 Des 2025', + 'image' => 'https://placehold.co/400x300/png?text=Kulit+Kering', + ], + ]; +@endphp + +
+ +
+ +
+ +
+
+ {{ $article->category }} + • + {{ $article->date }} +
+

+ {{ $article->title }} +

+
+
+
+ Author +
+ Oleh {{ $article->author }} +
+ • + {{ $article->read_time }} +
+
+ +
+
+ {{ $article->title }} +
+
+ +
+ +
+
+ Bagikan: + + + +
+ +
+

+ {{ $article->content_intro }} +

+ +

+ Dalam dunia wewangian, Oud (Gaharu) sering disebut sebagai "emas cair". Harganya yang fantastis + dan aromanya yang kompleks menjadikannya bahan primadona di kalangan kolektor parfum luxury. + Yadi Parfum mengambil langkah berani dengan menghadirkan interpretasi Oud yang lebih modern, + namun tetap menghormati tradisi Timur Tengah. +

+ +

Filosofi di Balik Botol

+

+ "Kami ingin menciptakan sesuatu yang abadi," ujar Yadi, Founder dari Yadi Parfum. "Botol Oud + Royal didesain dengan kaca kristal berat dan tutup magnetik berlapis emas, merefleksikan + kualitas cairan di dalamnya." +

+ +
+ "Parfum adalah seni yang tidak terlihat, puisi yang dihirup, dan kenangan yang tak terhapuskan." +
+ +

+ Peluncuran yang diadakan di Grand Ballroom Ritz Carlton Jakarta dihadiri oleh lebih dari 200 + tamu undangan, termasuk selebriti, influencer kecantikan, dan kolektor parfum ternama. Acara ini + dimeriahkan dengan instalasi seni aroma interaktif. +

+ +
+ Event +

Suasana peluncuran + Oud Royal di Jakarta.

+
+ +

Ketersediaan

+

+ Oud Royal kini tersedia secara eksklusif di website resmi Yadi Parfum dan butik flagship kami di + Central Park Mall. Mengingat kelangkaan bahan bakunya, produksi batch pertama sangat terbatas. +

+
+ +
+
+ @foreach ($article->tags as $tag) + #{{ $tag }} + @endforeach +
+
+ +
+ + Sebelumnya +

+ Review Jujur: Koleksi Floral Series 2024

+ + + Selanjutnya +

+ Tips Menyimpan Parfum Agar Awet Bertahun-tahun

+ +
+
+ + + +
+ +
+
+ + diff --git a/resources/views/livewire/home/cart/index.blade.php b/resources/views/livewire/home/cart/index.blade.php new file mode 100644 index 0000000..53363aa --- /dev/null +++ b/resources/views/livewire/home/cart/index.blade.php @@ -0,0 +1,259 @@ +@php + $cartItems = [ + [ + 'id' => 1, + 'name' => 'Oud Royal Premium', + 'category' => 'Luxury Collection', + 'size' => '50ml', + 'price' => 1200000, + 'image' => 'https://placehold.co/200x200/png?text=Oud+Royal', + 'quantity' => 1, + ], + [ + 'name' => 'Rose Velvet', + 'category' => 'Floral Series', + 'size' => '30ml', + 'price' => 450000, + 'image' => 'https://placehold.co/200x200/png?text=Rose+Velvet', + 'quantity' => 2, + ], + [ + 'name' => 'Ocean Breeze', + 'category' => 'Fresh Collection', + 'size' => '100ml', + 'price' => 320000, + 'image' => 'https://placehold.co/200x200/png?text=Ocean+Breeze', + 'quantity' => 1, + ], + ]; +@endphp + +
+ +
+ +
+
+
+
+ 1
+ Keranjang +
+
+
+
+ 2
+ Pengiriman +
+
+
+
+ 3
+ Pembayaran +
+
+
+ +

Keranjang Belanja (3 Item)

+ +
+ +
+ +
+ + + +

Pembelian di atas Rp 500.000 berhak mendapatkan Gratis Ongkir.

+
+ +
+ @foreach ($cartItems as $index => $item) +
+
+ {{ $item['name'] }} +
+ +
+
+
+

+ {{ $item['category'] }}

+

{{ $item['name'] }}

+

Ukuran: {{ $item['size'] }}

+
+ +
+ +
+
+ + + +
+
+

Rp + {{ number_format($item['price'] * $item['quantity'], 0, ',', '.') }}

+
+
+
+
+ @endforeach +
+ +
+

Mungkin Anda Suka

+
+ @for ($i = 1; $i <= 4; $i++) +
+
+ + +
+

Parfum Rekomendasi + {{ $i }}

+

Rp 299.000

+
+ @endfor +
+
+
+ + + +
+ +
+
+ + diff --git a/resources/views/livewire/home/product/index.blade.php b/resources/views/livewire/home/product/index.blade.php index b663af2..d90a87d 100644 --- a/resources/views/livewire/home/product/index.blade.php +++ b/resources/views/livewire/home/product/index.blade.php @@ -186,7 +186,7 @@ class="w-full h-full object-cover group-hover:scale-105 transition-transform dur
- + + @endforeach +
+ + + +
+
+
+ {{ $product->category }} +
+ + {{ $product->rating }} + ({{ $product->reviews_count }} Ulasan) +
+
+ +

{{ $product->name }}

+ +
+ Rp {{ number_format($product->price, 0, ',', '.') }} + Rp {{ number_format($product->original_price, 0, ',', '.') }} +
+ +
+

+ {{ $product->description }} +

+
+ +
+

+ + Fragrance Notes +

+
+
+ Top Notes + {{ $product->notes['top'] }} +
+
+ Middle + {{ $product->notes['middle'] }} +
+
+ Base Notes + {{ $product->notes['base'] }} +
+
+
+ +
+ +
+ @foreach($product->sizes as $size) + + @endforeach +
+
+ +
+
+ + + +
+ + +
+ +
+ 100% Original + Garansi Pengiriman +
+
+
+ + +
+
+
+ + + +
+
+ +
+
+

Oud Royal Premium adalah mahakarya wewangian yang diciptakan untuk mereka yang menghargai kualitas tanpa kompromi. Menggunakan minyak gaharu (oud) langka dari Kalimantan yang difermentasi selama 5 tahun, dipadukan dengan kesegaran Bergamot Italia di top notes.

+

Jantung aromanya mekar dengan mawar Bulgaria yang dipetik saat fajar, memberikan nuansa floral yang mewah namun tidak berlebihan. Base notes yang hangat dari Amber dan Musk memastikan aroma ini menempel di kulit Anda, menciptakan jejak aroma (sillage) yang tak terlupakan.

+
    +
  • Konsentrasi: Eau de Parfum (EDP)
    • +
  • Longevity: 8-12 Jam
    • +
  • Projection: 2-3 Meter
    • +
  • Gender: Unisex (Condong ke Maskulin)
    • +
+
+
+

Pengiriman & Pengembalian

+

Pesanan sebelum jam 14.00 dikirim hari yang sama. Pengiriman aman dengan bubble wrap tebal dan box eksklusif.

+

Garansi uang kembali 100% jika produk pecah atau tidak original (wajib video unboxing).

+
+
+
+ +
+
+

Anda Mungkin Juga Suka

+
+ + +
+
+ +
+ @foreach ($relatedProducts as $rec) +
+
+ {{ $rec['name'] }} +
+
+
+ {{ $rec['category'] }}
+

{{ $rec['name'] }}

+
+ Rp + {{ number_format($rec['price'], 0, ',', '.') }} + +
+
+
+ @endforeach +
+
+ + + + + \ No newline at end of file diff --git a/routes/pages/home.php b/routes/pages/home.php index 704ee32..0001f02 100644 --- a/routes/pages/home.php +++ b/routes/pages/home.php @@ -2,6 +2,7 @@ use App\Livewire\Home\Article\Index as ArticleIndex; use App\Livewire\Home\Faq\Index as FaqComponent; +use App\Livewire\Home\Cart\Index as CartComponent; use App\Livewire\Home\Index as HomeComponent; use App\Livewire\Home\Outlet as OutletComponent; use App\Livewire\Home\Product\Index as ProductComponent; @@ -15,19 +16,22 @@ Route::prefix('products') ->name('product.') ->group(function () { - Route::prefix('perfumes') - ->name('perfume.') - ->group(function () { - Route::get('/', ProductComponent::class)->name('index'); - }); + + Route::get('perfumes/{slug?}', ProductComponent::class) + ->name('perfume'); }); + Route::get('/vouchers', VoucherComponent::class)->name('voucher'); Route::prefix('articles') ->name('article.') ->group(function () { - Route::get('/', ArticleIndex::class)->name('index'); + Route::get('{slug?}', ArticleIndex::class) + ->name('index'); }); + Route::get('/faq', FaqComponent::class)->name('faq'); + +Route::get('/cart', CartComponent::class)->name('cart');