Laravel 8 E-Commerce - Create Product Details Page

In this video, we will learn about creating a product details page.

Let's see how we can achieve this. For the details page, let's create a new Livewire component.

For that, switch to the command prompt and type the following command:


php artisan make:livewire DetailsComponent

Now, switch to the project and let's create a route for the details component. For that, go inside the routes directory and open the web.php file. Create the route:


Route::get('/product/{slug}',DetailsComponent::class)->name('product.details');

Next, open the DetailsComponent class file and add the following code:


<?php

namespace App\Http\Livewire;

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

class DetailsComponent extends Component
{
    public $slug;   

    public function mount($slug)
    {
        $this->slug = $slug;               
    }
    
    public function render()
    {
        $product = Product::where('slug',$this->slug)->first();              
        return view('livewire.details-component',['product'=>$product])->layout('layouts.base');
    }
}

Now, open the resources\views\livewire\details-component.blade.php view file and add the following code. Inside this file, let's add the product details template content.

So, go inside the template directory and open the details.html file in a text editor. From this file, just copy the main section and paste it inside the details component view file. Now, let's make some changes.

Inside the image URL, just add the {{asset('url_here')}}. Now, inside this div.wrap-product-detail, add the following code:


<div class="wrap-product-detail">
	<div class="detail-media">
		<div class="product-gallery" wire:ignore>
			<ul class="slides">
				<li data-thumb="{{ asset('assets/images/products' ) }}/{{$product->image}}">
					<img src="{{ asset('assets/images/products') }}/{{$product->image}}" alt="{{$product->name}}" />
				</li> 				                        
			</ul>
		</div>
	</div>
	<div class="detail-info">
		
		<div class="product-rating">
			<i class="fa fa-star" aria-hidden="true"></i>
			<i class="fa fa-star" aria-hidden="true"></i>
			<i class="fa fa-star" aria-hidden="true"></i>
			<i class="fa fa-star" aria-hidden="true"></i>
			<i class="fa fa-star" aria-hidden="true"></i>
			<a href="#" class="count-review">(05 review)</a>
		</div>

		<h2 class="product-name">{{$product->name}}</h2>
		<div class="short-desc">
			{!! $product->short_description !!}
		</div>
		<div class="wrap-social">
			<a class="link-socail" href="#"><img src="{{ asset('assets/images/social-list.png') }}" alt=""></a>
		</div>
		@if($product->sale_price > 0  && $sale->status == 1 && $sale->sale_date > Carbon\Carbon::now())
			<div class="wrap-price">
				<span class="product-price">${{$product->sale_price}}</span>
				<del><span class="product-price regprice">${{$product->regular_price}}</span></del>
			</div>
		@else
			<div class="wrap-price"><span class="product-price">${{$product->regular_price}}</span></div>
		@endif
		<div class="stock-info in-stock">
			<p class="availability">Availability: <b>{{$product->stock_status}}</b></p>
		</div>
		<div class="quantity">
			<span>Quantity:</span>
			<div class="quantity-input">
				<input type="text" name="product-quatity" value="1" data-max="120" pattern="[0-9]*" wire:model="qty" >                                
				<a class="btn btn-reduce" href="#" wire:click.prevent="decreseQuantity"></a>
				<a class="btn btn-increase" href="#" wire:click.prevent="increaseQuantity"></a>
			</div>
		</div>
		<div class="wrap-butons">
			@if($product->sale_price > 0  && $sale->status == 1 && $sale->sale_date > Carbon\Carbon::now())
				<a href="#" class="btn add-to-cart" wire:click.prevent="store({{$product->id}},'{{$product->name}}',{{$product->sale_price}})">Add to Cart</a>
			@else
				<a href="#" class="btn add-to-cart" wire:click.prevent="store({{$product->id}},'{{$product->name}}',{{$product->regular_price}})">Add to Cart</a>
			@endif
			<div class="wrap-btn">
				<a href="#" class="btn btn-compare">Add Compare</a>
				<a href="#" class="btn btn-wishlist">Add Wishlist</a>
			</div>
		</div>
	</div>
	<div class="advance-info">
		<div class="tab-control normal">
			<a href="#description" class="tab-control-item active">description</a>
			<a href="#add_infomation" class="tab-control-item">Addtional Infomation</a>
			<a href="#review" class="tab-control-item">Reviews</a>
		</div>
		<div class="tab-contents">
			<div class="tab-content-item active" id="description">
				{!! $product->description !!}
			</div>
			<div class="tab-content-item " id="add_infomation">
				<table class="shop_attributes">
					<tbody>
						<tr>
							<th>Weight</th><td class="product_weight">1 kg</td>
						</tr>
						<tr>
							<th>Dimensions</th><td class="product_dimensions">12 x 15 x 23 cm</td>
						</tr>
						<tr>
							<th>Color</th><td><p>Black, Blue, Grey, Violet, Yellow</p></td>
						</tr>
					</tbody>
				</table>
			</div>
			<div class="tab-content-item " id="review">
				
				<div class="wrap-review-form">
					<style>
						.width-0-percent{
							width:0%;
						}
						.width-20-percent{
							width:20%;
						}
						.width-40-percent{
							width:40%;
						}
						.width-60-percent{
							width:60%;
						}
						.width-80-percent{
							width:80%;
						}
						.width-100-percent{
							width:100%;
						}
					</style>

					
					<div id="comments">
						
					</div><!-- #comments -->                                    

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

