My Course — Membangun Website Food Store Dengan Laravel Filament, Livewire dan Payment Gateway

Menampilkan Products Populer

Setelah berhasil menampilkan data categories pada halaman home, selanjutnya kita akan mempelajari cara menampilkan data product populer. Product yang ditampilkan akan dipilih berdasarkan kondisi, yaitu product-product yang memiliki rating di atas 4.

Langkah 1 - Get Data Products Populer di Class Component

Silahkan teman-teman buka file app/Livewire/Web/Home/Index.php, kemudian ubah kode-nya menjadi seperti berikut ini.


        
php

        

            
        

     
<?php

namespace App\Livewire\Web\Home;

use App\Models\Slider;
use App\Models\Product;
use Livewire\Component;
use App\Models\Category;

class Index extends Component
{    
    /**
     * getPopularProducts
     *
     * @return void
     */
    protected function getPopularProducts()
    {
        return Product::with('category', 'ratings.customer')
            ->withAvg('ratings', 'rating') // Menghitung rata-rata rating
            ->having('ratings_avg_rating', '>=', 4)
            ->limit(5)
            ->get();
    }

    public function render()
    {
        return view('livewire.web.home.index', [

            //get sliders
            'sliders' => Slider::latest()->get(),

            //get categories
            'categories' => Category::latest()->get(),

            //get popular products
            'popularProducts' => $this->getPopularProducts(),
            
        ]);
    }
}

Dari perubahan kode di atas, pertama kita import Model Product.


        
perl

        

            
        

     
use App\Models\Product;

Kemudian kita membuat method baru dengan nama getPopularProducts.


        
csharp

        

            
        

     
protected function getPopularProducts()
{

	//...
	
}

Dimana di dalam method di atas, kita melakukan get data products yang memiliki rating di atas 4. Kemudian kita batasi jumlah data yang ditampilkan sebanyak 5 item.


        
php

        

            
        

     
return Product::with('category', 'ratings.customer')
->withAvg('ratings', 'rating') // Menghitung rata-rata rating
->having('ratings_avg_rating', '>=', 4)
->limit(5)
->get();

Selanjutnya, di dalam method render kita akan mengirimkan data products populer di atas ke dalam view component, yaitu dengan cara memanggil nama method-nya.


        
ini

        

            
        

     
'popularProducts' => $this->getPopularProducts(),

Langkah 2 - Membuat Component Card Product Popular

Sekarang kita akan lanjutkan membuat component card yang nanti digunakan untuk me-render data product.

Silahkan teman-teman jalankan perintah berikut ini di dalam terminal/CMD dan pastikan berada di dalam project Laravel-nya.


        
go

        

            
        

     
php artisan make:component cards.product-popular --view

Jika perintah di atas berhasil dijalankan, maka akan mendapatkan 1 file baru yang ada di dalam folder resources/views/components/cards/product-popular.blade.php.

Silahkan buka file tersebut, kemudian ubah semua kode-nya menjadi seperti berikut ini.


        
javascript

        

            
        

     
<div class="col-8 col-md-6 mb-4">
    <div class="card border-0 rounded shadow-sm">
        <img src="{{ asset('/storage/' . $product->image) }}" class="rounded-top-custom object-fit-cover" height="200px">
        <div class="card-body">
            <a href="/products/{{ $product->slug }}" class="text-decoration-none text-dark" wire:navigate>
                <h6 class="card-title">{{ $product->title }}</h6>
            </a>
            <p class="fw-bold text-success mt-3">Rp. {{ number_format($product->price) }}</p>
            <div class="d-flex justify-content-between">
                <div class="mt-3">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill text-orange mb-1 me-2" viewBox="0 0 16 16">
                        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
                    </svg>
                    <span class="fw-bold">{{ number_format($product->ratings_avg_rating, 1) }}</span>
                </div>
                <div>
                    <!-- button add to cart -->
                </div>
            </div>
        </div>
    </div>
</div>

