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 AppHttpLivewireAdmin;
use AppModelsProduct;
use LivewireComponent;
use LivewireWithPagination;
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.