Laravel 8 E-Commerce - Admin Product Page

In this video, we will learn about how to create a product page.

Let's see how we can create a product page. First, we need to create a new Livewire component.

Switch to the command prompt and run the command:

php artisan make:livewire admin/AdminProductComponent

Next, switch to the project and create a route for the AdminProductComponent. Open the web.php file and, inside the admin route group, create the route:

Route::get('/admin/products',AdminProductComponent::class)->name('admin.products');

Now, open the AdminProductComponent.php class file and write the following code:

<?php

namespace App\Http\Livewire\Admin;

use App\Models\Product;
use Livewire\Component;
use Livewire\WithPagination;

class AdminProductComponent extends Component
{
    use WithPagination;    

    public function render()
    {
        $products = Product::paginate(10);        
        return view('livewire.admin.admin-product-component',['products'=>$products])->layout('layouts.base');
    }
}

Open the admin-product-component.blade.php view file and write the following code:

<div>
    <style>
        nav svg{
            height: 20px;
        }
        nav .hidden{
            display: block !important;
        }
    </style>
    <div class="container" style="padding:30px 0;">
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <div class="row">
                            <div class="col-md-6">
                                All Products
                            </div>
                            <div class="col-md-6">
                                <a href="#" class="btn btn-success pull-right">Add New</a>
                            </div>
                        </div>
                    </div>
                    <div class="panel-body">
                        @if(Session::has('message'))
                            <div class="alert alert-success" role="alert">{{Session::get('message')}}</div>
                        @endif
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>Id</th>
                                    <th>Image</th>
                                    <th>Name</th>
                                    <th>Stock</th>
                                    <th>Price</th>
                                    <th>Sale Price</th>
                                    <th>Category</th>
                                    <th>Date</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($products as $product)
                                    <tr>
                                        <td>{{$product->id}}</td>
                                        <td><img src="{{asset('assets/images/products')}}/{{$product->image}}" width="60" /></td>
                                        <td>{{$product->name}}</td>
                                        <td>{{$product->stock_status}}</td>
                                        <td>{{$product->regular_price}}</td>
                                        <td>{{$product->sale_price}}</td>
                                        <td>{{$product->category->name}}</td>
                                        <td>{{$product->created_at}}</td>
                                        <td></td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                        {{$products->links()}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Let's add a link for all products inside the admin menu. Open the base layout file and, inside the admin menu, add the link:

<li class="menu-item" >
<a title="All Products" href="{{ route('admin.products') }}">All Products</a>
</li>

Now, it's done. Let's check it. Switch to the browser and refresh the page.

Inside the admin menu, you can see the "All Products" link. Click on this link, and you will see all products with pagination. 10 records are shown here. If you click on the "Next" link, you will see another 10 records.

So, in this way, you can create a product page in Laravel 8 E-commerce.