Dari penambahan kode di atas kita menampilkan data product, seperti berikut ini.


        
php

        

            
        

     
$product->image


        
php

        

            
        

     
$product->title


        
php

        

            
        

     
$product->price


        
php

        

            
        

     
$product->ratings_avg_rating

Dimana untuk variable $product nantinya akan dikirimkan oleh parent component, yaitu berisi object data product hasil dari perulangan.

Langkah 3 - Menampilkan Data Products Populer

Sekarang kita akan menampilkan data products populer pada halaman home menggunakan perulangan, yaitu tepatnya menggunakan directive @foreach.

Silahkan teman-teman buka file resources/views/livewire/web/home/index.blade.php, kemudian ubah kode-nya menjadi seperti berikut ini.


        
typescript

        

            
        

     
@section('title')
Food Store - Eat Your Favorite Foods
@stop

@section('keywords')
Food Store, Eat Your Favorite Foods
@stop

@section('description')
Food Store - Eat Your Favorite Foods
@stop

@section('image')
{{ asset('images/logo.png') }}
@stop

<div>
    <div class="container" style="margin-bottom: 120px">

        <!-- Search Bar -->
        <x-utils.search-bar />

        <!-- Sliders -->
        <div class="row justify-content-center mt-4">
            <div class="col-md-6">
                <div id="carouselExample" class="carousel slide w-100">
                    <div class="carousel-inner">

                        @foreach ($sliders as $key => $slider)
                            <div class="carousel-item @if($key == 0) active @endif">
                                <img src="{{ asset('/storage/' . $slider->image) }}" class="d-block w-100 rounded">
                            </div>
                        @endforeach

                    </div>
                    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Previous</span>
                    </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Next</span>
                    </button>
                </div>
            </div>
        </div>

        <!-- Categories -->
        <div class="row justify-content-center mt-4 mb-5">
            <div class="col-md-6">
                <span class="fs-6 fw-bold">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-box mb-1" viewBox="0 0 16 16">
                        <path d="M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5 8 5.961 14.154 3.5zM15 4.239l-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464z" />
                    </svg>
                    CATEGORIES
                </span>
                <hr />
                <div class="row flex-nowrap overflow-auto scroll-custom">
                    @foreach ($categories as $category)
                        <x-cards.category :category="$category" />
                    @endforeach
                </div>
            </div>
        </div>

        <!-- Products Popular -->
        <div class="row justify-content-center mt-5">
            <div class="col-md-6">
                <div class="d-flex justify-content-between">
                    <div>
                        <span class="fs-6 fw-bold">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-bag mb-1" viewBox="0 0 16 16">
                                <path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z" />
                            </svg>
                            PRODUCTS <span class="text-orange">POPULER</span>
                        </span>
                    </div>
                    <div>
                        <a href="/products" wire:navigate class="text-decoration-none text-orange fw-bold">
                            Lihat Lainnya
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16">
                                <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8" />
                            </svg>
                        </a>
                    </div>
                </div>

                <hr />
                <div class="row flex-nowrap overflow-auto scroll-custom">

                    @foreach ($popularProducts as $product)
                        <x-cards.product-popular :product="$product" />
                    @endforeach

                </div>
            </div>
        </div>

        <!-- Products Latest -->

    </div>
</div>

Dari perubahan kode di atas, kita melakukan perulangan data products populer menggunakan directive @foreach.


        
less

        

            
        

     
@foreach ($popularProducts as $product)

	//...
	
@endforeach

Di dalam perulangan di atas, kita memanggil component card product populer yang sudah kita buat sebelumnya dan di dalamnya kita tambahkan props :product yang berisi object data product dari hasil perulangan.


        
bash

        

            
        

     
<x-cards.product-popular :product="$product" />

Langkah 4 - Uji Coba Menampilkan Data Products Populer

Sekarang silahkan reload project-nya, kemudian lihat pada halaman home, jika berhasil maka akan menampilkan hasil seperti berikut ini.

INFORMASI : Mungkin untuk sekarang kamu belum bisa melihat hasilnya, karena belum memiliki data products yang memiliki rating di atas 4.

SELESAI & LANJUTKAN