Now, go to the shop-component.blade.php file and add the following link in the product:


<div class="product-thumnail">
	<a href="{{route('product.details',['slug'=>$product->slug])}}" title="{{$product->name}}">
		<figure><img src="{{ asset('assets/images/products') }}/{{$product->image}}" alt="{{$product->name}}"></figure>
	</a>
</div>

Also, add the link with the product title:


<a href="{{route('product.details',['slug'=>$product->slug])}}" class="product-name"><span>{{$product->name}}</span></a>

Now, save this file and let's check it. So, switch to the browser and go to http://localhost:8000/shop.

Now, click on any product, and you can see the details page. And here, you can see the product image, name, price, stock status, and description, all of which are now dynamic.

Now, let's make the popular product and related products dynamic. For that, first, open the DetailsComponent.php class file and inside the render method, just add the following code:


public function render()
{
	$product = Product::where('slug',$this->slug)->first();
	$rel_products = Product::where('category_id',$product->category_id)->inRandomOrder()->limit(5)->get();
	$pop_products = Product::inRandomOrder()->limit(4)->get();
	return view('livewire.details-component',['product'=>$product,'rel_products'=>$rel_products,'pop_products'=>$pop_products])->layout('layouts.base');
}

Now, just open the details-component.blade.php view file and inside the popular products, add the following code:


<div class="widget mercado-widget widget-product">
	<h2 class="widget-title">Popular Products</h2>
		<div class="widget-content">
			<ul class="products">
				@foreach ($popular_products as $p_product)
				<li class="product-item">
					<div class="product product-widget-style">
						<div class="thumbnnail">
							<a href="{{route('product.details',['slug'=>$p_product->slug])}}" title="{{$p_product->name}}">
								<figure><img src="{{ asset('assets/images/products') }}/{{$p_product->image}}" alt="{{$p_product->name}}"></figure>
							</a>
						</div>
						<div class="product-info">
							<a href="{{route('product.details',['slug'=>$p_product->slug])}}" class="product-name"><span>{{$p_product->name}}</span></a>
							<div class="wrap-price"><span class="product-price">${{$p_product->regular_price}}</span></div>
						</div>
					</div>
				</li>
				@endforeach
			</ul>
		</div>
	</div>

Now, inside the related product carousel, add the following code:


<div class="single-advance-box col-lg-12 col-md-12 col-sm-12 col-xs-12">
	<div class="wrap-show-advance-info-box style-1 box-in-site">
		<h3 class="title-box">Related Products</h3>
		<div class="wrap-products">
			<div class="products slide-carousel owl-carousel style-nav-1 equal-container" data-items="5" data-loop="false" data-nav="true" data-dots="false" data-responsive='{"0":{"items":"1"},"480":{"items":"2"},"768":{"items":"3"},"992":{"items":"3"},"1200":{"items":"5"}}' >
				@foreach ($related_products as $r_product)
				<div class="product product-style-2 equal-elem ">
					<div class="product-thumnail">
						<a href="{{route('product.details',['slug'=>$r_product->slug])}}" title="{{ $r_product->name}}">
							<figure><img src="{{ asset('assets/images/products' ) }}/{{ $r_product->image}}" width="214" height="214" alt="T-Shirt Raw Hem Organic Boro Constrast Denim"></figure>
						</a>
						<div class="group-flash">
							<span class="flash-item new-label">new</span>
						</div>
						<div class="wrap-btn">
							<a href="#" class="function-link">quick view</a>
						</div>
					</div>
					<div class="product-info">
						<a href="{{route('product.details',['slug'=>$r_product->slug])}}" class="product-name"><span>{{ $r_product->name}}</span></a>
						<div class="wrap-price"><span class="product-price">${{ $r_product->regular_price}}</span></div>
					</div>
				</div>
				@endforeach
			</div>
		</div><!--End wrap-products-->
	</div>
</div>